阴阳师宣传页轮播特效

2023-10-20 15:40
文章标签 特效 宣传 轮播 阴阳师

本文主要是介绍阴阳师宣传页轮播特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

阴阳师宣传页轮播特效

轮播图效果

最近用js做了一个阴阳师的特效轮播图，代码写的有点菜，但也是写出来了，分享一下，勿喷，哈哈！
这个轮播图的主要特点是
1.以当前展示的图片为中心，当前图片转动角度为0 ，其他图片向两边依次递增递减30deg，并且translate3d Z轴方向的偏移量依次从中间向两边递减
2.当前现实的图片为高亮显示 其他为暗色
3.过渡时间 transition-duration 的控制 当轮播图到最后一个图片时。需要将过渡时间变为0，视图瞬间转为第一张图片；当然为了防止冲突，我让图片重复了一遍，真正需要轮播的图片只有4张，前面有四张重复，后面有一张重复(有点难解释，就是跟无缝滚动原理一样) ，这样但他滚动到倒数第二张图片时，即原本的倒数第一张，让他回到第一张图片去
HTML代码

//最外层盒子<div class="swiper-container-3d feature-swiper">//里层盒子 控制视图位置<div class="swiper-wrapper" style="transform: translate3d(-3042px, 0px, 0px); "><div class="swiper-slide " data-index='0' style="transform: translate3d(0px,0px,-1140px) rotateX(0deg)  rotateY(120deg);"><img src="image/旋转1.jpg" alt="游戏特色"><div class="cover"></div></div><div class="swiper-slide  " data-index='1' style="transform: translate3d(0px, 0px, -855px) rotateX(0deg) rotateY(90deg); " ><img src="image/旋转2.jpg" alt="游戏特色"><div class="cover"></div></div><div class="swiper-slide" data-index='2' style="transform: translate3d(0px, 0px, -570px) rotateX(0deg) rotateY(60deg);  " ><img src="image/旋转3.jpg" alt="游戏特色"><div class="cover"></div></div><div class="swiper-slide  " data-index='3' style="transform: translate3d(0px, 0px, -285px) rotateX(0deg) rotateY(30deg);  " ><img src="image/旋转4.jpg" alt="游戏特色"><div class="cover"></div></div><div class="swiper-slide swiper-slide-active" data-index='0' style="transform: translate3d(0px,0px,0px) rotateX(0deg) rotateY(0deg);"><img src="image/旋转1.jpg" alt="游戏特色"><div class="cover"></div></div><div class="swiper-slide " data-index='1' style="transform: translate3d(0px, 0px, -285px) rotateX(0deg) rotateY(-30deg);  " ><img src="image/旋转2.jpg" alt="游戏特色"><div class="cover"></div></div><div class="swiper-slide" data-index='2' style="transform: translate3d(0px, 0px, -570px) rotateX(0deg) rotateY(-60deg);  " ><img src="image/旋转3.jpg" alt="游戏特色"><div class="cover"></div></div><div class="swiper-slide " data-index='3' style="transform: translate3d(0px, 0px, -855px) rotateX(0deg) rotateY(-90deg);  " ><img src="image/旋转4.jpg" alt="游戏特色"><div class="cover"></div></div><div class="swiper-slide " data-index='0' style="transform: translate3d(0px,0px,-1140px) rotateX(0deg) rotateY(-120deg); "><img src="image/旋转1.jpg" alt="游戏特色"><div class="cover"></div></div></div></div>//左右按钮<div class="prev swiper-button-prev"></div><div class="next swiper-button-next"></div>

css代码

.swiper-container-3d {perspective : 1200px;webkit-perspective: 1200px;-moz-perspective: 1200px;-o-perspective: 1200px;position: relative;z-index: 1;
}
.swiper-wrapper {position: relative;width: 100%;height: 100%;z-index: 1;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;-ms-transition-property: -ms-transform;transition-property: transform;
}.feature-swiper .swiper-slide {width: 816px;height: 613px;position: relative;
}
.swiper-container-3d .swiper-slide ,.swiper-container-3d .swiper-wrapper {-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transform-style: preserve-3d;
}
.feature-swiper .swiper-slide img {width: 810px;height: 607px;position: relative;border: 3px solid #cbc08e;
}
/*到当前图片时，当前图片盒子的class为 swiper-slide-active 让图片遮罩消失*/
.feature-swiper .swiper-slide.swiper-slide-active .cover {display: none;
}
/*遮罩*/.feature-swiper .swiper-slide .cover {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #000;opacity: 0.5;cursor: pointer;
}.prev:hover ,.part03 .next:hover {opacity: .8;
}.prev {background: url("../image/左箭头.png") no-repeat center;left: 20px;z-index: 10;
}.prev ,.next {width: 43px;height: 77px;position: absolute;top: 50%;margin-top: -10px;
}.next {background: url("../image/右箭头.png") no-repeat center;right: 20px;z-index: 10;
}

