Question

我正在使用Foundation4作为我的框架，我希望在向下滚动时触发fadein动画。更像是这个网站：www.isaacpvl.com。我有四个div，如果这些信息很重要，他们会做出回应。感谢无论谁回答！我已经尝试过使用萤火虫，但我仍然无法找到。谈到javascript，我是新手。这是我到目前为止所做的代码。这只是一个模型，看看事情会是什么样子，而不是设计太多。

    <div class="row">
  <div style="background-color: black;" id="head" class="large-12 columns">
  </div>
</div>
<div class="row">
  <div style="background-color: red;" id="section1" class="large-6 columns">

  </div>
  <div style="background-color: red;" id="section1" class="large-6 columns">
  <img class="animated fadeInRight" src="img/hongkong/hongkongdragon.gif" />
  </div>

</div>
<div class="row">
  <div style="background-color: blue;" id="section2" class="large-12 columns">
  </div>
</div>

这是迄今为止的身体和div的css

.row.full-width { width: 100%; max-width: 100%; }
.row {min-width:100% !important; background-color: black;}
.section1{
    /*background-image: url("../img/hongkong/background.png");*/
    background-color:red;
    position: relative;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.section2{
    /*background-image: url("../img/hongkong/background.png");*/
    background-color: black;
    position: relative;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

正如您所看到的，动画类中有一个图像源，这就是我想要制作动画的图像。这是一个全屏类型的网站。

我正在使用http://daneden.me/animate/ btw

中的animate.css

向下滚动时Animate.css触发入口动画

0 个答案: