如何使用jQuery或Javascript对角滚动

前端之家收集整理的这篇文章主要介绍了如何使用jQuery或Javascript对角滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否有使用javascript或jQuery对角滚动的项目或插件

例如当您向下滚动内容时,它会被拉到浏览器的左上角;当您向上滚动时,您的内容将被拉到角落的右下方.

我看到一些类似的项目/网站,他们在滚动时动画他们的元素.大多数使用javascript的网站虽然有一些滞后效果.另一个我见过的是使用类似于“Nike a Better World”的html5视差效果(http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/)

你能指出我哪里可以成为一个好的起点吗?基本上我想要对角左右滚动项目.如果这可以在HTML5中明确地完成,我会高度考虑,因为我觉得它会有更少的滞后或更少的计算.

解决方法

我能够在小提琴中创造你想要的效果

http://jsfiddle.net/t0nyh0/8QTYt/36/

重要的花絮

>一个“固定”的全宽和全高包装器,可以容纳所有移动元素,帮助您根据滚动位置(实际上是“关键帧”数字)更加一致地设置div的动画.
> scroll_max,wrapper_width和wrapper_height有助于规范化包装器的尺寸.即滚动的最底部对应于包装器的底部/右侧,滚动的最顶部对应于包装器的顶部/左侧.
>将身体的高度设置为您想要的任意数量的“关键帧”.
>要在向下移动时从左上角移动到右下角,请调整顶部和左侧属性.相反,调整底部和右侧属性.当然,您需要为更复杂的动画制定自己的计算,但要知道做$window.scrollTop()将为您提供“关键帧”编号.

HTML

  1. <div id="wrapper">
  2. <div id="a">
  3. <h1>Meats</h1>
  4. </div>
  5. <div id="b">
  6. <h1>Veggies</h1>
  7. <hr/>
  8. <p>Veggies sunt bona vobis,proinde vos postulo esse magis daikon epazote peanut chickpea bamboo shoot rutabaga maize radish broccoli rabe lotus root kohlrabi napa cabbage courgette mustard squash mung bean.</p>
  9. </div>
  10. </div>

CSS

  1. body
  2. {
  3. height: 1000px; // 1000 keyframes
  4. }
  5.  
  6. #wrapper
  7. {
  8. width: 100%;
  9. height: 100%;
  10. position: fixed;
  11. border: 2px solid navy;
  12. overflow:hidden;
  13. }
  14.  
  15. #a {
  16. position:absolute;
  17. background-color: #daf1d7;
  18. width: 300px;
  19. height: 300px;
  20. }
  21. #b
  22. {
  23. position: absolute;
  24. background-color: #d2d0ee;
  25. width: 200px;
  26. height: 200px;
  27. bottom: 0px;
  28. right: 0px;
  29. }

Javscript

  1. var $window = $(window);
  2. var $a = $('#a');
  3. var $b = $('#b');
  4.  
  5. var scroll_max = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  6. var wrapper_height = $('#wrapper').height();
  7. var wrapper_width = $('#wrapper').width();
  8.  
  9. $window.scroll(function() {
  10. console.log(scroll_max);
  11. $a.css({
  12. 'top': ($window.scrollTop() / scroll_max) * wrapper_height,'left': ($window.scrollTop() / scroll_max) * wrapper_width
  13. });
  14. $b.css({
  15. 'bottom': ($window.scrollTop() / scroll_max) * wrapper_height,'right': ($window.scrollTop() / scroll_max) * wrapper_width
  16. });
  17. });​

猜你在找的jQuery相关文章