js部分

window.addEventListener('load',function () {
//封装一下选择器，比较方便function $ (name){return document.querySelector(name);}var swiper_wrapper = $('.swiper-wrapper');var right_btn = $('.swiper-button-next');var left_btn = $('.swiper-button-prev');var width = $('.swiper-slide').offsetWidth;var lunbo_num=4;var translate = 0;var lunbo_flag = true;var swiper_slides = document.querySelectorAll('.swiper-slide');//右按钮点击事件right_btn.addEventListener('click',function () {if(lunbo_flag==true){// 防止轮播图连续点击出现错误lunbo_flag=false;translate = -594-(lunbo_num)*width;console.log(translate);lunbo_num++;swiper_wrapper.style.transitionDuration = '300ms';for(var j=0; j< swiper_slides.length;j++){swiper_slides[j].style.transitionDuration = '300ms';}roll();swiper_wrapper.style.transform='translate3d('+translate+'px,0px,0px)';}})left_btn.addEventListener('click',function () {if(lunbo_flag==true) {lunbo_flag=false;translate = -594 - (lunbo_num - 2) * width;console.log(222);lunbo_num--;for (var j = 0; j < swiper_slides.length; j++) {swiper_slides[j].style.transitionDuration = '300ms';}roll();swiper_wrapper.style.transform = 'translate3d(' + translate + 'px,0px,0px)';swiper_wrapper.style.transitionDuration = '300ms';}})
// 为每个图片盒子加上过渡完成事件 让其能够无缝连接 for(var j=0; j< swiper_slides.length;j++){swiper_slides[j].addEventListener('transitionend',function (e) {lunbo_flag= true;var flag = true;if(lunbo_num==swiper_slides.length-2&&flag){flag=false;lunbo_num=3;swiper_wrapper.style.transitionDuration = '';for(var j=0; j< swiper_slides.length;j++){swiper_slides[j].style.transitionDuration = '';}translate = -594-(lunbo_num-1)*width;swiper_wrapper.style.transform='translate3d('+translate+'px,0px,0px)';roll();}else if(lunbo_num==2&&flag){flag = false;lunbo_num =6;swiper_wrapper.style.transitionDuration = '';for(var j=0; j< swiper_slides.length;j++){swiper_slides[j].style.transitionDuration = '';}translate = -594 - (lunbo_num - 1) * width;swiper_wrapper.style.transform='translate3d('+translate+'px,0px,0px)';roll();}})}
//这个函数的作用就是滚动的时候带动所有transform属性的变化。
//因为转到一张图上 其他图的旋转角度也要变化function roll() {var translateZ  =0  ;var rotateY = 0;for(var i=lunbo_num; i< swiper_slides.length; i++){translateZ =- (i-lunbo_num)*285;rotateY = -(i-lunbo_num)*30;swiper_slides[i].style.transform= 'translate3d(0,0,'+translateZ+'px) rotateY('+rotateY+'deg) rotateX(0deg)';for(var j=0; j< swiper_slides.length;j++){swiper_slides[j].className= 'swiper-slide';}swiper_slides[lunbo_num].className= 'swiper-slide swiper-slide-active';}for(var j=0; j<lunbo_num; j++){translateZ = -(lunbo_num-j)*285;rotateY = (lunbo_num - j)*30;swiper_slides[j].style.transform= 'translate3d(0,0,'+translateZ+'px) rotateY('+rotateY+'deg) rotateX(0deg)';}}
})

这篇关于阴阳师宣传页轮播特效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/248040。

相关文章

『功能项目』战士的平A特效【35】

『功能项目』战士的平A特效【35】

我们打开上一篇34武器的切换实例的项目， 本章要做的事情是在战士的每次按A键时在指定位置生成一个平A特效 首先将之前下载的技能拖拽至场景中 完全解压缩后重命名为AEffect 拖拽至预制体文件夹 进入主角动画的战士动画层级 双击第一次攻击 选择Animation 创建事件 创建的动画事件帧放在攻击动画挥剑指定处 命名为PerpetualAtt
阅读更多...
（入门篇）JavaScript 网页设计案例浅析-简单的交互式图片轮播

（入门篇）JavaScript 网页设计案例浅析-简单的交互式图片轮播

