控制元素到达可视区域内触发动效
生活随笔
收集整理的這篇文章主要介紹了
控制元素到达可视区域内触发动效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
控制元素到達可視區域內觸發動效，代碼參考了別人的，有修改，時間久了，出處想不起來。后面遇到了會補充源碼地址。<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="renderer" content="webkit"><title>控制元素到達可視區域內觸發動效</title><!--[if lt IE 9]><meta http-equiv="refresh" content="0;ie.html" /><![endif]--><style>div.animateDiv{width:100%;height:400px;background: #fff;font-size:36px;color: #000;text-align: center;}.fadeInUp{width:100%;height:100px;position:relative;overflow: hidden;line-height: 100px;animation: myfirst 1s linear;-webkit-animation: myfirst 1s linear; /* Safari 和 Chrome */}@-webkit-keyframes myfirst /* Safari and Chrome */ {0% {color:#fff; top:300px;}100% {color:#000; top:0;}}</style>
</head><body>
<div class="container-fluid"><div class="row"><div class="col-lg-12" style="width:100%;height:1000px;background: #5cb85c"></div><div class="col-lg-12"><div class="animateDiv"><div data-animate="fadeInUp">青青子衿，悠悠我心。縱我不往，子寧不嗣音？</div></div></div><div class="col-lg-12" style="width:100%;height:800px;background: #5bc0de"></div><div class="col-lg-12"><div class="animateDiv"><div data-animate="fadeInUp">青青子佩，悠悠我思。縱我不往，子寧不來？</div></div></div><div class="col-lg-12" style="width:100%;height:800px;background: #c7ddef"></div><div class="col-lg-12"><div class="animateDiv"><div data-animate="fadeInUp">挑兮達兮，在城闕兮。一日不見，如三月兮。 </div></div></div><div class="col-lg-12" style="width:100%;height:800px;background: #7fd53e"></div><div class="col-lg-12"><div class="animateDiv"><div data-animate="fadeInUp">詩經《國風·鄭風·子衿》</div></div></div></div>
</div><script src="js/jquery-3.1.1.min.js"></script>
<script>/*說明：這是一個滾動到可視區域播放動畫的插件，當窗口滾動到可視區域時添加ClassName進入動畫；1.查找頁面內所含有[data-animate]的元素，遍歷得到他們本身；[data-animate]值為動態獲取，需手寫animation，更多動畫效果請訪問https://daneden.github.io/animate.css/；2.調用函數:計算元素是否到達可視區域 返回Boolean值；3.添加有動畫的ClassName；注意：此方法不能用于ifarm,窗口滾動影響判斷*/$(function(){var windowHeight = $(window).height(); //窗口高度// 監聽頁面滾動$(window).scroll(function(event){// 添加【data-animatie】var dataAnimateEl = $('[data-animate]');if (dataAnimateEl.length > 0 ) {dataAnimateEl.each(function(){var element = $(this);var is_Animat = is_Visible_Area(element); //調用函數計算是否到達可視區域 返回Booleanvar annimationVal=element.data("animate");if (is_Animat){element.addClass(annimationVal);}})}});//函數作用：計算元素是否到達可視區域function is_Visible_Area(element) {var objHeight = $(element).offset().top;//元素到頂部的高度let winPos = $(window).scrollTop();//距離頂部滾動let val = objHeight-winPos;if (val<windowHeight && val > 0) {//可視區域// console.log("有動畫")return true;}else {//不可視區域// console.log("不在可視區域內")return false;}}});</script>
</body>
</html>
在vue中使用
methods: {handleAnimate:function(){var windowHeight = $(window).height(); //窗口高度// 添加【data-animatie】var dataAnimateEl = $('[data-animate]');if (dataAnimateEl.length > 0 ) {dataAnimateEl.each(function(){var element = $(this);var is_Animat = false; //調用函數計算是否到達可視區域 返回Booleanvar objHeight = $(element).offset().top;//元素到頂部的高度let windowsScrollTop = $(window).scrollTop();//距離頂部滾動let val = objHeight-windowsScrollTop;if (val < windowHeight && val > 0) {//可視區域is_Animat=true;}var annimationVal=element.data("animate");if (is_Animat) {element.addClass(annimationVal);}})}} }, mounted:function(){window.addEventListener('scroll', this.handleAnimate) }總結
以上是生活随笔為你收集整理的控制元素到达可视区域内触发动效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win10同时安装wps和office时
- 下一篇： JAVA_SSM装饰装修公司管理系统(含