La guida semplice per creare animazioni dopo lo scrolling verso un elemento | Sviluppo web
La guida semplice per creare animazioni dopo lo scrolling verso un elemento | Sviluppo web
Lorenzo Campanile
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>