让你的网页逼格上升一截—

你还在写页面一次请求所有数据吗？
抱歉，这次先不讲懒加载，也是直接请求所有数据，但是我们的逼格不一样了…
——当你滚动页面时，加载的内容以动画的形式呈现给你——https://www.delac.io/wow/

滚动后：

是不是效果更加吊炸天= =
虽然我觉得没这效果也不错，但是老板要求，以前的自算太傻了，底层的实现也有点偏了…

在正式开始前，希望各位小伙伴别到时候拿着就用，赶项目的例外，时间富裕的能多看看底层原理——小子也正在摸索。

在此有所不足，请多多指教！！！

为了方便大家的观看，先献上代码：
html（）

<!--html-->
<div style="width: 100%;height: 600px;background: green;margin-bottom:20px;"><h1>顶部banner</h1>
</div>
<ul class="move" id="offSetMove"><li><a class="toHash" href="#one">到达1处</a></li><li><a class="toHash" href="#two">到达2处</a></li><li><a class="toHash" href="#three">到达3处</a></li><li><a class="toHash" href="#four">到达4处</a></li><li><a class="toHash" href="#five">到达5处</a></li><li><a class="toHash" href="#six">到达6处</a></li>
</ul>
<div id="one"  class="wow fadeInUp" data-wow-delay="0.1s" style="width: 100%;height: 300px;background: black;"><h1>所有人到这来1</h1>
</div>
<div id="two"  class="wow fadeInUp" data-wow-delay="0.1s" style="width: 100%;height: 300px;background: orange;opacity: 1;"><h1>所有人到这来2</h1>
</div>
<div id="three"  class="wow fadeInUp" data-wow-delay="0.1s"  style="width: 100%;height: 300px;background: red;"><h1>所有人到这来3</h1>
</div>
<div id="four"  class="wow fadeInUp" data-wow-delay="0.1s"  style="width: 100%;height: 300px;background: blue;"><h1>所有人到这来4</h1>
</div>
<div id="five" class="wow fadeInUp" data-wow-delay="0.1s" style="width: 100%;height: 300px;background: orange;opacity: 1;"><h1>所有人到这来5</h1>
</div>
<div id="six" class="wow fadeInUp" data-wow-delay="0.1s" style="width: 100%;height: 300px;background: black;"><h1>所有人到这来6</h1>
</div><div style="width: 100%;height: 600px;background: black;margin-top:20px;"><h1>底部介绍栏</h1>
</div>

css:注意，因为我们是动画滚出，所以为了有更多的效果，可以使用animate.css增加效果。以上html我统一使用了fadeInUp效果。

 <style>ul{position: absolute;right: 30px;top: 20px;}ul li{color:white;float: left;margin-right: 30px;list-style:none;}h1{color: white;}</style><link rel="stylesheet" href="css/animate/animate.min.css">

至于js的使用，更方便了…

<script src="js/wow/wow.js"></script>
<script>new WOW().init();
</script>

所需要注意的是在html中，需要家动画效果的标签内容，需要附加类名

wow

及相应的动画名：

//如：
fadeInUp

以及附加属性：

data-wow-delay="0.1s"
//一眼能看出和时间有关，没错，是动画时间....

以上就实现了wow.js功能。

再次补充一下：关于锚链接跳转的小技巧记录：
以下为我平时写的：

$("document").on("click",'.toHash',function () {var target = $(this.hash);$('html, body').animate({scrollTop: target.offset().top}, 1000);return false;})

然后新get的：

//使用此处代码需要新引入js——easing.js——配合easeInOutExpo使用
$('.toHash').on('click', function() {if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {var target = $(this.hash);if (target.length) {var top_space = 0;if ($('#header').length) {top_space = $('#header').outerHeight();if( ! $('#header').hasClass('header-fixed') ) {top_space = top_space - 20;}}$('html, body').animate({scrollTop: target.offset().top - top_space}, 1000, 'easeInOutExpo');return false;}}});

让你的网页逼格上升一截——wow.js的引入相关推荐

多功能流媒体播放器实现网页无插件直播之EasyPlayer.js如何实现播放完自动循环播放
EasyPlayer-Android播放器是一款可针对RTSP.RTMP.RTSP&RTMP协议进行过优化的流媒体播放器,其中我们引以为傲的两个技术优势就是起播速度快和播放延迟低.最近我们遇到 ...
HTML5七夕情人节表白网页(圣诞雪花飘落) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤圣诞雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序 ...
vue3使用wow.js实现网页动画
实现效果效果就是类似于网页各个板块的加载动画,当你控制滚动条滑动到某个板块进行显示时,当前在可是范围内的板块会根据设定好的动画以及动画时间显示出来. WoW.JS官网注意点:配合animate.c ...
web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计...
HTML期末大作业 ~ 大学生旅游官网网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计~ 临近期末, 你还在为HTML网页设 ...
网页设计作业成品 HTML+CSS+JS大作业——汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
HTML+CSS+JS大作业--汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作文章目录 HTML+CSS+JS大作业--汽车保险销售综合商城(4 ...
动态效果html wow,WOW.js轻松让网页实现动画效果
给大家分享一个小插件,名字叫做WOW.js,这个插件是基于animate.css,animate.css是现在很流行的css动画库.这款插件作用很简单,可以及时实现网页中任意部分动画切入的效果.但是有 ...
使用wow.js让网页“动起来”
wow.js 可以实现网页滑动到元素时,产生动画效果,但是目前只支持触发一次(页面不刷新的的情况下). 引入animate.css和wow.js <link rel="styleshe ...
网页两侧滚动窗网页两侧飘窗的简单实用js
网页两侧滚动窗网页两侧飘窗的简单实用js 之前头疼这个js怎么写,后来搞了这个,超级实用,只要把下面的代码放在需要设置的网页<body>中就ok了,还方便维护,可以设置关闭 <!- ...

让你的网页逼格上升一截——wow.js的引入

让你的网页逼格上升一截——wow.js的引入相关推荐

最新文章

热门文章