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美化表单控件全集
Jun 29 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
关于 HTML5 的七个传说小结
Apr 12 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 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也可以?成Shell Script
2006/10/09 PHP
PHP中一个控制字符串输出的函数
2006/10/09 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
PHP7 弃用功能
2021/03/09 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
艺术专业大学生自我评价
2013/09/22 职场文书
岗位廉政承诺书
2014/03/27 职场文书
生产现场禁烟通知
2015/04/23 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
Redis基本数据类型Set常用操作命令
2022/06/01 Redis
使用scrapy实现增量式爬取方式
2022/06/21 Python