React滚动页面触发相应位置动画

需要实现的效果：（滚动到内容区域触发）

第一段内容移动效果
第二段内容淡入
第三段内容缩放

实现思路

滚动过的距离+当前窗口的高度>元素到顶部窗口的距离 ===>则触发动画

完整代码

demo.jsx

import React,{useRef,useEffect,useState} from 'react';// 此函数用于获取一个元素到最外层窗口的距离
// 接收两个参数
// obg---> Dom元素
// direction----->方向  top|bottom|left|right
const offset = (obj, direction) => {//将top,left首字母大写,并拼接成offsetTop,offsetLeftvar offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1);    var realNum = obj[offsetDir];var positionParent = obj.offsetParent;  //获取上一级定位元素对象while(positionParent != null){realNum += positionParent[offsetDir];positionParent = positionParent.offsetParent;}return realNum;
}const View = () => {let text_area1=useRef()let text_area2=useRef()let text_area3 = useRef()let [scrollH, setscrollH] = useState(0)let [domTop, setDomTop] = useState({Dom1_offT:0,Dom2_offT:0,Dom3_offT:0,})const init=()=>{let Dom1_offT = offset(text_area1.current, 'top')let Dom2_offT = offset(text_area2.current, 'top')let Dom3_offT = offset(text_area3.current, 'top')setDomTop({Dom1_offT,Dom2_offT,Dom3_offT})window.onscroll = () => {let currentH = document.documentElement.clientHeightlet scrollH = document.documentElement.scrollTopsetscrollH(scrollH+currentH)}}useEffect(() => {init()}, [])return (<div className="demo1_container"><div ref={text_area1} className={scrollH > domTop.Dom1_offT? 'text_area1 a_1' : 'text_area1'}><ul>{new Array(10).fill(0).map((item, index) => {return (<li key={index}>这是一段内容{index}</li>)})}</ul></div><div ref={text_area2}  className={scrollH>domTop.Dom2_offT?'text_area2 a_2':'text_area2' }><ul>{new Array(10).fill(0).map((item, index) => {return (<li key={index+10}>这是一段内容{index}</li>)})}</ul></div><div ref={text_area3}  className={scrollH>domTop.Dom3_offT?'text_area3 a_3':'text_area3' }><ul>{new Array(10).fill(0).map((item, index) => {return (<li key={index+20}>这是一段内容{index}</li>)})}</ul></div></div>       )
}export default View

demo.scss

.demo1_container {div {margin-top: 700px;}
}.a_1 {animation: A 1s 1;
}.a_2 {animation: B 1s 1;
}.a_3 {animation: C 1s 1;
}@keyframes A {0% {transform: translate(20%, 20%);}100% {transform: translate(0);}
}
@keyframes B {0% {opacity: 0;}100% {opacity: 1;}
}@keyframes C {0% {transform: scale(0.8);}100% {transform: scale(1);}
}

React滚动页面触发相应位置动画相关推荐

从一个页面跳转到用swiper写的全屏滚动页面的指定位置
问题背景从一个页面跳转到用swiper写的全屏滚动页面的指定位置,怎么实现啊? 案例我没有自己写一个全屏滚动,就在Swiper官网找了Swiper在PC端的全屏页面效果展示若有侵权请留言告知我更 ...
wow.js结合animate.css实现滚动页面触发animate动画效果
animate.css http://www.swiper.com.cn/ wow.js https://wowjs.uk/docs.html https://github.com/graingert ...
js滚动页面到固定位置进行操作
$(window).scroll(function () {var scrollTop = $(this).scrollTop();var scrollHeight = $("#div&qu ...
Vue：滚动页面到指定位置实现避坑笔记
方法: mounted(){document.getElementById("Ebody").scrollIntoView( {behavior:"smooth" ...
页面滚动时触发图片逐帧播放_如何在滚动效果上创建逐帧运动图像
页面滚动时触发图片逐帧播放 A step by step guide on how to create that dynamic image background you see everywhere ...
jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
php如何监听页面滚动,html5中在元素滚动条在滚动时触发的事件onscroll
实例元素滚动时执行 JavaScript 定义和用法 onscroll 事件在元素滚动条在滚动时触发. 提示: 使用 CSS overflow 样式属性来创建元素的滚动条. 浏览器支持语法 HTM ...
ios滚动条影响父页面 vue_在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案...
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案原因: -webkit-overflow-scrolling:touch 解释: 由于使用-webkit-overflow-scrollin ...
Android滚动页面位置指示器：CircleIndicator
Android滚动页面位置指示器:CircleIndicator CircleIndicator是github上的一个开源的用于页面滚动时候的位置指示器,指示当前页面在总的页面中的位置和前后位置 ...

React滚动页面触发相应位置动画

需要实现的效果：（滚动到内容区域触发）

实现思路

完整代码

React滚动页面触发相应位置动画相关推荐

最新文章

热门文章

React滚动页面触发相应位置动画

需要实现的效果： （滚动到内容区域触发）

实现思路

完整代码

React滚动页面触发相应位置动画相关推荐

最新文章

热门文章

需要实现的效果：（滚动到内容区域触发）