酷! 不同风格页面布局幻灯片特效js实现


Posted in Javascript onFebruary 19, 2021

这是一款效果非常炫酷的不同风格页面布局幻灯片特效。该特效中,通过前后导航按钮来切换幻灯片,每个幻灯片中的图片均为不同的布局效果。

酷! 不同风格页面布局幻灯片特效js实现

该幻灯片特效使用anime.js来制作幻灯片的动画特效,并使用很多CSS3属性,需要最新版本的现代浏览器才能看到效果。对于IE浏览器,前面几种效果可以在IE11及以上的浏览器看到效果,最后一种效果由于IE浏览器不支持SVG clip-path属性,所以是看不到效果的。

使用方法

HTML结构

该幻灯片的基本HTML结构如下:每一个幻灯片都有各自的布局class类,和一个data-layout属性,用于制作各自的动画效果。 

<div class="slideshow"> 
 <div class="slide slide--layout-1" data-layout="layout1"> 
 <div class="slide-imgwrap"> 
 <div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/1.jpg);"></div></div>
 <div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/2.jpg);"></div></div>
 <div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/3.jpg);"></div></div> 
 </div> 
 <div class="slide__title"> 
 <h3 class="slide__title-main">Now or Never</h3> 
 <p class="slide__title-sub">... <a href="#">Read more</a></p> 
 </div> 
 </div><!-- /slide --> 
 <div class="slide slide--layout-2" data-layout="layout2"> 
 <!-- ... -->
 
 </div> 
 <!-- ... --> 
</div><!-- /slideshow -->

CSS样式

下面是其中一个布局的CSS样式: 

/* Layout 1: 3 grid images */
.slide--layout-1 .slide__img { 
 position: absolute; 
 width: calc(50% - 1em); 
} 
 
.slide--layout-1 .slide__img:first-child { 
 left: 0.5em; 
 height: 100%; 
} 
 
.slide--layout-1 .slide__img:nth-child(n+2) { 
 left: calc(50% + 0.5em); 
 height: calc(50% - 0.5em); 
} 
 
.slide--layout-1 .slide__img:nth-child(3) { 
 top: calc(50% + 0.5em);
}

得到的效果如下图所示:

酷! 不同风格页面布局幻灯片特效js实现

JavaScript

每一个幻灯片布局的动画效果定义在js文件中。结构为: [layout name] : { out : {navigating out properties}, in : {navigating in properties} }。可以为进入和离开的幻灯片设置不同的动画效果。下面的代码是第一个布局的示例代码:  

MLSlideshow.prototype.options = { 
 // Starting position. 
 startIdx : 0, 
 // Layout configuration. 
 // [layout name] : { out : {navigating out properties}, in : {navigating in properties} } 
 layoutConfig : { 
 layout1 : {
 out : { 
 translateX : { 
 next: '-100%', 
 prev: '100%' 
 }, 
 rotateZ : { 
 next: function(el, index) { 
 return anime.random(-15, 0); 
 }, 
 prev: function(el, index) { 
 return anime.random(0, 15); 

 } 
 }, 
 opacity : 0,
 duration: 1200, 
 easing : 'easeOutQuint', 
 itemsDelay : 80 
 },
 in : { 
 resetProps : { 
 translateX : {
 next: '100%', 

 prev: '-100%' 
 },
 rotateZ : { 
 next: function(el, index) {
 return anime.random(0, 15);
 }, 
 
 prev: function(el, index) { 
 return anime.random(-15, 0); 
 } 
 }, 
 opacity : 0, 
 }, 
 translateX : '0%',
 rotateZ : 0, 
 opacity : 1,
 duration: 700, 
 easing : 'easeOutQuint', 
 itemsDelay : 80
 
 }
 
 },
 layout2 : { /* ... */ }, 
 layout3 : { /* ... */ }, 
 /* ... */
 
 }
 
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
JavaScript中return false的用法
Mar 12 Javascript
js比较日期大小的方法
May 12 Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
JavaScript模块详解
Dec 18 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
vue src动态加载请求获取图片的方法
Oct 17 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
layui实现三级导航菜单
Jul 26 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
JS+CSS3模拟溢出滚动效果
Aug 12 #Javascript
JS中script标签defer和async属性的区别详解
Aug 12 #Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 #Javascript
很实用的js选项卡切换效果
Aug 12 #Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 #Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 #Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 #Javascript
You might like
我的论坛源代码(一)
2006/10/09 PHP
PHP memcache扩展的三种安装方法
2009/04/26 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
js给页面加style无效果的解决方法
2014/01/20 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python实现远程控制电脑
2019/05/23 Python
python与字符编码问题
2019/05/24 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
django+echart数据动态显示的例子
2019/08/12 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
社区结对共建协议书
2016/03/23 职场文书
年终工作总结范文
2019/06/20 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
Android Rxjava3 使用场景详解
2022/04/07 Java/Android