我正在尝试学习如何在我的Foundation 6网站上添加淡入淡出动画。我尝试从文档中学习,但它让我感到困惑。
我是否可以知道如何将Foundation内置动画用于HTML元素,或者如何实现外部Js库。
感谢您的帮助,非常感谢。
答案 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();