Parallax Preload  |   Tutorial  |   Original  |   Mobile Seite  |   Themen 

NOF-Tutorials.com

Thomas Frei-Herrmann

Parallax Effekt

nach einer Idee von NetObjects Fusion (NOF) - mit jQuery Preloader - Preloader Tutorial
Seite neu laden

Auf dieser Seite ist noch eine jQuery Preload-Funktion eingebaut, die diese Seite vollständig lädt, bevor sie angezeigt wird. Die minimale Anzeige der Animation dieser Funktion habe ich auf 400 Millisekunden gestellt.
Mit diesem Effekt kann man über eine Class unterschiedlichen Layoutbereichen verschiedene Effekte zuordnen. Hier im Wechsel farbliche Layoutbereiche und Layoutbereiche mit Fotos, die jeweils über ein Skript die volle Bildschirmgröße erhalten.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tortor nisi, porttitor in odio ut, tincidunt dictum tortor. Morbi dapibus eu est tempus laoreet. Etiam interdum at lacus sed convallis. Etiam ut congue augue. Vivamus mollis tempor posuere. Integer eget lacus maximus, convallis turpis ac, finibus enim. Cras justo massa, convallis consectetur congue eu, lobortis a magna. Suspendisse cursus tortor lectus.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tortor nisi, porttitor in odio ut, tincidunt dictum tortor. Morbi dapibus eu est tempus laoreet. Etiam interdum at lacus sed convallis. Etiam ut congue augue. Vivamus mollis tempor posuere. Integer eget lacus maximus, convallis turpis ac, finibus enim. Cras justo massa, convallis consectetur congue eu, lobortis a magna. Suspendisse cursus tortor lectus.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tortor nisi, porttitor in odio ut, tincidunt dictum tortor. Morbi dapibus eu est tempus laoreet. Etiam interdum at lacus sed convallis. Etiam ut congue augue. Vivamus mollis tempor posuere. Integer eget lacus maximus, convallis turpis ac, finibus enim. Cras justo massa, convallis consectetur congue eu, lobortis a magna. Suspendisse cursus tortor lectus.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tortor nisi, porttitor in odio ut, tincidunt dictum tortor. Morbi dapibus eu est tempus laoreet. Etiam interdum at lacus sed convallis. Etiam ut congue augue. Vivamus mollis tempor posuere. Integer eget lacus maximus, convallis turpis ac, finibus enim. Cras justo massa, convallis consectetur congue eu, lobortis a magna. Suspendisse cursus tortor lectus.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tortor nisi, porttitor in odio ut, tincidunt dictum tortor. Morbi dapibus eu est tempus laoreet. Etiam interdum at lacus sed convallis. Etiam ut congue augue. Vivamus mollis tempor posuere. Integer eget lacus maximus, convallis turpis ac, finibus enim. Cras justo massa, convallis consectetur congue eu, lobortis a magna. Suspendisse cursus tortor lectus.

Fotos von unsplash.com

Tutorials von Thomas Frei-Herrmann

Counter Statistik