La guida semplice per creare animazioni dopo lo scrolling verso un elemento
Andremo a spiegare in modo semplice come rivelare un elemento in modo elegante dopo lo scrolling verso di esso nella vostra pagina web
Questa è la guida più semplice che potete trovare sul web.
Elencheremo i vari passaggi uno per uno, partiamo!
Scaricate il file zip del plug-in jQuery Appear dalla sua pagina GitHub, poi estraete il file “jquery.appear.js”.
Scaricate jQuery da qui.
A questo punto creiamo una pagina web di esempio dove andiamo a includere le nostre librerie appena scaricate.
<html>
<head>
<title>Prova</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<style>
div
{
width: 1000px;
height: 300px;
background-color: blue;
margin: 100px auto;
}
.box
{
opacity: 0;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="box"></div>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.appear.js"></script>
</body>
</html>
Come vedete si tratta di una semplicissima pagina web con cinque rettangoli div posti uno sotto l’altro. L’ultimo di questi rettangoli non sarà visibile perché abbiamo impostato la sua opacità a zero (ovviamente occuperà comunque spazio nella pagina, non confondete assolutamente “opacity: 0” con “display: none”!).
A questo punto possiamo sfruttare jQuery Appear per capire quando un elemento è all’interno della finestra dopo lo scrolling. Provate a incollare il seguente codice prima della chiusura del body della vostra pagina appena creata:
<script>
// Inizializzo jQuery Appear per l'elemento che voglio animare in modo che jQuery Appear "lo tenga d'occhio"
$(".box").appear();
// Quando l'elemento sarà visibile nella pagina dopo lo scrolling lancio l'animazione che porta l'opacità a uno, rendendo l'elemento visibile
$(".box").on("appear", function(){
$(".box").animate({opacity: 1}, 1000); // Metodo che lancia l'animazione..
});
</script>Provate a scorrere la pagina verso il basso e vedrete l’ultimo rettangolo apparire con una animazione in entrata!
Come vedete lanciare animazioni a un elemento quando quest’ultimo entra nel nostro campo visivo è semplicissimo grazie a jQuery Appear!
Ecco il codice completo della pagina di questo tutorial:
<html>
<head>
<title>Prova</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<style>
div
{
width: 1000px;
height: 300px;
background-color: blue;
margin: 100px auto;
}
.box
{
opacity: 0;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="box"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="jquery.appear.js"></script>
<script>
// Inizializzo l'elemento che voglio animare in modo che jQuery Appear "lo tenga d'occhio"
$(".box").appear();
// Quando l'elemento sarà visibile nella pagina lancio l'animazione che porta l'opacità a uno, rendendo l'elemento visibile
$(".box").on("appear", function(){
$(".box").animate({opacity: 1}, 1000); // Metodo che lancia l'animazione..
});
</script>
</body>
</html>
(function() {var id = 'eadv-2-' + Math.random().toString(36).substr(2) + (new Date().getTime());document.write(String.fromCharCode(60,115)+'cript async="async" defer="defer" type="text/javascript" id="' + id + '" sr' + 'c="https://www.eadv.it/track/?x=56-17282-59-2-a7-0-3a-3-76-300x250-e8-0-01&u=cgordoe.rastistiavlrieat.la&async=' + id + '">'+String.fromCharCode(60)+'/sc' + 'ript>');})();
