Javascript 网站效果-垂直滚动动画_Javascript_Jquery_Html_Css

Javascript 网站效果-垂直滚动动画

javascript jquery html css

Javascript 网站效果-垂直滚动动画,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直在试图找到一个网站风格的例子，但我不知道效果是什么。如果你看一下红色公告的网站，你会发现当你向下滚动页面时，有许多图像被动画化了。有人知道这种效果叫什么，或者知道一个很好的教程来演示如何做到这一点吗保重, Jon这些类型的效果很少被命名，除非它们代表某种无处不在的设计原型，所以我理解找到答案的困难我建议先尝试模仿这种效果；尝试获得某种工作原型，然后将代码发布到这里。尝试将问题分解为基本的技术挑战，例如：如何检测用户何时滚动到页面中的某个点如何在示例网站上实现淡入淡出和滑动动画效

我一直在试图找到一个网站风格的例子，但我不知道效果是什么。如果你看一下红色公告的网站，你会发现当你向下滚动页面时，有许多图像被动画化了。有人知道这种效果叫什么，或者知道一个很好的教程来演示如何做到这一点吗

保重,

Jon

这些类型的效果很少被命名，除非它们代表某种无处不在的设计原型，所以我理解找到答案的困难

我建议先尝试模仿这种效果；尝试获得某种工作原型，然后将代码发布到这里。尝试将问题分解为基本的技术挑战，例如：

如何检测用户何时滚动到页面中的某个点
如何在示例网站上实现淡入淡出和滑动动画效果
如何将这两件事链接在一起，并使它们可逆（向上滚动）

寻找特定的教程几乎肯定是徒劳的，除非效果是一些抄袭的典型例子，用来教没有经验的程序员——相当于网页设计中的“Hello World！”。尽可能多地创建原型，一旦遇到问题，就在这里发布代码，我相信这将提供更好的结果

祝你好运

这种效果的一部分被称为“”，它已变得相当普遍。快速搜索将显示大量教程。

正如BDawg所提到的，它被称为视差滚动。这样做的目的是让“页面”的高度为

100%

，使用javascript可以通过增加

window.scrollTop

window.height（）

来“动画化”（使用jQuery更容易）下一页。你需要做CSS，这可能会变得有点棘手，这取决于你想做什么。基本思路是这样做：

CSS

HTML

有点作弊我又用了；）

我提供给你的不是很好，但是有了这些，你应该对每件事的工作原理有了基本的了解。祝你好运

并不是说这是最好的一个，但这里只有一个教程，我在搜索时发现：谢谢你的信息。

html,body{margin:0px;padding:0px;height:100%;}
h1{margin:0px;padding:2em;}
.page{height:100%;font-size:3em;text-align:center;}
.p1{background:#3399FF;color:#FFFFFF;}
.p2{background:#FFFFFF;color:#3399FF;}

<html>
    <head>
    </head>
    <body>
        <div class="page p1">
            <h1>Page 1</h1>
        </div>
        <div class="page p2">
            <h1>Page 2</h1>
        </div>
    </body>
</html>

$('document').ready(function(){
    var height=$(window).height();
    $(window).scroll(function(event){
       var st = $(this).scrollTop();
       if (st > lastScrollTop){
           next=$(window).scrollTop()+height;
       } else {
           next=$(window).scrollTop()-height;
       }
       $(window).animate({'scrollTop':next},500);
       lastScrollTop = st;
    });
});