酷! 不同风格页面布局幻灯片特效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 相关文章推荐
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
js charAt的使用示例
Feb 18 Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
去除html代码里面的script正则方法
May 19 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
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
用PHP读注册表
2006/10/09 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
简明json介绍
2008/09/28 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python根据服务获取端口号的方法
2019/09/25 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
高三地理教学反思
2014/01/11 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
教师党员一句话承诺
2014/03/28 职场文书
数学教育专业求职信
2014/07/22 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers