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闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 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/02/09 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
政工例会汇报材料
2014/08/26 职场文书
中秋节活动总结
2014/08/29 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书