Animation au scroll
canvas
-
canvas -
canvas -
Bonjour,
je souhaite insérer sur mon site des animation au scroll de la souris. En effet je souhaiterais que le texte arrive de la droite ou de la gauche lors du défilement; idem pour certaines images.
J'ai trouvé ce site mais je n'arrive pas à insérer le code (https://jackonthe.net/css3animateit/)
merci pour vos lumières
ps: j'en avais trouvé un sur codepen mais le js était dans le html ( c'est pas terrible)
canvas
je souhaite insérer sur mon site des animation au scroll de la souris. En effet je souhaiterais que le texte arrive de la droite ou de la gauche lors du défilement; idem pour certaines images.
J'ai trouvé ce site mais je n'arrive pas à insérer le code (https://jackonthe.net/css3animateit/)
merci pour vos lumières
ps: j'en avais trouvé un sur codepen mais le js était dans le html ( c'est pas terrible)
canvas
Configuration: Windows / Firefox 68.0
A voir également:
- Animation on scroll
- Scroll lock ✓ - Forum Windows
- Activer/désactivé touche scroll ✓ - Forum MacOS
- Scroll lock clavier ✓ - Forum Réseaux sociaux
- Touche arrêt défil sur clavier ✓ - Forum Clavier
- Scroll Lock actif ✓ - Forum Matériel & Système
8 réponses
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>
