I try to reproduce the effect of translation of the images as on the website www.studio32avril.com . I know i must used jquery and css translate but they don't move. Can you help me ?
Thanks a lot.
How may I create an effect of translation of an image according to the scrolling?
2k views Asked by EAventurier At
2
There are 2 answers
0
On
Short example: http://jsbin.com/qizawucagu/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
<style>.box1 {
background: red;
width: 120px;
height: 50px;
margin-top: 100px;
margin-left: 100px;
}
.box2 {
background: yellow;
width: 60px;
height: 40px;
}
body {
height: 2000px;
}
</style>
<script>
$(document).on('scroll', function(){
var h = $('body').scrollTop();
var b1 = $('.box1');
var b2 = $('.box2');
var x = h * 5;
b1.css('transform', 'translateX(-' + x + 'px)');
b1.css('-webkit-transform', 'translateX(-' + x + 'px)');
b2.css('transform', 'translateX(' + x + 'px)');
b2.css('-webkit-transform', 'translateX(' + x + 'px)');
});
</script>
</html>
You have to determine when the user starts scrolling: Check this Question
Additionally you have to link the variables with your image you want to move. But the solution Studio32Avril uses is not perfomant, since the Browser has to render every single pixel when they move. For better transform use translateX or translateY, these are made for animated movements!
Good luck and happy coding!