html+css实现滚动到元素位置显示加载动画效果


Posted in HTML / CSS onAugust 02, 2021

每次滚动到元素时,都显示加载动画,如何添加?

元素添加初始参数

以上图中的动画为例,添加俩个左右容器,将内容放置在容器内部。

添加初始数据,默认透明度0、左右分别移动100px。

//左侧容器
  .item-leftContainer {
    opacity: 0;
    transform: translateX(-100px);
  }
  //右侧容器
  .item-rightContainer {
    opacity: 0;
    transform: translateX(100px);
  }

添加动画数据

在less中添加动画数据。这里只设置了to,也可以省略第1步中的初始参数设置而在动画里设置from。

执行后,透明度由0到1,俩个容器向中间移动100px回到原处。

//动画
  @keyframes showLeft {
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  @keyframes showRight {
    to {
      opacity: 1;
      transform: translateX(0px);
    }
  }
  @keyframes hideLeft {
    to {
      opacity: 0;
      transform: translateX(-100px);
    }
  }
  @keyframes hideRight {
    to {
      opacity: 0;
      transform: translateX(100px);
    }
  }

触发动画

页面加载/刷新触发 -在componentDidMount中执行

页面滚动时触发 - 在componentDidMount、componentWillUnmount添加监听/注销页面滚动的事件

校验当前滚动高度与元素的位置差异:

window.pageYOffset(滚动距离) + windowHeight(窗口高度) > leftElement.offsetTop (元素的相对位置)+ parentOffsetTop(父元素的相对位置) + 200

  • 真正的滚动视觉位置 - window.pageYOffset(滚动距离) + windowHeight(窗口高度)
  • 元素距离顶部的高度 - 这里使用了leftElement.offsetTop + parentOffsetTop,原因是父容器使用了absolute绝对定位。如果是正常布局的话,使用元素当前的位置leftElement.offsetTop即可
  • 额外添加200高度,是为了优化视觉体验。当超出200高度时才触发动画

当页面滚动到下方,触发显示动画;当页面重新滚动到上方,触发隐藏动画。

componentDidMount() {
        this.checkScrollHeightAndLoadAnimation();
        window.addEventListener('scroll', this.bindHandleScroll);
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
    }
    bindHandleScroll = (event) => {
        this.checkScrollHeightAndLoadAnimation();
    }
    checkScrollHeightAndLoadAnimation() {
        const windowHeight = window.innerHeight;
        let parentEelement = document.getElementById("softwareUsingWays-container") as htmlElement;
        const parentOffsetTop = parentEelement.offsetTop;
        let leftElement = (parentEelement.getElementsByClassName("item-leftContainer") as htmlCollectionOf<HTMLElement>)[0];
        if (window.pageYOffset + windowHeight > leftElement.offsetTop + parentOffsetTop + 200) {
            leftElement.style.animation = "showLeft .6s forwards" //添加动画
        } else {
            leftElement.style.animation = "hideLeft 0s forwards" //隐藏动画
        }
        let rightElement = (parentEelement.getElementsByClassName(".item-rightContainer") as HTMLCollectionOf<HTMLElement>)[0];
        if (window.pageYOffset + windowHeight > rightElement.offsetTop + parentOffsetTop + 200) {
            rightElement.style.animation = "showRight .6s forwards" //添加动画
        } else {
            rightElement.style.animation = "hideRight 0s forwards" //隐藏动画
        }
    }

到此这篇关于html+css实现滚动到元素位置显示加载动画效果的文章就介绍到这了,更多相关html加载动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 HTML / CSS
纯html+css实现打字效果
html form表单基础入门案例讲解
Jul 21 #HTML / CSS
带你了解CSS基础知识,样式
Jul 21 #HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 #HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
html5实现点击弹出图片功能
Jul 16 #HTML / CSS
纯CSS3实现div按照顺序出入效果
You might like
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
浅谈Vue数据响应
2018/11/05 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
python开发之函数定义实例分析
2015/11/12 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python箱型图处理离群点的例子
2019/12/09 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
linux面试相关问题
2012/08/11 面试题
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
投标承诺书怎么写
2014/05/24 职场文书
离婚协议书标准格式
2014/10/04 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS