swiper做宣传画册——swiper动画
swiper做动画效果进行翻页,主要用于宣传推广,其实网上有很多这样的平台,像易企秀、兔展等……具体效果图如下:
这个效果即将被替换,所以,先做个记录吧。
该效果的实现主要使用了swiper插件,先引入关于swiper的几个文件:
//这个是swiper的css文件
<link href="css/swiperAnimate/swiper.min.css" rel="stylesheet">//这个是关于swiper动画的css文件
<link href="css/swiperAnimate/animate.min.css" rel="stylesheet">//以下两个文件不引入也可以实现动画效果
//这个是swiper的JS文件
<script src="js/swiperAnimate/swiper.min.js"></script>//这个是关于swiper动画的JS文件
<script src="js/swiperAnimate/swiper.animate.min.js"></script>
具体的下载网址:下载Swiper
把图片替换掉,操纵动画效果的主要是在animate.min.css里,具体使用说明参考Swiper Animate使用方法,具体代码如下:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="format-detection" content="telephone=no"><meta name="author" content="WELHOME direct purchase Team"><meta name="copyright" content="WELHOME direct purchase"><title>${message("团长招募")} - WELHOME direct purchase</title><link href="css/swiperAnimate/swiper.min.css" rel="stylesheet"><link href="swiperAnimate/animate.min.css" rel="stylesheet"><script src="swiperAnimate/swiper.min.js"></script><script src="swiperAnimate/swiper.animate.min.js"></script><style type="text/css">.swiper-container {width: 100%;height: 100%;}.swiper-pagination-bullet {width: 6px;height: 6px;background: #333;opacity: .4;}.swiper-pagination-bullet-active {opacity: 1;}@-webkit-keyframes start {0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}60% {opacity: 1;-webkit-transform: translate(0,0);}100% {opacity: 0;-webkit-transform: translate(0,-8px);}}@-moz-keyframes start {0%,30% {opacity: 0;-moz-transform: translate(0,10px);}60% {opacity: 1;-moz-transform: translate(0,0);}100% {opacity: 0;-moz-transform: translate(0,-8px);}}@keyframes start {0%,30% {opacity: 0;transform: translate(0,10px);}60% {opacity: 1;transform: translate(0,0);}100% {opacity: 0;transform: translate(0,-8px);}}#array{position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;}.join-img{width: 80px;height: 80px;position: fixed;right: 2%;bottom: 10%;z-index: 9;}</style>
</head>
<body><main class="center-block house-box" ><div class="swiper-container"><div class="swiper-wrapper"><!-------------slide1-----------------><section class="swiper-slide swiper-slide1"><img src="swiperAnimate/bonus_01.png" class="ani resize" style="width:320px;left:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s" > <img src="swiperAnimate/002.png" class="ani resize" style="width:320px;left:0px;z-index:1;" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="2.5s" ><img src="swiperAnimate/003.png" class="ani resize" style="width:320px;left:0px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="4s" ><img src="swiperAnimate/bonus_02.png" class="ani resize center-block" style="width:130px;left:0px;z-index:3;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" > </section><!---------------slide2--------------> <section class="swiper-slide swiper-slide2"><img src="swiperAnimate/bonus_01.png" class="ani resize" style="width:320px;left:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0s" > <img src="swiperAnimate/004.png" class="ani resize center-block" style="width:130px;left:0px;z-index:5; " swiper-animate-effect="bounce" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s" > <img src="swiperAnimate/006.png" class="ani resize center-block" style="width:222px;left:0px;z-index:3;" swiper-animate-effect="zoomInDown" swiper-animate-duration="2.5s" swiper-animate-delay="1s" ><img src="swiperAnimate/007.png" class="ani resize center-block" style="width:166px;left:0px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="2s" > </section><!----------------slide3--------------><section class="swiper-slide swiper-slide3"><img src="swiperAnimate/bonus_01.png" class="ani resize" style="width:320px;left:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" > <img src="swiperAnimate/008-2.png" class="ani resize center-block" style="width:130px;left:0px;z-index:5; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="1s" > <img src="swiperAnimate/009.png" class="ani resize center-block" style="width:250px;left:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1s" > <img src="swiperAnimate/008.png" class="ani resize center-block" style="width:160px;left:0px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" > </section><!-------------slide4-----------------><section class="swiper-slide swiper-slide4"><img src="swiperAnimate/bonus_01.png" class="ani resize" style="width:320px;left:0px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" > <img src="swiperAnimate/011.png" class="ani resize center-block" style="width:130px;left:0;z-index:2;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" > <img src="swiperAnimate/010.png" class="ani resize center-block" style="width:280px;left:0;z-index:2;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" > <img src="swiperAnimate/012.png" class="ani resize center-block" style="width:280px;left:0px;z-index:1;" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" ></section></div><img src="swiperAnimate/arrow.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize"> <div class="swiper-pagination"></div>
</div></main>
</body>
</html><script> scaleW=window.innerWidth/320;
scaleH=window.innerHeight/480;
var resizes = document.querySelectorAll('.resize');for (var j=0; j<resizes.length; j++) {resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px';resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px';resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px';resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; }var mySwiper = new Swiper ('.swiper-container', {direction : 'vertical',pagination: '.swiper-pagination',//virtualTranslate : true,mousewheelControl : true,onInit: function(swiper){swiperAnimateCache(swiper);swiperAnimate(swiper);},onSlideChangeEnd: function(swiper){swiperAnimate(swiper);},onTransitionEnd: function(swiper){swiperAnimate(swiper);},watchSlidesProgress: true,onProgress: function(swiper){for (var i = 0; i < swiper.slides.length; i++){var slide = swiper.slides[i];var progress = slide.progress; //progress就是运动的百分比var translate = progress*swiper.height/4; scale = 1 - Math.min(Math.abs(progress * 0.5), 1);var opacity = 1 - Math.min(Math.abs(progress/2),0.5);slide.style.opacity = opacity;es = slide.style;es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';}},onSetTransition: function(swiper, speed) {for (var i = 0; i < swiper.slides.length; i++){es = swiper.slides[i].style;es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';}},}) </script>
swiper做宣传画册——swiper动画相关推荐
- flutter CustomScrollView中使用Swiper做轮播图问题
有朋友问我CustomScrollView中使用Swiper做轮播图问题 以前没这么用过,也是才发现CustomScrollView 与 Swiper 冲突,直接报错. 网友说修改源码,试过不能用,但 ...
- 毕业设计计算机画册怎么做,问题:我们的毕业设计是制作一个宣传画册,那怎样才算是一个好的宣传画册呢...
问题:我们的毕业设计是制作一个宣传画册,那怎样才算是一个好的宣传画册呢 发表日期:2016-03-29 20:45:02 浏览:338 分享给朋友: 导语专业顾问回答:热心朋友回答:宣传画册设计基本原 ...
- 用css3做一个求婚小动画
概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...
- 不懂设计,做宣传单彩页可以用那些软件?
近期很多开餐饮店做生意的朋友都想做宣传彩页,但是不放心别人给他做,所以想自己设计自己做,然后文件拿去直接印刷就可以了,询问我做宣传彩页需要什么软件? 小编在这里分享一下给朋友做宣传单彩页常用的2个软件 ...
- html如何引入swiper,vue-cli webpack 引入swiper的操作方法
1:下载需要 swiper 的js文件和css文件 http://www.swiper.com.cn/ 2:下载好swiper相关的js和css,js放在static目录下,css放在assets目录 ...
- html5 swiper 菜鸟,前端插件swiper使用新手教程
1.引入swiper.min.js和swiper.min.css两个文件,文件百度网盘下载地址链接:https://pan.baidu.com/s/1KwIzPfe9hFpSiMr5GqAWxw 提取 ...
- Swiper学习之一---入门:swiper相关文件、swiper代码结构和样式、初始化Swiper
呼呼,连着更新了好长时间的jQuery的博客了,呃呃~打个广告的,有需要的小伙伴可以点击这个链接jQuery专栏去看一下,不需要的可以自动忽略的哦,哈哈. 然后就是从今天开始我们一起来看看Swiper ...
- 工业品器械设备怎么做宣传和推广?
工业品器械设备怎么做宣传和推广?工业品器械设备有哪些网络推广渠道效果比较好? 有人推荐b2b,这个是现在逐渐被淘汰的平台了.工业产品.器械设备,之前帮很多人推过,一个月也能成交50左右新用户. 互联网 ...
- 中国好生意 经典论述:哈林是来主持的,刘欢是来开家长会的,那英是来唠嗑的,杨坤是来做宣传的,而......
中国好生意 经典论述 :哈林是来主持的,刘欢是来开家长会的,那英是来唠嗑的,杨坤是来做宣传的,而华少就是来卖凉茶的 //附 学员总结 哈林出了败笔,吴莫愁成了笑柄,好声音成了鸟生意.最后竟然选了一个老 ...
最新文章
- 论新时代软件测试人员的工作之道(四)自动化测试之单元及集成测试
- 使用Apache Commons Configuration读取配置信息
- 企业网络推广专员浅析如何完善网站维护企业网络推广吸引用户浏览
- 全球及中国低温纳米定位器行业发展趋势分析与风险评估报告2021-2027年版
- (转)Javascript 面向对象编程(一):封装
- LeetCode 950. 按递增顺序显示卡牌(deque)
- VC创建DLL动态链接库及其调用
- host 端口_如何让多端口网站用一个nginx进行反向代理实际场景分析
- 零基础入门深度学习 | 第一章:感知器
- CPU Cache Line伪共享问题的总结和分析
- php7 php.ini 没有mysql_php7的配置文件里没有mysql.default_socket吗?
- loading窗口动画 web_分享web前端七款HTML5 Loading动画特效集锦
- 牛客 小a与星际探索 bfs
- WinMM.dll 函数汇总
- python字典实现好友管理系统简易版
- Lobooi个人作业:阅读与准备作业
- java自制语音识别,老司机搞定java使用语音识别将文字转换成语音
- 【NOIP2015模拟10.28B组】终章-剑之魂
- scp使用 及 安装
- 关于联想拯救者Y7000/Y7000P电源显示0%的问题及解决办法