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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
浅析HTML5 Landmark
Sep 11 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代码实现表单数据验证类
2015/07/28 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
python基础教程之序列详解
2014/08/29 Python
python如何通过protobuf实现rpc
2016/03/06 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
使用Python实现简单的服务器功能
2017/08/25 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
python主要用于哪些方向
2020/07/05 Python
python学习笔记之多进程
2020/08/06 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
母亲追悼会答谢词
2014/01/27 职场文书
电子商务求职信
2014/06/15 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL