html/css 滚动到元素位置,显示加载动画

时间: 2020-06-17阅读: 258标签: 加载

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


元素添加初始参数

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

添加初始数据,默认透明度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

  1. 真正的滚动视觉位置 - window.pageYOffset(滚动距离) + windowHeight(窗口高度)
  2. 元素距离顶部的高度 - 这里使用了leftElement.offsetTop + parentOffsetTop,原因是父容器使用了absolute绝对定位。如果是正常布局的话,使用元素当前的位置leftElement.offsetTop即可
  3. 额外添加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" //隐藏动画
}
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9334

NProgress.js页面加载进度条

NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画。NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中。

Vue实现懒加载

什么叫懒加载?就是只有在访问的时候才会进行请求加载,这可以有效提升网站打开的速度,加上这行,就可以做到懒加载↓===括号里的路径改成组件的路径,然后就不需要在上面import了

解决js/css文件缓存,让浏览器去服务器重新加载最新js/css

在引用文件末尾加上一个参数,让浏览器知道这个文件跟上一个文件是不同的,让浏览器去服务器重新加载最新的,在引用的js、jsp、css、html等文件的地址后面加上参数的作用:

使用Flutter实现58同城中的加载动画

在应用中执行耗时操作时,为了避免界面长时间等待造成假死的现象,往往会添加一个加载中的动画来提醒用户,在58同城中也不例外,而且我们并没有使用系统默认的加载动画,而是制作了一个具有58特色的加载动画。

jquery图片懒加载

对于一个有多个图片的网站来说,访问的时候不应该直接加载所有图片,而是应该只将浏览器窗口内的图片进行加载。当滚动的时候,在加载更多的图片,叫做图片的懒加载。

vue-router从2.x升级到4.x, 路由模块按需加载改写方式

直接升级,用原来的代码,会报错Failed to mount component: template or render function not defined,旧的写法;新的写法

页面加载完成事件 -onload的五种写法

在js和jquery使用中,经常使用到页面加载完成后执行某一方法。通过整理,大概是五种方式(其中有的只是书写方式不一样)。使用jQuery的$(function){};document加载完成后就执行方法。

css进度条怎么写?

进度条经常运用于网页,即使我们意识到不是所有的东西都将瞬间被加载完成,这些进度条用于提醒使用者关于网页上具体的任务进程,譬如上传,下载,加载应用程序等。

动态加载图片与脚本

动态加载图片许多方法。第一种方法,随便创建一个块状元素如DIV,把它加入DOM树,然后用CSS设置背景图片。第二种前半部分同第一种,只不过这次用innerHTML加一张图片变成它的子元素。

php的自动加载的使用

在autoload机制引入前,要引用其他文件中的函数和类需使用include/require把文件加载。随着SPL库中的autoload机制以及命名空间的完善,现代化PHP开发鲜少见到以include/require的方式加载类

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广