根据滚动事件进行页面动画

根据滚动事件进行页面动画

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {padding-top: 200px;height: 1000px;}.item {position: relative;left: -50px;top: -50px;width: 100px;height: 100px;display: inline-block;}.item1 {margin-left: 150px;background-color: red;}.item2 {background-color: blue;}.item3 {margin-left: 130px;background-color: aqua;}</style>
</head><body><div id="anim"><div class="item item1" data-end-x=-130 data-end-y=0 data-scale=2 data-ratio=0></div><div class="item item2" data-end-x=130 data-end-y=0></div><div class="item item2" data-end-x="-110" data-end-y="130"></div> <div class="item item3" data-end-x="-120" data-end-y="-110"></div> </div><script>// 父类var anim = document.getElementById('anim')console.log(anim)// 子类var animChild = anim.children// 所有需要动的元素var actList = []// 获取数据for (var i = 0, l = animChild.length; i < l; i++) {var _item = animChild[i]if (_item.dataset) {var _data = _item.dataset_data.scale = _data.scale || 1_data.ratio = _data.ratio || 0actList.push({el: _item,move: _data})}}console.log(actList)// 滚动事件window.onscroll = function () {// 滚动条数据var scrollY = window.scrollY// 遍历需要运动的元素for (var i = 0, l = actList.length; i < l; i++) {// 当前第几个var _item = actList[i]//运动参数var _actMove = { x: 0, y: 0, scale: 1 }//缩放大小var _scale = parseFloat(_item.move.scale)//倍率var _ratio = parseFloat(_item.move.ratio)//X轴var _endX = parseFloat(_item.move.endX)//Y轴var _endY = parseFloat(_item.move.endY)if (_endX < 0) {_actMove.x = 0 - scrollY > _endX ? 0 - scrollY : _endX} else {_actMove.x = scrollY < _endX ? scrollY : _endX}if (_endY < 0) {_actMove.y = 0 - scrollY > _endY ? 0 - scrollY : _endY} else {_actMove.y = scrollY < _endY ? scrollY : _endY}// 如果倍率存在if (_ratio) {if (_scale < 1) {_actMove.scale = 1 - (scrollY * _ratio) < 0 ? 0 : 1 - (scrollY * _ratio)} else if (_scale > 1) {_actMove.scale = 1 + (scrollY * _ratio) > _scale ? _scale : 1 + (scrollY * _ratio)}}// 修改样式_item.el.style.transform = 'translate(' + _actMove.x + 'px,' + _actMove.y + 'px)  scale(' + _actMove.scale + ')'}}</script>
</body></html>

效果

根据滚动事件进行页面动画相关推荐

dom事件对象、解绑事件、事件委托、页面加载、滚动事件、页面尺寸事件
1.e.type获取事件类型,例如click input focus <input type="text"> <script>let input=docum ...
web前端学习笔记26-事件类型——一般事件、页面事件、表单事件
一.事件类型的分类事件分为一般事件.页面事件和表单事件二.一般事件关键字释义关键字释义 click 单击事件 dblclick 双击事件 mousemove 鼠标移动事件 mouseove ...
JavaScript基础——滚动事件、加载事件、三大家族
文章目录一.滚动事件和加载事件 1.1 滚动事件 1.2 加载事件二.三大家族 2.1 scroll家族 2.2 offset家族 2.3 client家族一.滚动事件和加载事件 1.1 滚动事 ...
vue 监听页面滚动事件：触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
综合设计一个OPPE主页--页面的插件引用（animate.css）--d动画的使用--滚轮或鼠标到该位置时，才有动画的切换---所以我们需要用jquery监听鼠标滚轮的滚动事件
Animate.css | A cross-browser library of CSS animations. 里面有许多css的效果首先使用 animate.css文件 link rel=&qu ...
vue 组件封装 | s-fullpage 全屏滚动（内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
目录目标实现原理(要点) 完整代码 s-fullpage 和 s-fullpageItem s-fullpage.vue s-fullpageItem.vue 使用范例范例效果目标实现类似插 ...
waypoint+animate元素滚动监听触发插件实现页面动画效果
最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究首先来介绍下jquery. ...
页面滚动事件和利用JS实现回到顶部效果
页面滚动事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
监听页面滚动触发事件，页面停止滚动触发事件
监听页面滚动触发事件,页面停止滚动触发事件核心代码 data() {return {timer: null,isTipVisible: true} } methods: {handleScrollS ...

根据滚动事件进行页面动画

根据滚动事件进行页面动画相关推荐

最新文章

热门文章