Dynamic Header eventuell Flash ?

wasweisich · 15.09.2015

Hallo,
seid langer Zeit habe ich endlich wieder mal Zeit um Privat ein paar Dinge zu erledigen ^^ aber schon bald bin ich an meine grenzen gestoßen ... Nun brauche ich eure Hilfe.

Und zwar. ...

Ich bin nebenbei in einer Band unterwegs, für diese mache ich die Homepage. Letztens hatten wir Fotoshooting wo ein paar wirklich geile Bilder entstanden sind.... z.B. eins wo wir "nur" als silhouette zu sehen sind.... Da kam mir die Idee ...

Auf der Homepage das Header Foto zu animieren ... in dem Sinne das wenn man auf den Umriss der jeweiligen Person klickt, weitergeleitet wird auf die persönliche Biografie Seite.

Wie würdet ihr das machen und einem Newbie erklären ?

Danke

patrick_l · 15.09.2015

wasweisich schrieb:
Wie würdet ihr das machen und einem Newbie erklären ?

Mit "allem" aber sicher nicht mit Flash. Denn wenn es lediglich um die Darstellung von Video, Bilder und/oder Grafiken geht, hat Flash im heutigen Web nichts mehr verloren. Es gibt so oder so mehr Gründe, die gegen als für Flash sprechen.

Um jetzt deine eigentliche Frage zu beantworten. Für solche Spielereien ist eine SVG-Grafik am besten geeignet. Diese jedoch nicht als externe Datei, sondern über den SVG Tag im Markup einfügen. Danach können Pfade und Flächen wunderbar mit Hilfe von JavaScript (jQuery) und/oder CSS3 animiert werden.

wasweisich schrieb:
[...]und einem Newbie erklären ?

Wie schaut es bei dir bezüglich HTML, CSS(3) und JavaScript (jQuery) Kenntnis aus? Ist wenigstens rudimentäres Grundlagenwissen vorhanden? Ebenso solltest du zum Erstellen der SVG Grafik mit einem Vektorprogramm wie Illustrator, Draw, FreeHand oder Inkscape umgehen können.

Liebe Grüße, Patrick

Gelöschtes Mitglied 633957 · 15.09.2015

patrick_l schrieb:
Mit "allem" aber sicher nicht mit Flash.

Mit "allem"? Na, dann schafft es evtl. auch der html5maker. Ausprobiert habe ich ihn allerdings nicht.
Warum Flash mittlerweile (eigentlich schon seit Jahren) meist überflüssig ist, deutet sehr schön an!

patrick_l · 15.09.2015

tynick schrieb:
Mit "allem"? Na, dann schafft es evtl. auch der html5maker. Ausprobiert habe ich ihn allerdings nicht.

Genau genommen sprechen wir hier ja von einer "simplen" Navigation, bei der lediglich der Hover-Zustand animiert werden soll. Mit dem von dir verlinkten html5maker kann man so etwas vielleicht zusammenklicken. Trotzdem zu einer eingebetteten SVG Grafik mit xlink rate. Mit "allem" sollte lediglich betonnen, das für mich Flash überhaupt nicht in Frage kommt.

Liebe Grüße, Patrick

wasweisich · 16.09.2015

Moin Leute, super vielen Dank für die superschnelle Hilfe

Danke

wasweisich · 17.09.2015

So nun, habe ich mich ein wenig mit der Materie Beschäftigt aber da sind dann noch ein paar Fragen entstanden...

Wie kann ich ...

das Bild ist Schwarz (8 Personen) und je nach dem über welchen Körper man gleitet mit der Maus soll dieser "in Naturfarben leuchten" und bei Klick auf die Seite mit der Biografie verweisen.

Ist dies immernoch mit einer SVG Grafik möglich ?

Mit Illustrator Html und CSS kann ich arbeiten aber Javascript ...

Danke

Gelöschtes Mitglied 633957 · 18.09.2015

Xlink ist nicht so meins und ich wüsste auch nicht wie der Bildwechsel zu realisieren ist, aber

wasweisich schrieb:
Mit Illustrator Html und CSS kann ich arbeiten

Dir sollte folgende Idee gefallen:

Hier der Quellcode:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>CSS Sprites: Image Slicing's Kiss of Death</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">

#blobs {
width: 300px;
height: 150px;
background: url(blobs.gif);
margin: 10px auto; padding: 0;
position: relative;
}
#blobs li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}

#blobs a {display: block;}

#blob1 {left: 9px; top: 7px; width: 86px; height: 130px;}
#blob2 {left: 77px; top: 16px; width: 79px; height: 86px;}
#blob3 {left: 160px; top: 0px; width: 112px; height: 77px;}
#blob4 {left: 173px; top: 57px; width: 120px; height: 80px;}
#blob5 {left: 110px; top: 102px; width: 98px; height: 45px;}
#blob1 a {height: 130px;}
#blob2 a {height: 86px;}
#blob3 a {height: 77px;}
#blob4 a {height: 80px;}
#blob5 a {height: 45px;}

#blob1 a:hover {background: url(blobs.gif) -10px -307px no-repeat;}
#blob2 a:hover {background: url(blobs.gif) -77px -166px no-repeat;}
#blob3 a:hover {background: url(blobs.gif) -160px -300px no-repeat;}
#blob4 a:hover {background: url(blobs.gif) -173px -207px no-repeat;}
#blob5 a:hover {background: url(blobs.gif) -110px -402px no-repeat;}

</style>
</head>


<body>
<ul id="blobs">
  <li id="blob1"><a href="#"></a></li>
  <li id="blob2"><a href="#"></a></li>
  <li id="blob3"><a href="#"></a></li>
  <li id="blob4"><a href="#"></a></li>
  <li id="blob5"><a href="#"></a></li>
</ul>
</body>
</html>

Wenn meine Idee nichts für Dich ist, dann kann Dir @patrick_l sicher noch weitere Tipps geben.

Besten Gruß, Ty

patrick_l · 18.09.2015

wasweisich schrieb:
Ist dies immernoch mit einer SVG Grafik möglich ?

Auch das ist kein Problem. Innerhalb von SVG Grafiken sind auch Pixel-basierte Inhalte möglich. Dafür lediglich innerhalb des SVG Tags das Image-Element (Image-tag) verwenden und dessen Quellenverweis (href) mit xlink: ergänzen.

Code:

 <svg>    
  <image xlink:href="assets/img/image.jpg" x="0" y="0" /> 
</svg>

Hier zusätzlich der Link zum Mozilla Developer Network:

Was responsive Webdesign und das verlustfreie Skalieren der SVG Grafik angeht, solltest du berücksichtigen, das Rastergrafiken/bilder nicht verlustfrei skaliert werden können. Daher solltest du benötigen Bilder in passender Größe und im verlustfreien PNG Format einbinden. Mit passender Größe wäre die maximale Darstellung deines Headers gemeint. Die Bilder dann lediglich runter-skalieren. Ansonsten solltest du dir Lösung von @tynick nochmal anschauen.

Edit:
Da lediglich der Hover-Status mit einem Bild versehen werden soll, würde auch das zuweisen per CSS infrage kommen. Möglichkeiten sind also genug da.

Liebe Grüße, Patrick

wasweisich · 18.09.2015

@tynick : das iss ja ä träumche

Danke

Danke euch beiden !