Question

我一直试图找到一个网站风格的例子，但我无法确定所谓的效果。如果您查看The Red Bulletin的网站，您会看到当您向下滚动页面时，有许多图像会动画到位。有谁知道这个效果叫什么或知道一个好的教程，说明如何做到这一点？

http://www.redbulletin.com/us/us

小心，

乔恩

Answer 1

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

我建议先尝试自己模仿效果;尝试获得某种工作原型，然后在此处发布您的代码。尝试将问题分解为基本的技术挑战，例如：

如何检测用户何时滚动到页面中的某个位置？
如何在示例网站上实现淡入淡出和幻灯片动画效果？
如何将这两个东西连接在一起，并使它们可逆（向上滚动）？

寻找具体的教程几乎肯定是徒劳的，除非效果是一些碳复制典型的例子用来教无经验的程序员 - 相当于“Hello World！”在网页设计中。尽可能多的原型，一旦你碰壁，在这里发布你的代码，我相信这将提供更好的结果。

祝你好运！

Answer 2

部分效果称为“Parallax scrolling”，它已经变得相当普遍。快速搜索显示了许多教程。

Answer 3

正如BDawg所说，它被称为Parallax Scrolling。这个想法是你有＆＃39;页面＆＃39;说100%身高window.scrollTop并使用javascript可以动画＆＃39; （{j}更容易）通过window.height()增加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;}到下一页。你需要做CSS，根据你想做的事情，它会变得有点棘手。基本的想法是这样做：

CSS

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

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;
    });
});

Javascript（使用jQuery）

  public class linkedList1 {


public class Node{
        private int item;
        private Node next;

        public Node(){
            next = null;
        }
        public Node(int value, Node _n){
            this.item = value;
            next = _n;

        }

        public Node getNextNode(){
            return next;
        }

        public void setNextNode(Node v){
             next = v;
        }
    }

  private static Node head;

  public  linkedList1(){
      head = null;
  }
  public linkedList1(Node head){
      this.head = head;
  }
  public void setLinkedList(Node n){
  }
  public void addLast(Node n){

      Node currentLast = head;
      Node node;
          while( (node = currentLast.getNextNode()) != null){
          currentLast = node;
      }
      currentLast.setNextNode(n); 
      System.out.println("ADDED");
      }

  public void travers(){
     Node currentLast = head;
      while(currentLast.getNextNode() != null){
          System.out.println(currentLast);
          currentLast=currentLast.getNextNode();
      }
  }

有点作弊我再次使用another question;）

我所提供给你的并不是很好但是你应该对所有事情都有所了解。祝你好运！

网站效果 - 垂直滚动动画

3 个答案: