Swiper视差效果案例代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>swiper测试</title>
<link rel="stylesheet" href="./swiper.min.css">
<link rel="stylesheet" href="./animate.min.css">
<style type="text/css">
* {
margin: 0;
padding: 0
}
html, body {
position: relative;
height: 100%;
}
.swiper-slide{
text-align: center;
font-size: 18px;
color: red;
width: 100%;
height: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
display: flex;
justify-content: center;
align-items: center;
}
#Swiper-one{
width: 100%;
height: 300px;
overflow-y: hidden;
}
.back-img{
background-image: url("03.jpg");
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="swiper-container" id="Swiper-one">
<div class="back-img" data-swiper-parallax="-23%" data-swiper-parallax-duration="300"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp">内容1</p>
</div>
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInLeft">内容2</p>
</div>
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInDown">内容3</p>
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
<script src="jquery.min.js"></script>
<script src="./swiper.min.js"></script>
<script src="./swiper.animate.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
parallax : true,
keyboard: {
enabled: true,
},
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
}
}
})
</script>
</body>
</html>
.
相关推荐
"jQuery + Swiper.js 幻灯片图片视差滚动轮播特效"就是一种常用的技术，它结合了jQuery库的便捷性和Swiper.js组件的强大功能，为用户提供了一种富有层次感和动态视觉效果的图片展示方式。 首先，我们来了解一下**...
在本示例中，"swiper轮播图demo"是一个展示如何使用Swiper实现一屏显示三张图片的场景，其中中间图片放大，而两边的图片则缩小，以增强视觉效果。这种设计常见于电商网站、产品展示页面等，能够吸引用户的注意力并...
Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的...Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
Swiper的灵活性和易用性使其成为HTML5开发中的热门选择，无论你是新手还是经验丰富的开发者，都能快速上手并创造出引人入胜的滑动效果。在2.7.6版本中，尽管可能缺少一些新特性，但对于基础的轮播需求，它依然足够...
同时，Swiper社区还提供了大量插件和扩展，如3D视差效果、自适应布局等，帮助你打造出更具吸引力的网页交互体验。在实践中，不断探索和研究Swiper的API文档，将有助于你更好地利用这一强大的轮播组件。
在"Swiper-3.0.6"的DEMO中，你可能会看到各种应用场景，例如产品展示、幻灯片、菜单导航等，通过查看和分析这些DEMO，开发者可以更好地理解和掌握如何在自己的项目中应用Swiper，实现各种酷炫的滑动效果。同时，DEMO...
本Demo是基于Swiper框架，模仿其官方网站的效果进行制作，旨在展示Swiper的多种功能和应用场景。 Swiper的核心特性包括： 1. **触摸滑动**：Swiper支持触屏设备，用户可以通过手指滑动来切换幻灯片，提供流畅的...
这个"swiper4-animate-demo.zip"压缩包包含了一个使用Swiper4实现动画效果的示例项目。Swiper4以其灵活性、高性能和丰富的特性而受到开发者们的欢迎，它支持触摸滑动、多设备兼容性，并且提供了大量的动画选项来增强...
【标题】"swiperdemo.zip" 是一个包含有关“VueAwesomeSwiper”组件的示例项目的压缩包文件。这个组件是专门为Vue.js框架设计的一个轮播插件，它基于知名的Swiper库进行了封装，使得在Vue应用中实现各种复杂的轮播...
2018年03月20日，项目中要实现一个比较有意思的轮播效果（这个页面要实现好几个轮播），[线上地址](http://http://www.risfond.com/bdm)，Swiper一直用的很顺手，于是继续用Swiper，效果图如下。实际效果一点都不...
在"swiper凸显效果"这个主题中，我们主要关注的是如何利用Swiper实现一种特殊的视觉效果，即中间部分正常显示，而其他部分则呈现为灰色。这种效果可以增加用户的注意力，引导他们专注于当前展示的内容。接下来，我们...
Swiper 是一款流行的开源JavaScript库，常用于创建滑动效果，如轮播图、产品...总之，Swiper是一个强大的滑动组件，通过学习和实践Swiper-master中的Demo，开发者可以掌握创建各种滑动效果的技巧，提升网页的用户体验。
在"swiper轮播效果代码"这个主题中，我们将深入探讨如何使用Swiper实现一个高效的轮播效果。 首先，我们需要了解Swiper的基本结构。一个简单的Swiper实例通常包括HTML布局、CSS样式和JavaScript配置。HTML部分主要...
微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信...
在 Vue Swiper demo 中，我们首先需要安装 Swiper 相关的依赖。这通常通过 npm 或 yarn 完成，命令如下： ```bash npm install vue-awesome-swiper --save # 或者 yarn add vue-awesome-swiper ``` 安装完成后，在 ...
Swiper 是一款强大的触摸滑动插件，常用于创建轮播图、卡片切换等效果，尤其在移动设备上表现出色。在本示例中，我们将深入探讨如何利用 Swiper3 实现一个具有卡片效果的 banner。 Swiper3 是 Swiper 系列的第三个...
7、animateControl 不与swiper结合时，可对网页中的其它元素添加动画效果，并进行控制。 8、能够让不懂JS代码的人，经过简单的学习，就能快速的制作HTML5+CSS3动态微网页。 9、相较于上一个版本，在 v1.0.3 中对整个...
editorjs.io-demo项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build整理和修复文件npm run lint自定义配置请参阅。
方案：查找了下发现使用swiper的切换效果coverflowEffect可以实现 1.coverflow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式 2.coverflow的属性： rotate：slide做3d旋转时Y轴的旋转角度。默认50...
Swiper 是一款流行的JavaScript轮播库，用于创建滑动效果，如轮播图、滑动菜单等。在本文中，我们将深入探讨如何使用Swiper来实现一个特定的效果：当轮播到某一张图片时，该图片会放大显示，类似于芒果TV或货拉拉...