Ora su molti siti puoi trovare tale animazione e di seguito mostrerò anche un esempio. Personalmente, utilizzo questa animazione durante la creazione di pagine di destinazione (pagine di destinazione). Molti webmaster lo usano attivamente sui loro siti e questa animazione sembra piuttosto carina durante lo scorrimento.

Per fare questo sul tuo sito, devi lavorare un po'. Se capisci almeno un po', allora non c'è niente di complicato. Dividiamo tutte le nostre azioni in passaggi per non confonderci.

Passo 1

Come sempre, affinché la libreria funzioni jQuery, è necessario in un tappo prima della chiusura testa o nel seminterrato prima della chiusura corpo collegare la libreria.

Passo 2

Oppure crea un file come - scriptviewport.js e collegalo.

All'interno dei tag o del file, aggiungi il seguente codice:

Function(a)(a.fn.viewportChecker=function(b)(var c=(classToAdd:"visible",classToRemove:"invisible",offset:100,repeat:!1,invertBottomOffset:!0,callbackFunction:function( a,b)(),scrollOrizzontale:!1);a.extend(c,b);var d=this,e=(altezza:a(finestra).altezza(),larghezza:a(finestra).larghezza( )),f=-1!=navigator.userAgent.toLowerCase().indexOf("webkit")?"body":"html";return this.checkElements=function()(var b,g;c.scrollHorizontal? (b=a(f).scrollLeft(),g=b+e.width):(b=a(f).scrollTop(),g=b+e.height),d.each(function()( var d=a(questo),f=(),h=();if(d.data("vp-add-class")&&(h.classToAdd=d.data("vp-add-class") ),d.data("vp-remove-class")&&(h.classToRemove=d.data("vp-remove-class")),d.data("vp-offset")&&(h.offset= d.data("vp-offset")),d.data("vp-repeat")&&(h.repeat=d.data("vp-repeat")),d.data("vp-scrollHorizontal") &&(h.scrollHorizontal=d.data("vp-scrollHorizontal")),d.data("vp-invertBottomOffset")&&(h.scrollHorizontal=d.data("vp-invertBottomOffset")),a.extend( f,c),a.extend(f,h),!d.hasClass(f.classToAdd)||f.repeat)(Stringa (f.offset).indexOf("%")>0&&(f.offset=parseInt(f.offset)/100*e.height);var i=f.scrollHorizontal?Math.round(d.offset(). sinistra)+f.offset:Math.round(d.offset().top)+f.offset,j=f.scrollHorizontal?i+d.width():i+d.height();f.invertBottomOffset&&( j-=2*f.offset),g>i&&j>b?(d.removeClass(f.classToRemove),d.addClass(f.classToAdd),f.callbackFunction(d,"add")):d.hasClass (f.classToAdd)&&f.repeat&&(d.removeClass(f.classToAdd),f.callbackFunction(d,"remove")))))),a(document).bind("touchmove MSPointerMove pointermove",this.checkElements ),a(window).bind("load scroll touchmove",this.checkElements),a(window).resize(function(b)(e=(height:a(window).height(),width:a( window).width()),d.checkElements())),this.checkElements(),this))(jQuery);

Il codice è compresso in un'unica riga per un caricamento rapido da parte del browser ed è lungo, quindi fai attenzione quando copi e assicurati di copiarlo nella sua interezza.

Passaggio 3

Dopo aver collegato lo script di ritardo, colleghiamo un altro piccolo script che imposta le impostazioni:

La terza riga contiene la classe tra parentesi - elementano. Questa classe dovrà essere assegnata a tutti i blocchi e gli elementi a cui vuoi assegnare l'animazione. La quarta riga specifica la classe - diapositiva a destra. Questa è la lezione di animazione. Per impostare l'animazione desiderata e la classe desiderata, l'ultimo articolo, che ho menzionato all'inizio, ti aiuterà. Nel nostro caso, questa sarà l'uscita a destra.

Se desideri implementare diversi tipi di animazione per gli elementi della pagina, il codice deve essere duplicato solo modificando la classe nella terza riga e la classe di animazione. Per esempio:

Passaggio 4

Come accennato nel passaggio precedente, è necessario impostare la classe sugli elementi elementano. A Marcatura HTML sarà così:

Se hai già assegnato una classe all'elemento, aggiungi semplicemente uno spazio, ad esempio:

Passaggio 5

E l'ultima cosa da fare è impostare gli stili CSS. Scriviamo prima gli stili di animazione. Li prendiamo dall'articolo precedente, già menzionato in questo articolo. Prendo l'animazione - esci a destra.

/*Animazione a destra*/ .slideRight( nome-animazione: slideRight; -nome-animazione-webkit: slideRight; durata-animazione: 4s; -durata-animazione-webkit: 4s; funzione di temporizzazione-animazione: facilità-in -out ; -webkit-animazione-timing-function: facilità-in-uscita; visibilità: visibile !importante; ) @keyframes slideRight ( 0% ( transform: translateX(-150%); ) 100% ( transform: translateX(0 % ; ) ) @-webkit-keyframes slideRight ( 0% ( -webkit-transform: translateX(-150%); ) 100% ( -webkit-transform: translateX(0%); ) )

Come puoi vedere, gli stili di animazione hanno la classe slideRight, quindi questa classe è scritta nello script nel passaggio #3. C'è anche un significato 4sè il tempo di animazione ed è pari a 4 secondi. Ora aggiungiamo gli stili per rendere inizialmente invisibile l'elemento.

Nascosto(opacità:0;) .visibile(opacità:1;)

Il difficile percorso in cinque passaggi è stato superato, quindi puoi guardare il risultato del tuo lavoro. Puoi confonderti, ma se fai tutto con attenzione, tutto funzionerà. Il codice nell'articolo è da un esempio, quindi tutto funziona. Prova ad applicare tipi diversi animazione per ottenere il risultato desiderato.

Questo è tutto, grazie per l'attenzione. 🙂

Ciao cari amici! Ho preparato a lungo il materiale per l'articolo di oggi e ho cercato di presentarlo nel modo più dettagliato possibile. Spero che dopo aver letto non avrai più domande su come è fatto CSS.

Voglio avvertirti subito: non scriveremo noi stessi script o cose del genere (dopotutto, il blog è progettato per i principianti e abbiamo bisogno che sia facile da collegare e che funzioni in modo impeccabile).

Per funzionare, abbiamo bisogno di scaricare diversi strumenti.

Dimensione: 0,48 Mb

Scarica sorgente

Prima di tutto, questo è il file animate.css, una libreria che contiene gli stili per animare gli elementi della pagina. Per valutare visivamente e selezionare il tipo di animazione, di solito utilizzo la pagina delle risorse http://daneden.github.io/animate.css/

Cioè, il processo di aggiunta dell'animazione a un elemento inizia con il fatto che vado su questa risorsa e seleziono lo stile di animazione dalle opzioni proposte. (Fortunatamente ci sono molte tra cui scegliere)

Successivamente, è necessario includere un foglio di stile. Per fare ciò, copia il file animate.css nella cartella del foglio di stile del tuo sito. Ho - questa cartella si chiama "css". E nel file “index.html”, tra i tag head, scriviamo:

Ora dobbiamo assegnare una classe all'elemento che vogliamo animare con il nome appropriato che è stato scelto nel passaggio precedente. Cioè, lo stile bounceInRight mostrato nello screenshot sopra sarà la classe per l'elemento che animeremo. Oltre alla classe animata, affinché l'animazione possa essere riprodotta. Spero di essermi spiegato chiaramente? In caso contrario, l'esempio seguente è estremamente semplice!

Per esempio:

Ora, quando la pagina viene aggiornata, l'animazione verrà riprodotta. Puoi provare a premere il tasto f5.

Veramente cool? Ma questa non è la fine del processo di creazione dell'animazione, perché dobbiamo assicurarci che l'animazione venga riprodotta quando si scorre la pagina e non subito dopo il caricamento!

Per fare ciò, dovremo utilizzare lo script wow.js già pronto. Deve essere posizionato nella cartella js della directory principale del tuo sito. Ho postato solo una versione compressa, perché pesa meno e si carica più velocemente. Puoi familiarizzare completamente con il progetto.

Quindi, affinché l'animazione degli elementi avvenga durante lo scorrimento della pagina, è necessario aggiungere le seguenti 2 righe tra i tag head nel file index.html:

E inoltre, alla classe bounceInRight, invece di animata, devi aggiungere wow. Dovresti ottenere quanto segue:

Come puoi vedere, la prima animazione viene riprodotta immediatamente dopo il caricamento della pagina e la seconda, solo durante lo scorrimento, quando l'utente la vede. Mentre il primo non verrà notato se non si trova nella prima schermata.
Possiamo concludere che il processo di creazione di tale animazione può essere ridotto a 5 minuti del tempo speso. Tutto quello che devi fare è:

• Aggiungi 3 righe di codice tra i tag head di apertura e chiusura.
• Copia i file animate.css e wow.min.js nelle cartelle appropriate.
• Aggiungi la classe wow e una classe con il nome dell'animazione all'elemento con cui vogliamo animare

E il gioco è fatto, il tuo sito apparirà molto più vivace e spettacolare. E in caso di vendita - più costoso.

Ma ci sono ulteriori strumenti di controllo dell'animazione. Per ogni elemento, puoi impostare diversi attributi speciali per una personalizzazione più precisa:

• data-wow-offset: Distanza dal bordo inferiore del browser per avviare l'animazione;
• data-wow-durata: Cambia la durata dell'animazione;
• data-wow-delay: Ritardo prima dell'inizio dell'animazione;
• iterazione-wow-dati: Quante volte ripetere l'animazione?

Ad esempio in questo modo:

Per oggi è tutto, ci vediamo allo smartlanding. Lascia i tuoi commenti e fai domande! Ciao!

PS: Se vuoi riprodurre l'animazione durante lo scorrimento in entrambe le direzioni, ti consiglio di leggere

Molti hanno già visto animazioni sui siti durante lo scorrimento della pagina. Ma i siti di questa raccolta sono leggermente diversi da quelli che si trovano solitamente in Runet. Qui l'animazione dipende direttamente dalla pergamena. Durante la navigazione in questi siti, prova a scorrere la pagina lentamente verso il basso e poi lentamente verso l'alto.

Ho già scritto di landing page interattive in precedenza. Assicurati di dare un'occhiata a questa raccolta:

Qualche parola su come l'animazione durante lo scorrimento dei siti in questa raccolta differisce dall'animazione che si trova più spesso su Runet:

Di solito, quando si scorre la pagina, l'elemento appare nella sua interezza. Ad esempio, una tale animazione può essere eseguita utilizzando il plug-in Wow.js. Ci sono anche analoghi in cui l'elemento appare ogni volta che scompare dallo schermo che l'utente vede.

Ed ecco alcuni esempi di siti in cui l'animazione degli elementi dipende direttamente dallo scorrimento dello schermo. Cioè, l'elemento appare esattamente fino a quando la persona ha fatto scorrere lo schermo. I valori vengono interpolati.

Grazie a ciò, l'utente stesso controlla il processo di comparsa degli elementi sulla pagina. L'animazione di scorrimento in questo caso ha un significato diverso.

Qui puoi trovare immediatamente sia gli svantaggi che i vantaggi di questa animazione. Dopotutto, non vuoi sempre che una persona controlli l'aspetto degli elementi, perché non tutti penseranno di girare alla giusta velocità. E per evitare ciò, è meglio non fare l'animazione durante lo scorrimento della funzionalità principale.

Un po 'più tardi cercherò di spiegare più in dettaglio il processo di creazione di tale animazione, ma per ora, dai un'occhiata a questi siti e scorri fino alla fine di ciascuno di essi.

1 Appliancetecltd.com

L'animazione su questo sito è la base. Perché i blocchi compaiono solo quando scorriamo la pagina. Se scorriamo un po' la pagina verso l'alto, l'animazione va nella direzione opposta.

In questo sito, oltre all'animazione a blocchi, viene utilizzata anche l'animazione sfocata, che rende il sito ancora più attraente. Senza sapere come funziona l'animazione, potresti pensare che il sito sia molto ampio. Ma in effetti, le librerie di animazioni ti consentono di fare molte cose automaticamente.

Rispetto ai siti che vedrai di seguito, questo è piuttosto piccolo, ma l'animazione dei blocchi sembra davvero impressionante.

2. Lempens-design.com

Qui vediamo immediatamente animazioni di elementi molto più diverse: i blocchi si allontanano, i pulsanti girano, un treno passa e così via. Viene visualizzata un'animazione insolita anche quando si passa il mouse sopra alcuni pulsanti.

Ma soprattutto su questo sito colpiscono le immagini che si trovano alla fine del blocco. Anche se sono completamente bianchi, ma per la bellezza immagine di sfondo completano perfettamente il blocco.

3. Pedrolandaverde.com

Quello che mi piace di questo sito è che l'animazione qui è elemento aggiuntivo, non quello principale. Cioè, non interferisce con lo scorrimento della pagina. L'animazione qui completa e "ravviva" la pagina, rendendola più dinamica.

Come avrai già notato (se hai visitato questo sito), oltre agli ingranaggi che girano, qui ci sono molte altre immagini animate. Ma non ce ne sono molti. E questa animazione è davvero bella e interessante. Ti consiglio di adottare questo concetto.

4. InfoQuest

L'idea alla base di questo esempio è molto interessante. Scorrendo gradualmente la pagina, sembri sfogliare un fumetto. Cioè, ci sono dialoghi, azione e bella grafica. È un tale piacere da guardare. E tutto ciò che devi fare è semplicemente scorrere la pagina gradualmente verso il basso.

L'idea è interessante, su piccola scala puoi implementarla su una pagina di destinazione. L'importante è renderlo davvero tematico per la pagina di destinazione.

5 Sostenibilità.bam.co.uk

Un altro esempio di pagina con animazione di scorrimento, in cui l'animazione non interferisce con la visualizzazione della pagina e non dipende da essa. Cioè, completa il quadro generale qui.

Questo modo di creare un'animazione è molto più semplice ed è più facile trovare l'idea per un'animazione del genere.

6. Makeyourmoneymatter.org

Non sorprenderai nessuno con le infografiche sul sito. Anche quelle infografiche che occupano l'intero spazio della pagina. Ma questo sito è un ottimo esempio di animazione infografica durante lo scorrimento della pagina. D'accordo, questa infografica sembra davvero fantastica!

Se ti piacciono queste animazioni e infografiche, devi prima creare un'infografica. Puoi farlo utilizzando uno di questi servizi:

7. Buon Natale

Simpatica animazione, durante la quale si trasforma in un albero di Natale disegnato a mano albero di Natale. Qui vengono tracciati perfettamente i singoli blocchi, che si animano durante lo scorrimento della pagina. Fatto magnificamente e puoi "prendere a bordo" alcune idee.

8 Fluger.com

Un'idea creativa con un aereo che vola in due direzioni: se scorri la pagina, l'aereo vola in basso e talvolta a destra, e se scorri nella direzione opposta, l'aereo inverte la direzione. Questa piccola sfumatura rende davvero questa pagina ancora più interattiva.

9. Caffè

Vuoi sapere come si fa il caffè? Quindi scorri questo atterraggio fino alla fine. Anche senza conoscere l'inglese, puoi capire cosa in questione su questa pagina. Tutte le immagini sono così colorate e ben eseguite che sembra di guardare un video. Ma solo questo è un "video" con un vantaggio... Ne hai il pieno controllo 😉 .

10. Kaipoche

La pagina stessa non è molto grande, ma l'animazione nella parte superiore sembra fantastica. Ci sono anche molti elementi creati con le animazioni CSS3. Per chi non sapesse ancora come si crea, vi consiglio di studiare questo articolo:

11. Buntspenden

Dopo aver visto un largo numero siti con animazione, è improbabile che questo ti sorprenda con qualcosa. Ma c'è un elemento qui che non è sui siti precedenti. Questo elemento è un menu. Cioè, quando si fa clic sulle voci di menu, si apre il blocco corrispondente.

12. KIA

Anche l'animazione sul sito Web KIA è ben realizzata, ma il caricamento del sito richiede molto tempo. E se Internet è debole, il tempo di download può raggiungere fino a 2-3 minuti. È improbabile che gli utenti aspettino così a lungo, molto probabilmente chiuderanno la pagina con questo sito.

13. Devastazione dei pericoli

Rispetto all'esempio precedente, questo sito si carica molto più velocemente, ma qui l'animazione non è così grande.

14. Fino all'ultima goccia

Un sito web interattivo con elementi animati che mostra la quantità di acqua che utilizziamo quotidianamente. Anche se non sai cosa è scritto in inglese, dalle immagini è intuitivamente chiaro cosa è cosa.

15. Arnold Clark

Questo è uno di quei siti in cui ci sono così tante animazioni di scorrimento che anche le dita si stancano quando si scorre la pagina. Inoltre, l'animazione a volte appare molto lentamente. Pertanto, per vedere l'animazione completa dell'elemento, devi girare molto la rotellina del mouse.

Internet cambia ogni giorno. Appaiono alcune tecnologie e metodi, altri scompaiono. Per questo motivo, i web designer e gli sviluppatori front-end devono rimanere aggiornati sulle ultime tendenze del web design. Scorrimento parallasse, intestazioni fisse, design piatto, siti a pagina singola e animazioni CSS sono alcune delle tendenze web più calde del momento.

In questo tutorial, esamineremo la creazione di animazioni ed effetti di scorrimento della pagina utilizzando CSS e jQuery.

I quattro effetti che creeremo possono essere visti in questa pagina.

Nota: il codice utilizzato in questo tutorial potrebbe essere migliorato memorizzando nella cache gli oggetti e utilizzando le animazioni CSS invece di jQuery " animare()", ma per semplicità, ci concentreremo prima sull'idea.

Cosa sono le animazioni e gli effetti di scorrimento della pagina?

Queste animazioni ed effetti sono una tecnica nuova e in crescita che offre agli sviluppatori front-end la possibilità di creare progetti web multimediali e interattivi. Mentre l'utente scorre la pagina, gli sviluppatori possono facilmente manipolare gli oggetti con CSS e jQuery.

Per rilevare se l'utente sta scorrendo la pagina, utilizziamo l'evento jQuery scroll().

Dopo aver saputo che l'utente sta scorrendo la pagina, possiamo ottenere la posizione verticale della barra di scorrimento utilizzando il metodo scrollTop() e applicare gli effetti desiderati:

if ($(questo ) .scrollTop () > 0 ) (
// crea effetti e animazioni
}
} ) ;

