<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<style>
html,
body {
position: relative;
height: 100%;
}

body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}

.swiper-container {
width: 100%;
height: 100%;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

p {
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 80px;
background-color: aqua;
border-radius: 300px;
}
</style>
</head>

<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: aqua;">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0s" style="background-color: yellow;"></p>
</div>
<div class="swiper-slide" style="background-color: yellow;">
<p class="ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s" swiper-animate-delay="0s" style="background-color: salmon;"></p>
</div>
<div class="swiper-slide" style="background-color: salmon;">
<p class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0s" style="background-color: aqua;"></p>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>

</body>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
mousewheelControl : true,
direction: 'vertical',
onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper) {
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>

</html>

Swiper单页网站简单案例（全屏网页）的更多相关文章

  1. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  2. 你应该知道的10个奇特的 HTML5 单页网站

    网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站. 下面是10个令人惊叹的单页 H​​ ...

  3. FullPage.js – 轻松实现全屏滚动（单页网站）效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  4. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  5. Fixed Responsive Nav – 响应式的单页网站导航插件

    Fixed Responsive Nav 是一个响应式的,固定的,触摸友好的单页网站导航插件,响应式导航,流畅的动画滚动.该项目采用渐进增强构建,支持工作在 IE6 及以上版本的浏览器. 你可以给导航 ...

  6. 精品素材：WALK & RIDE 单页网站模板下载

    今天,很高兴能向大家分享一个响应式的,简约风格的 HTML5 单页网站模板.Walk & Ride 这款单页网站模板是现代风格的网页模板,简洁干净,像素完美,特别适合用于推广移动 APP 应用 ...

  7. jquery单页网站导航插件One Page Nav

    这是一个轻量级的jQuery的单页网站导航插件.增加了单击后平滑滚动导航和当你浏览不同的部分时自动选择正确的导航项. changeHash: false, 改变当用户单击导航,就改变changeHas ...

  8. HTML5网站大观：15个精美的 HTML5 单页网站作品欣赏

    HTML5 是现在Web开发领域的热点,更多的开发人员开始使用HTML5来开发交互性强.效果出众的Web应用和游戏.今天,本文收集了15个精美的 HTML5 单页网站作品,让大家感受一下 HTML5 ...

  9. AnjularJs的增删改查(单页网站)

    2016.6.4 学习文献: 你的第一个AngularJS应用:https://segmentfault.com/a/1190000000347412 AngularJS 提交表单的方式:http:/ ...

随机推荐

  1. JavaScript系列-----对象基于哈希存储（<Key，Value>之Value篇） （3）

    JavaScript系列-----Objectj基于哈希存储<Key,Value>之Value 1.问题提出 在JavaScript系列-----Object之基于Hash<Key, ...

  2. ARM开发板链接shell

    1.用网线插入开发板(最好链接路由器) 2.启动开发板(可以用U盘启动) 执行 #run bootusb 3.联网 #ifconfig eth0 up #udhcpc或者#dhclient wan # ...

  3. 菜鸟谈谈C#中的构造函数和析构函数

    本节说明对象的创建.初始化和销毁过程.本节介绍下列主题: l         类构造函数 l         结构构造函数 l         析构函数 类构造函数 本节将讨论三种类构造函数: 类构造 ...

  4. Ubuntu初始化设置

    1.安装chrome sudo apt-get install chromium-browser sudo apt-get install pepperflashplugin-nonfree sudo ...

  5. YII 多表联查 纵表

    A id 与B a.id B id 与C b.id C id 与D c.id 查A读D数据 应用场景: order表 ordergoods表 goods表 merchant加盟商 order 与ord ...

  6. listview相关代码整理

    虽然listview已经慢慢被替代了,  不过还是整理下 , 留作纪念吧 /** * 获取 listview 实际滚动的距离. [ 相对于listview的第一个项目左上角.] * * @return ...

  7. 安卓自定义控件（四）实现自定义Layout

    本来我是不准备写这篇文章的,我实在想不出有什么样奇怪的理由,会去继承ViewGroup然后自定义一个布局,大概是我的项目经验还不够吧,想了好久,想到了这样一个需求: 需求 如图:在项目中经常有一个这样 ...

  8. .net 系列：Expression表达式树、lambda、匿名委托 的使用

    首先定义一个泛型委托类型,如下: public delegate T Function<T>(T a, T b); 实现泛型委托的主体代码,并调用: public static strin ...

  9. 【架构篇】OCP和依赖注入

    描述 本篇文章主要讲解 : (1)OO设计OCP原则: (2)依赖注入引入 (3)依赖注入分析 (4)依赖注入种类 1   内容区 1.1   IOC背景 (1)Ralph E. Johnson &a ...

  10. Android开发过程中使用弱引用解决内存泄露的习惯

    Java虽然有垃圾回收,但是仍然存在内存泄露,比如静态变量.缓存或其他长生命周期的对象引用了其他对象,这些被引用的对象就会长期不能被GC释放,导致内存泄露. 弱引用(WeakReference)是解决 ...