使用恒星js的jQuery水平视差效果？
[英]Jquery horizontal parallax effect using stellar js ?
问题描述
I read the documentation for stellar.js and the example shows how vertical scrolling works , i tried my hand at simple horizontal scrolling parallax but i am not sure where i am going wrong. 
我阅读了stellar.js的文档，并且该示例演示了垂直滚动的工作原理，我尝试了简单的水平滚动视差，但是我不确定我要去哪里。 For small object called element is i have set the data-stellar-ratio and for the backgrounds i have set the data-background-stellar-js. 对于名为element的小物体，我已经设置了data-stellar-ratio，对于背景，我设置了data-background-stellar-js。 I have seen lots of tutorials for vertical scrolling and not so much horizontal. 我看过很多关于垂直滚动而不是水平滚动的教程。 Are there are alternate ways to achieve this by jquery alone? 是否有其他方法可以单独通过jquery实现此目的？
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
height:100%;
margin:0px;
}
#bg1 {
background:red;
}
#bg2 {
background:green;
}
#bg3 {
background:yellow;
}
.elements {
width:40px;
height:40px;
background:black;
position:fixed;
}
</style>
</head>
<body>
<div id="bg1" data-stellar-background-ratio="0.5">
<div class="elements" data-stellar-ratio="0.5"></div>
</div>
<div id="bg2" data-stellar-background-ratio="0.5">
<div class="elements" data-stellar-ratio="0.5"></div>
</div>
<div id="bg3" data-stellar-background-ratio="0.5">
<div class="elements" data-stellar-ratio="0.5"></div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="stellar.js"></script>
<script type="text/javascript">
$(function () {
$.stellar({
horizontalScrolling: true,
verticalOffset: 40
});
});
</script>
</body>
2 个解决方案
解决方案1
4 2013-02-08 04:59:01
Helpful links: 有用的网址：
http://dev.jonraasch.com/scrolling-parallax/docs http://dev.jonraasch.com/scrolling-parallax/docs
http://www.egstudio.biz/easy-parallax-with-jquery/ http://www.egstudio.biz/easy-parallax-with-jquery/
There are many different ways to do this, and you can even do it without another file. 有许多不同的方法可以执行此操作，甚至无需其他文件也可以执行此操作。
http://jsfiddle.net/4kG6s/1/ http://jsfiddle.net/4kG6s/1/
HTML 的HTML
<div id="background">
</div>
<div id="middleground">
</div>
<div id="foreground">
</div>
CSS 的CSS
div{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
#background{
z-index:1;
background:url('http://placehold.it/100x100&text=Background');
}
#middleground{
z-index:2;
background:url('http://placehold.it/250x250&text=Middleground');
opacity:.5;
}
#foreground{
z-index:3;
background:url('http://placehold.it/350x350&text=Foreground');
opacity:.25;
}
JS JS
/*
function AnimateMe(){
$("#background").css("background-position", "-=2");
$("#middleground").css("background-position", "-=4");
$("#foreground").css("background-position", "-=8");
}
setInterval(AnimateMe, 1000/60);
*/
var strength1 = 50;
var strength2 = 100;
var strength3 = 200;
$("html").mousemove(function(e){
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = 1* pageX * -1;
var newvalueY = 1* pageY * -1;
$('#background').css("background-position", (strength1 / $(window).width() * pageX * -1)+"px "+(strength1 / $(window).height() * pageY * -1)+"px");
$('#middleground').css("background-position", (strength2 / $(window).width() * pageX * -1)+"px "+(strength2 / $(window).height() * pageY * -1)+"px");
$('#foreground').css("background-position", (strength3 / $(window).width() * pageX * -1)+"px "+(strength3 / $(window).height() * pageY * -1)+"px");
});
HOPE THIS ALL HELPS! 希望这一切都可以帮助！
解决方案2
1 2013-02-08 05:02:39
Try This Code see demo http://jsfiddle.net/nilesh026/4eBDE/1/ 尝试此代码，请参见演示http://jsfiddle.net/nilesh026/4eBDE/1/
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript" src="jquery.stellar.js"></script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
height:100%;
margin:0px;
}
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
#bg1 {
background:red;
}
#bg2 {
background:green;
}
#bg3 {
background:yellow;
}
.elements {
width:400px;
height:400px;
background:black;
position:fixed;
}
</style>
<div class="photo" id="bg1" data-stellar-background-ratio="0.5">
<div class="elements" data-stellar-ratio="0.5"></div>
</div>
<div class="photo" id="bg2" data-stellar-background-ratio="0.5">
<div class="elements" data-stellar-ratio="0.5"></div>
</div>
<div class="photo" id="bg3" data-stellar-background-ratio="0.5">
<div class="elements" data-stellar-ratio="0.5"></div>
</div>
<script type="text/javascript">
$(function () {
$.stellar({
horizontalScrolling: true,
verticalOffset: 40
});
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.