Effect Jquery
Bonjours !
Voila, je suis à la recherche d'un effet Jquery visible sur sur ce site VisualBox.com
L'effet recherché est "l'éclairage" d'une partie d'image qui est automatique, je pense, suivant la position du scroll.
Merci d'avance !
6 réponses
Normalement ça marche
<!DOCTYPE html>
<html>
<head>
<title>Mon test</title>
<style type="text/css">
div.area {
position: relative;
width: 600px;
height: 450px;
margin: 0 auto;
opacity:0.5;
}
div.vignette {
width: 290px;
height: 140px;
margin: 5px;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('div.area:first').animate({opacity : 1},500);
$(window).scroll(function() {
var scrollCenter = $(window).height() / 2;
$("div.area").each(function(){
var boardOffsetTop = $(this).offset().top - $(document).scrollTop();
var boardOffsetBot = boardOffsetTop + $(this).height();
if ( boardOffsetTop > scrollCenter ) {
$(this).stop().animate({opacity: 0.50});
} else if ( boardOffsetBot < scrollCenter ) {
$(this).stop().animate({opacity: 0.5});
} else {
$(this).stop().animate({opacity: 1});
};
});
});
});
</script>
</head>
<body>
<div class="area">
<div style="background-color: burlywood;" class="vignette"></div>
<div style="background-color: red;" class="vignette"></div>
<div style="background-color: blue;" class="vignette"></div>
<div style="background-color: green;" class="vignette"></div>
<div style="background-color: peru;" class="vignette"></div>
<div style="background-color: plum;" class="vignette"></div>
</div>
<div class="area">
<div style="background-color: burlywood;" class="vignette"></div>
<div style="background-color: red;" class="vignette"></div>
<div style="background-color: blue;" class="vignette"></div>
<div style="background-color: green;" class="vignette"></div>
<div style="background-color: peru;" class="vignette"></div>
<div style="background-color: plum;" class="vignette"></div>
</div>
<div class="area">
<div style="background-color: burlywood;" class="vignette"></div>
<div style="background-color: red;" class="vignette"></div>
<div style="background-color: blue;" class="vignette"></div>
<div style="background-color: green;" class="vignette"></div>
<div style="background-color: peru;" class="vignette"></div>
<div style="background-color: plum;" class="vignette"></div>
</div>
<div class="area">
<div style="background-color: burlywood;" class="vignette"></div>
<div style="background-color: red;" class="vignette"></div>
<div style="background-color: blue;" class="vignette"></div>
<div style="background-color: green;" class="vignette"></div>
<div style="background-color: peru;" class="vignette"></div>
<div style="background-color: plum;" class="vignette"></div>
</div>
<div class="area">
<div style="background-color: burlywood;" class="vignette"></div>
<div style="background-color: red;" class="vignette"></div>
<div style="background-color: blue;" class="vignette"></div>
<div style="background-color: green;" class="vignette"></div>
<div style="background-color: peru;" class="vignette"></div>
<div style="background-color: plum;" class="vignette"></div>
</div>
</body>
</html>Merci de ta réponse mais ce n'est pas cette effet dont je parlais, je me suis mal exprimer peut être :/
Essai de descendre avec la roulette de ta souris sans survoler aucune image, l'animation se fait automatiquement.
Faut écouter le scroll() et quand on passe à la hauteur d'un élément il faut le fadeIn()
Jte laisse chercher volontairement :)
Merci des vos réponses.
Jbou43 sa ne marche pas désolé mais j'ai compris ton code, c'est le plus important je pense !
Encore Merci :)
Oups, J'ai oublié de fermer la fonction jQuery(document).ready(function($){
ajoute juste }); avant la fermeture de la balise script