带有easing和stellar.js的javascript水平视差
javascript horizontal parallax with easing and stellar.js
我正在尝试创建一个水平视差滚动网站。目前,除了宽松的部分,一切都在起作用。这是代码:
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script type='text/javascript' src='./js/jquery.mousewheel.js'></script>
<script type='text/javascript' src='./js/jquery.easing.js'></script>
<script type='text/javascript' src='./js/jquery.stellar.min.js'></script>
<script type='text/javascript'>
$(function() {
$("body").mousewheel(function(event, delta) {
$('html body').animate({ scrollLeft: $('div.ease').offset.left - 40}, 6000, 'easeInOutExpo');
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
$.stellar({
horizontalScrolling: true
});
});
</script>
<style type="text/css" style="display: none !important;">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
</style>
<div style="width: 3000px;">
<div class="main" style="height: 100%; width: 1000px; background-color: #ff00ff; float: left; position: relative;">
<div class="ease" style="font-size: 55px; color: #ffffff; margin-top: 30px; margin-left: 300px; position: relative;" data-stellar-ratio="3" >a</div>
<div class="ease" style="font-size: 55px; color: #ffff00; margin-top: 95px; margin-left: 600px; position: relative;" data-stellar-ratio="0.9">b</div>
<div class="ease" style="font-size: 55px; color: #0f0fff; margin-top: 200px; margin-left: 450px; position: relative;" data-stellar-ratio="0.9">c</div>
</div>
<div class="main" style="height: 100%; width: 1000px; background-color: #ffff00; float: left; position: relative;">
<div class="ease" style="font-size: 55px; color: #ffffff; margin-top: 30px; margin-left: 300px; position: relative;" data-stellar-ratio="0.9" data-stellar-horizontal-offset="10">d</div>
<div class="ease" style="font-size: 55px; color: #ff00ff; margin-top: 95px; margin-left: 600px; position: relative;" data-stellar-ratio="0.15" data-stellar-horizontal-offset="30">e</div>
<div class="ease" style="font-size: 55px; color: #0f0fff; margin-top: 200px; margin-left: 450px; position: relative;" data-stellar-ratio="0.55" data-stellar-horizontal-offset="20">f</div>
</div>
</div>
要尝试这个(不放松)只需删除行
$('html body').animate({ scrollLeft: $('div.eases').offset.left - 40}, 6000, 'easeInOutExpo');
如何在滚动中添加轻松?
我正在努力实现这样的目标:http://hotdot.pro/en/
谢谢!
http://jsfiddle.net/67grK/1/
我注意到,在您的代码中,您调用$('div.ease').offset.left
。这就是您的代码被破坏的地方。我已经更新了小提琴以获得正确的代码。它应该是$('.ease').offset().left
(过度限定css选择器被认为是不好的做法,所以你可以把div排除在外)
动画代码应该是实心的,但是,选择动画的逻辑仍然需要一些工作。您选择$('div.ease')
,并且不指定要引用的标记的索引,因此jquery假定DOM中的第一个节点。
其次,每次注册鼠标事件时,它都会尝试对其进行动画处理。我会解除鼠标滚动的绑定,并在回调函数中重新绑定鼠标滚动,并更新某种计数器以选择要转到的索引。
这是你试图创建的一个很好的例子
http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/
相关文章:
- Wordpress 3级水平导航-需要jquery/javascript帮助进行对齐
- 水平日历今天的日期以纯javascript突出显示
- 使用JavaScript控制iOS网络应用程序中列表的垂直滚动和水平滑动
- 数据表 Javascript 显示水平滚动条
- javascript Y 滚动条在向下按钮的鼠标上移动,但窗口水平
- 在横幅中水平对齐图像和 JavaScript 旋转图像
- 尝试使用 javascript 获取动态添加的行的水平乘积
- 如何修复此 JavaScript 新闻水平自动收报机
- JavaScript 中的跨浏览器水平和垂直滚动事件
- 以水平格式而不是垂直格式显示由HTML / JavaScript生成的CSV文件
- 使用预制的javascript放大镜时,如何水平排列图像并使用css居中
- 顶部水平滚动条数据表javascript
- CSS或Javascript水平表溢出解决方案
- Javascript touchmove 事件仅水平滚动而不是垂直滚动
- 水平Javascript菜单错误
- 带有easing和stellar.js的javascript水平视差
- 如何使用javascript获取mp3在特定播放点的音量水平
- JavaScript:水平滚动与鼠标滚轮
- 做一个响应式的Javascript水平导航,中间有Logo
- Javascript水平滚动按钮