Sono adattivi?

Se siamo interessati a creare effetti reattivi (ottimizzati per diverse risoluzioni dello schermo), allora dobbiamo definire le seguenti proprietà:

• Proprietà larghezza- larghezza della finestra del browser.
• Proprietà altezza- l'altezza della finestra del browser.

Senza definire queste proprietà, creeremo effetti "statici" e non funzioneranno correttamente se l'utente ridimensiona la finestra orizzontalmente o verticalmente.

Possiamo facilmente ottenere i valori di queste proprietà usando i metodi width() e height().

Il seguente frammento di codice mostra tutti i controlli necessari che dobbiamo prendere in considerazione per creare effetti di scorrimento della pagina.

$(finestra).scroll(funzione()(
se ($(questo ).larghezza()< 992 ) {
se ($(questo ).altezza()<= 768 ) {
se ($(questo ).scrollTop()< 500 ) {
// crea effetti
}
if ($(questo ) .scrollTop() > 1000 ) (
// crea effetti
}
}
}
} ) ;

Ora che abbiamo coperto le basi della creazione di questi effetti, vediamoli in azione con quattro diversi esempi.

Esempio 1

Questo effetto viene attivato quando la posizione superiore della barra di scorrimento della finestra supera i 60 pixel. In questo caso, viene eseguito il seguente frammento di codice:

se ($(finestra).scrollTop() > 60 ) (
$(".banner h2" ) .css ("visualizzazione", "nessuno" ) ;
$(".banner .info" ) .css ("visualizzazione", "blocco" );
) altro (
$(".banner h2" ) .css ("visualizzazione", "blocco" ) ;
$(".banner .info" ) .css ("visualizzazione", "nessuno" );
}

Il codice sopra nasconde l'elemento figlio h2 all'interno di un elemento con una classe .banner e mostra il suo elemento figlio .Informazioni, che originariamente era nascosto.

Questo codice può anche essere scritto in questo modo:

se ($(finestra).scrollTop() > 60 ) (
$(".banner h2" ) .hide() ;
$(".banner.info" ) .show() ;
) altro (
$(".banner h2" ) .show() ;
$(".banner.info" ) .hide() ;
}

Esempio #2

L'effetto successivo dipende non solo dalla posizione in alto della barra di scorrimento del browser, ma anche dalla larghezza della finestra. In particolare, facciamo le seguenti ipotesi:

1. La larghezza della finestra è minore o uguale a 549px. In questo caso, l'animazione si attiva solo quando la posizione superiore della barra di scorrimento della finestra supera i 600 pixel.
2. La larghezza della finestra ha un valore compreso tra 550px e 991px. In questo caso, l'animazione si attiva solo quando la posizione superiore della barra di scorrimento della finestra supera i 480 pixel.
3. La larghezza del browser è maggiore di 991px. In questo caso, l'animazione si attiva solo quando la posizione superiore della barra di scorrimento della finestra supera i 450 pixel.

Le ipotesi di cui sopra sono implementate nel seguente frammento di codice:

se ($(finestra).larghezza()<= 549 ) {
se ($(finestra).scrollTop() > 600 ) (

firstAnimation();
}
) altrimenti se ($(finestra).width() ><= 991 ) {
se ($(finestra).scrollTop() > 480 ) (
// animazione da eseguire
firstAnimation();
}
) altro (
se ($(finestra).scrollTop() > 450 ) (
// animazione da eseguire
firstAnimation();
}
}

Il codice che contiene l'animazione da eseguire è il seguente:

var firstAnimation = funzione()(
$(".clients.clients-info" ) .each (
funzione()(
$(questo) .delay (500 ) .animate ((
opacità: 1
altezza: "180" ,
larghezza: "250"
} , 2000 ) ;
}
) ;
} ;

Il codice sopra anima le proprietà di opacità, altezza e larghezza per un elemento .info-client.

Esempio #3

Il terzo effetto dipende anche dalla posizione in alto della barra di scorrimento della finestra e dalla larghezza della finestra. In particolare, facciamo le seguenti ipotesi:

1. La larghezza della finestra è minore o uguale a 549px. In questo caso, l'animazione si attiva solo quando la posizione superiore della barra di scorrimento della finestra supera 1750 px.
2. La larghezza della finestra ha un valore compreso tra 550px e 991px. In questo caso, l'animazione si attiva solo quando la posizione superiore della barra di scorrimento della finestra supera 1150 px.
3. La larghezza della finestra è maggiore di 991px. In questo caso, l'animazione si attiva solo quando la posizione superiore della barra di scorrimento della finestra supera 850px.

Ed ecco il codice:

se ($(finestra).larghezza()<= 549 ) {
se ($(finestra).scrollTop() > 1750 ) (
secondaAnimazione();
}
) else if ($(finestra) .width() > 549 & amp;& amp; $(finestra) .width()<= 991 ) {
se ($(finestra).scrollTop() > 1150 ) (
secondaAnimazione();
}
) altro (
se ($(finestra).scrollTop() > 850 ) (
secondaAnimazione();
}
}

Il codice che contiene l'animazione è il seguente:

var secondAnimation = funzione()(
$(".method:eq(0)" ) .delay (1000 ) .animate ((
opacità: 1
) , "Lento" ,
funzione()(

}
) ;

$(".method:eq(1)" ) .delay (2000 ) .animate ((
opacità: 1
) , "Lento" ,
funzione()(
$(questo) .find ("h4" ) .css ("colore di sfondo", "#b5c3d5" );
}
) ;

$(".method:eq(2)" ) .delay (3000 ) .animate ((
opacità: 1
) , "Lento" ,
funzione()(
$(questo) .find ("h4" ) .css ("colore di sfondo", "#b5c3d5" );
}
) ;

$(".method:eq(3)" ) .delay (4000 ) .animate ((
opacità: 1
) , "Lento" ,
funzione()(
$(questo) .find ("h4" ) .css ("colore di sfondo", "#b5c3d5" );
}
) ;
} ;

Il codice sopra anima in sequenza la proprietà opacità per elementi .metodo e poi cambia il colore di sfondo elementi figlio h4.

Esempio #4

Questo effetto dipende anche dalla posizione in alto della barra di scorrimento e dalla larghezza della finestra. Più specifico:

1. Se la larghezza della finestra è inferiore o uguale a 549 px, l'animazione si attiva solo quando la posizione superiore della barra di scorrimento della finestra è maggiore di 3500 px.
2. Se la larghezza della finestra è compresa tra 550 px e 991 px, l'animazione si attiva solo quando la posizione superiore della barra di scorrimento della finestra è maggiore di 2200 px.
3. Se la larghezza della finestra è maggiore di 991px, l'animazione si attiva solo quando la posizione superiore della barra di scorrimento della finestra è maggiore di 1600px.

Ciò è implementato dal seguente codice:

se ($(finestra).larghezza()<= 549 ) {
se ($(finestra).scrollTop() > 3500 ) (
terza Animazione();
}
) else if ($(finestra) .width() > 549 & amp;& amp; $(finestra) .width()<= 991 ) {
se ($(finestra).scrollTop() > 2200 ) (
terza Animazione();
}
) altro (
se ($(finestra).scrollTop() > 1600 ) (
terza Animazione();
}
}

Il codice dell'animazione è il seguente:

.delay(2000) .animate((
opacità: 1
a destra: 0
), "Lento"
) ;

$(".blogs" ) .find ("pulsante" ) .delay (2500 ) .animate ((
opacità: 1
in basso: 0
), "Lento"
) ;
} ;

Il codice sopra anima le proprietà opacity , left , right e bottom in sequenza per gli elementi in PULSANTE P,IMG.

Conclusione

Spero che i quattro esempi mostrati qui ti aiutino a capire come creare vari effetti e animazioni durante lo scorrimento di una pagina.

In caso di domande, utilizzare il nostro

Puoi vedere l'esempio più semplice dell'utilizzo di questa combinazione un po' più in basso in questa pagina. La cosa più interessante è che questa bellezza (animazione a scorrimento) funziona SENZA jQuery. Si scopre che tutte le porte sono aperte per questo script... E ad esempio, scorri verso il basso... Più audacemente...

Posso dirti con sicurezza che ora l'animazione a scorrimento sta diventando MOLTO popolare e puoi spesso vedere questo effetto sui siti di vendita di imprenditori Internet di successo. Questi "trucchi" MOLTO danno vita ai siti e aiutano anche a focalizzare l'attenzione del visitatore su quei punti importanti che vuoi essere notato per primi.

Animazione di scorrimento: combinazione
« WOW.js" e " Animate.css»
su wordpress...

* per ripetere l'animazione, ricaricare la pagina.

Come impostare?

PASSO 1
Per iniziare, scarica questi due file ("WOW.js" e "Animate.css")

AGGIORNATO(25 luglio 2019):
wow.min.js v1.2.1| animare.min.css v3.7.2
PASSO 2
Posizioniamo la cartella "wow-animation" nella cartella principale del sito. Ovviamente puoi metterlo ovunque, purché specifichi il percorso corretto dei file. È comunque consigliabile posizionare questa cartella nella cartella principale: index.html. Se è WordPress, metti la cartella dove vuoi. (l'importante è specificare il percorso corretto).

PASSO 3
Mettiamoci dentro questa riga:

"wow-animazione/animate.min.css">

* Naturalmente, specifichiamo il percorso corretto del file. Se stai installando su WordPress, ti consiglio di specificare il percorso completo, ad es. a partire da https://tuodominio ecc. Per verificare se hai collegato correttamente il file, copia l'URL, inserisci barra degli indirizzi e premere "Invio". Se si apre un file con un codice incomprensibile, è tutto OK 🙂

PASSO 4
Inserito in fondo alla pagina prima queste righe:

<script src="wow-animazione/wow.min.js" >

* Specificare anche il percorso corretto del file e controllare nel browser.

<classe div ="wow fadeInRight" > Alcune informazionidiv >

PASSO 6
Impostazioni avanzate. Aggiunta di funzioni:
data-wow-durata: cambia la durata dell'animazione;
data-wow-delay: Ritardo prima dell'inizio dell'animazione;
data-wow-offset: Distanza prima dell'inizio dell'animazione (relativa alla parte inferiore della finestra del browser);
iterazione dei dati: Ripetere l'animazione "tante volte".

<classe div ="wow slideInLeft" data-wow-duration ="3.5s" data-wow-delay ="1s" data-wow-offset ="120" > Alcune informazionidiv > <h1 class ="wow slideInLeft" data-wow-duration ="3.5s" data-wow-delay ="1s" data-wow-offset ="120" > Alcune informazionih1 >