网页设计已经成为了每个前端开发者的必备技能，而 JavaScript 作为前端三大基础之一，更是为网页赋予了互动性和动态效果。本篇文章将通过一个简单的 JavaScript 案例，带你了解网页设计中的一些常见技巧和技术原理。今天就说一说一个常见的图片轮播效果。相信大家在各类电商网站、个人博客或者展示页面中，都看到过这种轮播图。它的核心功能是展示多张图片，并且用户可以通过点击按钮，左右切换图片。
阅读更多...
第49课 Scratch入门篇：骇客任务背景特效

第49课 Scratch入门篇：骇客任务背景特效

骇客任务背景特效 故事背景：   骇客帝国特色背景在黑色中慢慢滚动着！ 程序原理：  1 、 角色的设计技巧  2 、克隆体的应用及特效的使用 开始编程   1、使用 黑色的背景： ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7d74c872f06b4d9fbc88aecee634b074.png#pic_center)   2
阅读更多...
【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】

【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程酒吧一群美女车展模特大屏幕视频改字AE模板修改文字特效广软件告生成神器素材祝福玩法AE模板工程 怎么如何做的【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤： 安装AE软件 下载AE模板 把AE模板导入AE软件 修改图片或文字 渲染出视频
阅读更多...
【生日视频制作】劳斯莱斯库里南中控改名软件AE模板修改文字软件生成器教程特效素材【AE模板】

【生日视频制作】劳斯莱斯库里南中控改名软件AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程豪车劳斯莱斯库里南中控改名软件AE模板修改文字特效广告生成神器素材祝福玩法AE模板工程 怎么如何做的【生日视频制作】劳斯莱斯库里南中控改名软件AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤： 下载AE模板 安装AE软件 把AE模板导入AE软件 修改图片或文字 渲染出视频
阅读更多...
JavaScript练手小技巧：利用鼠标滚轮控制图片轮播

JavaScript练手小技巧：利用鼠标滚轮控制图片轮播

近日，在浏览网站的时候，发现了一个有意思的效果：一个图片轮播，通过上下滚动鼠标滚轮控制图片的上下切换。 于是就有了自己做一个的想法，顺带复习下鼠标滚轮事件。 鼠标滚轮事件，参考这篇文章：鼠标滚轮事件-CSDN博客 一、HTML和CSS 无论怎么样的滚动，首先要制作图片轮播的结构和样式。 HTML： <div class="box" id="box"><ul class="list" i
阅读更多...
collectionView 无限轮播图

collectionView 无限轮播图

拿一组4张的轮播图作为例子 思路主要是 1. 拿到一组图片后, 把绿色图1和绿色图4多复制出来一份, 把红色图1(复制的图1)放在最后, 红色图4(复制的绿色图4)放在首位, 现在一共是6张图. 2. 左滑从绿色图1到红色图1时,就迅速把collectionView的contentoffset 设置到图1的位置. 3.右滑时,到红色图4就把collectionView的frame设置到绿色图
阅读更多...
印度再现超级大片，豪华阵容加顶级特效

印度再现超级大片，豪华阵容加顶级特效

最近，印度影坛再次掀起了风潮，一部名为《毗湿奴降临》的神话大片强势登陆各大影院，上映首周票房就飙升至105亿卢比，成功占据了票房榜首的位置。之后，这部电影也在北美上映，海外市场的表现同样不俗，收获了相当亮眼的票房成绩。作为一部印度神话科幻大片，《毗湿奴降临》不仅在本土大火，在国际市场上也引发了不小的关注。 《毗湿奴降临》由印度著名导演纳格·阿什温执导，卡司阵容极其豪华，集结了迪皮卡·帕度柯妮
阅读更多...
【生日视频制作】海上绿色摩托艇汽车艇车身AE模板修改文字软件生成器教程特效素材【AE模板】

【生日视频制作】海上绿色摩托艇汽车艇车身AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程海上绿色摩托艇汽车艇车身AE模板修改文字特效广软件告生成神器素材祝福玩法AE模板替换工程 怎么如何做的【生日视频制作】海上绿色摩托艇汽车艇车身AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤： 安装AE软件 下载AE模板 把AE模板导入AE软件 修改图片或文字 渲染出视频
阅读更多...
原生js实现轮播图-setInterval, setTimeout

原生js实现轮播图-setInterval, setTimeout

原生js实现轮播图-setInterval, setTimeout 目录 文章目录 前言代码实现`setTimeout`和递归实现`setInterval` 效果展示 前言 利用原生js实现轮播图代码复制可用 代码实现 setTimeout和递归实现 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2