如何在Foundation中创建简单的Js动画?

时间:2016-07-17 04:54:51

标签: javascript jquery zurb-foundation

我正在尝试学习如何在我的Foundation 6网站上添加淡入淡出动画。我尝试从文档中学习,但它让我感到困惑。

我是否可以知道如何将Foundation内置动画用于HTML元素,或者如何实现外部Js库。

感谢您的帮助,非常感谢。

1 个答案:

答案 0 :(得分:0)

这是一个从外部JS文件中使用的简单淡入淡出效果。这与Foundation 6& Bootstrap 4

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" />

<div class="row">
    <center>
      <div class="large-12 column" style="background-color:#FF9999;">
          <h1 class="hello">Hello,</h1>
           <br>
             <p class="hello">My young friend</p>
      </div>
     </center> 
  </div>

<div class="row">
    <center>
      <div class="large-12 column" style="background-color:#c45c61;">
          <h1 class="hello">Welcome,</h1>
           <br>
             <p class="hello">to your jedi training</p>
      </div>
     </center> 
  </div>


<div class="row">
    <center>
      <div class="large-12 column" style="background-color:#f2c698;">
          <h1 class="hello">Hello,</h1>
           <br>
             <p class="hello">My young friend</p>
      </div>
     </center> 
  </div>

<!-- JS Plugins -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS:

/**** Making the class invisible until called upon ****/
.hello {
  opacity: 0;
  margin: 25px 0 0;
  color: white;
  padding: 10px;
 }
/**** Making the class invisible until called upon ****/




/**** calling the functionality to the class (this is called by the JS) ****/
.FadeIn {
    -webkit-animation: slideIn 0.8s ease 0.3s forwards;
    animation: slideIn 0.8s ease 0.3s forwards;
}
/**** calling the functionality to the class (this is called by the JS) ****/





/**** BEFORE & AFTER for the animation i.e. 0% to 100% - make the change, two because of browser compatability  ****/


@-webkit-keyframes slideIn {
    0%{
        -webkit-transform: translateY(40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}


@keyframes slideIn {
    0% {
        -webkit-transform: translateY(40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

/**** BEFORE & AFTER for the animation i.e. 0% to 100% - make the change, two because of browser compatibility  ****/

JS:

var $fade =  $(".hello"); //Calling the class in HTML

$(window).scroll(function () { //Using the scroll global variable
    $fade.each(function () {

        fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
        windowBottom = $(window).scrollTop() + $(window).height();

        if (fadeMiddle < windowBottom) {
          $(this).addClass("FadeIn");
        }
    });
});

/* On Load: Trigger Scroll Once*/
$(window).scroll();

这可以在这里看到:https://codepen.io/billyfarroll/pen/yKRNBM