Parallax-Beispiele, um die Objekt-Bewegung zu verstehen
0 = fixiert = gleiche Scrollgeschwindigkeit
1 = Bewegung
Man muss beim Anlegen von Parallax die Hintergrund-Grafiken weitgehend vergessen und sich am Browser und der Mausbewegung orientieren. Das ist das große „Umdenken“.
| 100 (zu 250)/ 0 – 0 – 0 – 0 | DIV fixiert bei 150 und schwebt unbewegt. Hier ist also nur ein 150 Px-Abstand nach oben festgelegt | |||
| 0 / 0 – 0 – 0 – 0 | DIV fixiert auf 250 und schwebt unbewegt | |||
| 100 (zu 250) / 1 runter – 0 – 1 runter – 0 | wenn Browser bei 100, dann schiebt er sich auf Pos 250, wie im Entwurf gezeigt. Dann schiebt er sich nach unten raus. | |||
| 100 (zu 250) / 1 runter – 0 – 0 – 0 |
| |||
| 100 (zu 250) / 1 runter – 0 – 0,5 hoch – 0 | Balken ingendwo oben sichtbar. Wenn bei 100, dann rutscht er auf 250 und bewegt sich dann langsam hoch | |||
| 240 (zu 250) / 10 runter – 0 – 0 – 0 | Der Balken ist zuerst nicht sichtbar. Bei 240 ist er plötzlich da und bleibt 10 Px von oben fest kleben. Kurzer Weg von 240 auf 250 und schnelle Mausbewegung – also schnelles Einblenden | |||
| 240 (zu 250) / 10 runter – 0 – 0 – 1 | Der Balken ist zuerst nicht sichtbar. Bei 240 ist er plötzlich da und wandert dann mit der Maus nach unten. | |||
Keyposition in Parallax mit Adobe Muse
[youtube_sc url=“http://www.youtube.com/watch?v=5OOLEztI-so“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
[youtube_sc url=“http://www.youtube.com/watch?v=3wD72dFDq9Q“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
[youtube_sc url=“http://www.youtube.com/watch?v=L02BfHdNLFo“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Byrdie Template
[youtube_sc url=“http://www.youtube.com/watch?v=uyyAA43fLFg“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Nightlight Template
[youtube_sc url=“http://www.youtube.com/watch?v=KJMi5l9Ru-g“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Hintergrundbilder, die überscrollt werden:
Rechteck aufziehen 100% breit, Fill mit Foto, Fill mit Scroll 0 / 0 / 0 / 0 versehen. Somit wird das ganze Foto in den Hintergrund gelegt, festgenagelt und die durchsichtige Rechteck-Maske fährt drüber und macht Ausschnitte des Fotos sichtbar.
Wechselnde Überschrift zu scrollendem Text
[youtube_sc url=“http://www.youtube.com/watch?v=wAHbJa-AvIA“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Langsam bewegender Browser-Hintergrund
[youtube_sc url=“http://www.youtube.com/watch?v=pXS1rLhcLvw“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Browserfill – Bild auswählen. Mit Scroll-Effekt versehen – nach oben < 1
(wenn Scroll = 0, dann bleibt das Bild stehen und der Text wischt drüber)
Muse 7.0: Dynamisch wechselnder Hintergrund
[youtube_sc url=“http://www.youtube.com/watch?v=N0A0bdjpMrI#t=1″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Horizonal scrollende Website
[youtube_sc url=“http://www.youtube.com/watch?v=diUtfwFGI1w“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Background Image
[youtube_sc url=“http://www.youtube.com/watch?v=FnhG27NsfGE“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
[youtube_sc url=“http://www.youtube.com/watch?v=g7Vpdg-q6IQ“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Muse 7.0: 100% Parallax Scrolling Image Fill
[youtube_sc url=“http://www.youtube.com/watch?v=FEiRwVMNBgU#t=12″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Vertikale Navigation
[youtube_sc url=“https://www.youtube.com/watch?v=dbLp_q9qwG8″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Muse 7.0: Der Opacity Scroll Effekt
[youtube_sc url=“http://www.youtube.com/watch?v=Cd0nzflGNc4#t=10″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Opening Door
[youtube_sc url=“http://www.youtube.com/watch?v=9kqrjoivJXE“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Muse 7.o: Auto Fading Design Elemente
[youtube_sc url=“http://www.youtube.com/watch?v=pi6LStQB854″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Muse 7.0: Smooth Fading Rollovers
[youtube_sc url=“http://www.youtube.com/watch?v=qoC2FKdoVIg“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Bewegende und dann angepinnte Navigation
[youtube_sc url=“http://www.youtube.com/watch?v=eQo_k9WiLms“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Navi in einen „hohen“ Layer legen, damit immer sichtbar.
Navi mit Scroll versehen: 1 nach oben / 0 / 0 / 0
Die Keypositon muss am oberen Rand der Navi sein.
[youtube_sc url=“http://www.youtube.com/watch?v=cYYDXAjnG4o“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Ankermenü: Aktive Hyperlinks bei Navigation über Ankerpunkte
[youtube_sc url=“http://www.youtube.com/watch?v=qNsI6DHz5Co“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Menü einfügen.
Wichtig: TYP = manuell
Hyperlinks-Linkstyle in den Seiteneigenschaften (Inhalt): Linkformate bearbeiten – „Aktiven Status für Ankerlinke aktivieren“ ankreuzen
Eigenes Menü erstellen – OnePage-Design
[youtube_sc url=“http://youtu.be/opLo4krsjnM“ theme=“light“ modestbranding=“1″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″ hd=“1″]
Fade away Banner Image
[youtube_sc url=“http://www.youtube.com/watch?v=caVozfngfCM“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Gradient mit Speed 7 nach oben scrollen lassen, dann 0 / 0. Key Position etwa in der Mitte des Banner-Fotos. Der Gradient muß sehr lang nach unten sein, damit er alles überdeckt, was noch kommt.
Man kann die Box mit dem Banner-Foto auch noch mit 0,5 nach oben (anschließend 0/0) versehen), damit es sich ein wenig bewegt 😉
Photobox Effekt Gimmick
[youtube_sc url=“http://www.youtube.com/watch?v=dfEfyA6BMPc“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Hero Slider
[youtube_sc url=“http://www.youtube.com/watch?v=-ZWIU_1fNOQ“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Bildershow übereinander slidende Image Masks
[youtube_sc url=“http://www.youtube.com/watch?v=8m2Lg241e3A“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Boxen erstellen und mit Fotos füllen. Im Füllen-Dialog auf SCROLL gehen und auswählen 0 / 0 / 0 / 0.
Bildershow übereinander slidende Bilder-Panels
[youtube_sc url=“http://www.youtube.com/watch?v=8LR6Axwo1ao“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Bilder auf einer Seite untereinander platzieren.
alle Bilder auswählen und dieselben Scroll-Werte geben: 1 nach oben / 0 / 0 / 0
Die Keypositions müssen immer so gewählt sein, dass das untere Bild am oberen anschließt. Dazu muß die Keyposition jedes einzelnen Fotos angepasst werden.
Thumbnail Slideshow
[youtube_sc url=“http://www.youtube.com/watch?v=ufirlrzdtyA“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
[youtube_sc url=“http://www.youtube.com/watch?v=5XIkXpW1GUg“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
100% Slideshow Trick
[youtube_sc url=“https://www.youtube.com/watch?v=xZ7HP0RN0os“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Slideshow mit eingebettetem Video
[youtube_sc url=“http://www.youtube.com/watch?v=5in4swnIFsw“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Scroll activated Video
[youtube_sc url=“http://www.youtube.com/watch?v=rYwxyZuL-04″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Before and After Slider – Vorher-Nachher Widget
[youtube_sc url=“https://www.youtube.com/watch?v=p3hpvfgF6qA&html5=1″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Fliegender Text als WELCOME-Seite
[youtube_sc url=“http://www.youtube.com/watch?v=CcX6p_a9jUc“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Das Welcome mit Link auf einen Anker versehen.
Der Anker sollte nach der Keyposition des Begrüßungstextes hindeuten.
Keypositionen des Textes alle gleich (hier im Beispiel auf 615). WICHTIG: Motion after Key: alles auf 0 setzten. Die Bewegung sollte vor der Keypostion stattfinden.
Foto überscrollen mit Foto-Sketch-Balken
[youtube_sc url=“https://www.youtube.com/watch?v=2xAgbDbraGw“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Konfigurator
[youtube_sc url=“http://www.youtube.com/watch?v=5e6QPcw9iJU“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Eigene Schriften hinzufügen
[youtube_sc url=“https://www.youtube.com/watch?v=RGv-KuqVKJ0″ theme=“light“ modestbranding=“1″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″ hd=“1″]
Nike Text Effekt
[youtube_sc url=“http://www.youtube.com/watch?v=p82-uR95X0o“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Textstücke positionieren.
Mit Scroll-Effekt nach oben versehen. Keyposition ist 0!!!! Motion Key Before und After gleich setzen.
Tesla Timeline Effekt
[youtube_sc url=“http://www.youtube.com/watch?v=ySTroxpp6iw“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Grafik mit transparenter Timeline erstellen. Farbiges Rechteck versteckt hinter die Grafik klemmen und oben zentriert festpinnen / fixieren.
Muse 7.0: Der neue „State Button“
[youtube_sc url=“http://www.youtube.com/watch?v=wyzvtawrI8M#t=0″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Muse 7.0: Die neue Bibliothek
[youtube_sc url=“http://www.youtube.com/watch?v=GViWTWuAdms#t=2″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
SEO in Muse
Fotos bzw. Grafiken sollten mit Alternativtext versehen werden. Dazu in „Elemente“ einen Rechtsklick auf die Datei machen > „Bildeigenschaften bearbeiten“
In den Seiteneingenschaften von der Master-Seite kann man Präfix und Suffix für den Seitennamen anlegen oder einen allgemeinen HTML-Header-Code (z. B. Google Anayltics) hinterlegen. In den Seiteneigenschaften der Site legt man Metadaten (Beschreibung, Keywords und HTML für Head z. B. WOW-Slider) und in den Optionen legt man Seitennamen, Titel, Dateiname und Menüoption fest.
Image Effekte
[youtube_sc url=“http://www.youtube.com/watch?v=RwDAkYj314Y“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Flyout Accordion
[youtube_sc url=“http://www.youtube.com/watch?v=aDvdleC83o0″ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Seitenformatierung
[youtube_sc url=“http://www.youtube.com/watch?v=frAM_peJA0Q“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Google Maps auf Seitenbreite
[youtube_sc url=“https://www.youtube.com/watch?v=WyZmv_ram8c“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]
Onlineshop in Muse einbetten
[youtube_sc url=“http://www.youtube.com/watch?v=-9ei6GT6Ngc“ autohide=“1″ fs=“1″ iv_load_policy=“3″ rel=“0″ showinfo=“0″]