当前位置:主页 > JavsScript库 > 动画 >

浏览器滚动时淡入/淡出效果 - ScrollFade.js
栏目分类:动画   发布日期:2021-08-16   浏览次数:

ScrollFade.js 是一个 JavaScript 库,用于在元素滚动进出视口时淡入/淡出元素。

ScrollFade.js使用:

1.在页面中添加scrollfade.js。

<script src="assets/js/scrollfade.js"></script>

2.淡入/淡出动画所需的CSS样式。

.scrollFade {
  opacity: 1;
  pointer-events: all;
}
 
.scrollFade--hidden {
  opacity: 0;
  pointer-events: none;
}
 
.scrollFade--visible {
  opacity: 1;
  pointer-events: all;
}
 
.scrollFade--animate {
  transition: opacity 0.4s ease-in-out;
}

3. 将'scrollFade' CSS 类添加到目标元素并完成。

<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
<div class="item scrollFade"></div>


官方网站:https://github.com/meddlenz/ScrollFade

相关热词: ScrollFade.j

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库