酷! 不同风格页面布局幻灯片特效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 Validate 正则表达式实用验证代码大全
Aug 23 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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笔记之:AOP的应用
2013/04/24 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
python中字符串类型json操作的注意事项
2017/05/02 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Python内置函数及功能简介汇总
2020/10/13 Python
python递归函数用法详解
2020/10/26 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
企业党员公开承诺书
2014/03/26 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
出国留学担保书
2014/05/20 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
PHP实现两种排课方式
2021/06/26 PHP
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL