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动画效果之animation的常用样式
Mar 09 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
CSS3 Tab动画实例之背景切换动态效果
Aug 23 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
如何过滤高亮显示非法字符
2006/10/09 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
javascript学习网址备忘
2007/05/29 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
javascript 获取浏览器版本
2015/01/21 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
javascript数组排序汇总
2015/07/07 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Sanic框架Cookies操作示例
2018/07/17 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
什么是封装
2013/03/26 面试题
党员目标管理责任书
2014/07/25 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
入党群众意见范文
2015/06/02 职场文书
Python基础知识之变量的详解
2021/04/14 Python