Efectele pălării în timp ce defilare site

Ați văzut deja, probabil, efecte similare, atunci când site-ul capacul răspunde la modul în care se derulează pagina. De exemplu, este posibil să se uite la efectul aplicat Phil Renaudom pe site-ul Riot Industries. în cazul în care, atunci când faceți clic pe capacul este rotit într-un plan tridimensional, și în timp ce defilare crește. Un efect similar este realizat Dzhonni Simpson in articol. dedicat animație, aplicat pe un site capac fix, care sunt activate atunci când pagina este defilat. Am creat, de asemenea, un plan pentru o mică animație, atunci când defilare antetul site-ului, astfel încât să puteți înțelege mai bine ceea ce este în discuție aici.

Astăzi vrem să vă dau de inspirație pentru a crea pălării animate, astfel încât să puteți vedea ce efecte le puteți utiliza pentru a actualiza site-ul.

Vă rugăm să rețineți: aceste efecte vor funcționa numai în browsere care au suport pentru CSS-proprietăți relevante! Numai în browsere moderne!

pagina demo cu efecte este doar pentru inspirație, și am folosit tehnica, care implică schimbări în starea de clase (state) antetul site-ului, care, desigur, puteți modifica la libera sa alegere, în funcție de ce fel de efect de care aveți nevoie. Este important să se înțeleagă că statul depind unul de altul, adică o schimbare de clasă A la clasa B poate fi adecvată (folosind tranziții), iar trecerea de la A la clasa B nu poate da rezultatul dorit. Deci, ordinea efectelor prezentat în numărul de pagini.

De asemenea, trebuie avut în vedere faptul că derularea prea repede poate provoca sari nedorite, a însemnat trecerea de mai sus de la clasa A la clasa B.

În demo am folosit un mare Waypoints jQuery-plugin Caleb Troughton.

Capac Site-ul este format din mai multe părți pentru a afișa toate efectele. Există un înveliș cu vedere - pentru partea din față și din spate (care este utilizat pentru rotație tridimensională):

Am adăugat un secțiuni speciale de clasă, care ne permite să ruleze clase modificări:

atributele de date sunt utilizate pentru a stabili clasele necesare, în funcție de defilare se face în ce direcție. În atributul nostru de date demo-up animate conține clasa pentru atributul anterior datele animă-jos.

„Alternare“ poate fi identificat ca fiind un exemplu al stării clasei:

clasele de stare sunt aplicate capacele elementelor, și numai atunci putem defini unele modificări pentru copii.

Când Waypoints plugin asistență, vom adăuga pur și simplu clasele corespunzătoare:

Sperăm că va plăcut aceste efecte, și sunt inspirate pentru a crea propriile lor proiecte, folosind banner animat.

View Demo | Descărcați codul sursă