2

我使用 Foundation4 作为我的框架，我希望在向下滚动时触发淡入淡出动画。更像这个网站：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

4

0 回答 0