酷! 不同风格页面布局幻灯片特效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 相关文章推荐
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
小程序开发之模态框组件封装
Apr 23 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
php链表用法实例分析
2015/07/09 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
PHP中串行化用法示例
2016/11/16 PHP
php操作mongodb封装类与用法实例
2018/09/01 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
js 深拷贝函数
2008/12/04 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
大学生求职推荐信
2013/11/27 职场文书
库房主管岗位职责
2013/12/31 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
千与千寻观后感
2015/06/04 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android