jQuery pour donner une impression de fond défilement lent
j'ai le code suivant qui est sur le point de travailler pour donner l'impression qu'une div défile plus lentement que l'autre, mais il y a un problème avec la div de fond secousse un peu lors du défilement.
avez-vous une idée de la raison pour laquelle cela se produit et de la façon dont je pourrais le réparer?
EDIT: cela ne semble pas être un problème dans tous les navigateurs, donc je suppose que je suis maintenant à la recherche d'un moyen plus sûr d'atteindre cet effet...
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var divam = 1.2;
$(".sky").css({
"top":scrollTop/divam+"px",
"height":10000-(Math.round(scrollTop/divam))+"px"
});
});
});
</script>
<style type="text/css">
.sky {
height:10000px;
width:100%;
position:absolute;
top:0px;
left:0px;
background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg);
z-index:1;
}
.red {
height:10000px;
width:50%;
position:absolute;
top:0px;
right:25%;
background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg);
z-index:2;
background-position:center;
}
</style>
</head>
<body>
<div class="sky"></div>
<div class="red"></div>
</body>
2 réponses
vous essayez d'obtenir un effet 'parallax scrolling'. Je vous recommande de jeter un oeil à quelques articles tels que ce tutoriel et cette documentation . Si vous avez besoin de plus d'aide il suffit de demander, j'ai fait quelques site avec ce design.
j'ai en quelque sorte fait quelques changements à cela moi-même et il a fonctionné plus lisse comme je n'ai vraiment pas besoin de toutes les fonctionnalités dans le plugin Oliver Cooper m'a dirigé trop, bien que le plugin est probablement la meilleure option pour permettre plus de marge pour l'adaptation future.
Voici mon code amélioré.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var divam = 20;
$("body").css({
"background-position":"0px -"+scrollTop/divam+"px"
});
$(".red").css({
"margin-top":"-"+scrollTop+"px"
});
});
});
</script>
<style type="text/css">
body {
background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg);
background-attachment: fixed;
height:21000px;
}
.red {
height:10000px;
width:50%;
position:fixed;
top:400px;
left:25%;
background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg);
background-position:center;
border-bottom:10px solid #000;
}
</style>
</head>
<body>
<div class="sky"></div>
<div class="red"></div>
</body>