8 réponses
SioGabx
Messages postés
265
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
17 novembre 2022
100
27 août 2019 à 21:58
27 août 2019 à 21:58
Fait en 5 minutes, c'est pas le best mais au moins c'est pas trop lourd pour des transitions au scroll.
N'oublie pas de cliquer sur merci et de mettre en résolu.
Pose moi des questions si tu as des problèmes avec.
Page de test codepen : https://codepen.io/SioGabx/full/xxKdYPO
N'oublie pas de cliquer sur merci et de mettre en résolu.
Pose moi des questions si tu as des problèmes avec.
Page de test codepen : https://codepen.io/SioGabx/full/xxKdYPO
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Exemple</title>
<!-- On inclus jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
div {
/* Style pour l'exemple*/
width: 80%;
height: 50vh;
background-color: beige;
}
.animation {
/* Gestion de la durée des animations 3s = 3 secondes*/
transition: all 3s;
}
body{overflow-X:hidden;max-width:100%;}
/* Left to right*/
[data-scrollanim~="lefttoright"] {
transform: translateX(-200vw);
}
/* Right to left*/
[data-scrollanim~="righttoleft"] {
transform: translateX(200vw);
}
/* Opacity*/
[data-scrollanim~="lefttoright_opacity"] {
opacity: 0;
transform: translateX(-20vw);
}
</style>
</head>
<body>
<div class="animation" data-scrollanim="lefttoright">I'm a special div, scroll !</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div class="animation" data-scrollanim="righttoleft">I'm a special div, j'arrive de la droite vers la gauche !</div>
<!-- On peux culmuler deux effets ou + -->
<div class="animation" data-scrollanim="lefttoright_opacity">Je suis une div avec deux effet opacity + left to right moving</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<div>I'm a div</div>
<script>
// Au scroll :
window.onscroll = function() {
// Quand Jquery est load
$(document).ready(function() {
// Pour tout les element avec un effect
$("[data-scrollanim]").each(function() {
if ($(this).offset().top < ($(window).scrollTop() + $(window).height())) {
$(this).removeAttr('data-scrollanim');
}
})
});
}
</script>
<!-- Made by SioGabx :3-->
</body>
</html>
