酷! 不同风格页面布局幻灯片特效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 相关文章推荐
Dom加载让图片加载完再执行的脚本代码
May 15 Javascript
改善用户体验的五款jQuery插件分享
May 22 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
QML实现圆环颜色选择器
Sep 25 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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
239军机修复记
2021/03/02 无线电
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
js 目录列举函数
2008/11/06 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
vue.js 获取当前自定义属性值
2017/06/01 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
跟老齐学Python之数据类型总结
2014/09/24 Python
python使用Tkinter显示网络图片的方法
2015/04/24 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
任意存:BOXFUL
2018/05/21 全球购物
nohup的用法
2012/11/26 面试题
会计毕业生求职简历的自我评价
2013/10/20 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
技术经济专业求职信
2014/09/03 职场文书
干部考察材料范文
2014/12/24 职场文书
三八妇女节慰问信
2015/02/14 职场文书
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL