<!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. js贪吃蛇-简单版

    分享个用原生js写的贪吃蛇,最近在学java,按照当年写的 js的思路,转换成java,换汤不换药 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  2. C#实现中国身份证验证问题

    C#中国身份证验证,包括省份验证和校验码验证,符合GB11643-1999标准...   今天写的 C#中国身份证验证,包括省份验证和校验码验证,符合GB11643-1999标准... 理论部分: 1 ...

  3. Java中swap()实现

    Java中swap()实现 1.今天可爱的谭老师发了一道题目,使用java写方法交换Integer类型数据,而且入参固定了,题目请下图: 入参固定的话,当时想到的是重新定义一个自己的Integer类型 ...

  4. [转载] Java集合框架之小结

    转载自http://jiangzhengjun.iteye.com/blog/553191 1.Java容器类库的简化图,下面是集合类库更加完备的图.包括抽象类和遗留构件(不包括Queue的实现): ...

  5. Oracle单行函数基础运用

    单行函数 整个SQL的精髓:select语句+单行函数(背) 字符串函数 常用的处理字符串的函数有如下: No. 函数名 含义 1 UPPER(c1)  upper 将字符串全部转为大写 2 LOWE ...

  6. 基于 HTML5 WebGL 的 3D “弹力”布局

    分子力(molecular force),又称分子间作用力.范得瓦耳斯力,是指分子间的相互作用.当二分子相距较远时,主要表现为吸引力,这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化 ...

  7. RedHat升级Python到2.7.6

    今天本来想研究一下Python  paramiko模块,安装安装 paramiko-1.10.1.tar.gz的时候报错,!看了一下虚拟机RedHat中的python,发现还是原生的2.4.3,所以决 ...

  8. Gitlab自动触发Jenkins构建打包

    一.目的 在部门的测试环境中,开发人员一旦向gitlab仓库提交成功代码,gitlab就会自动触发jenkins构建项目.当然在构建后还可以添加项目部署或者自动化测试的脚本.这里只针对测试环境. 二. ...

  9. 自学python笔记（一）

    一   简介:Python是著名的"龟叔"Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言.其他的就不说了..... python是 ...

  10. NTP时间同步 服务端 客户端 自动化安装配置

    NTP时间同步 服务端 客户端 自动化安装配置 原创内容 http://www.cnblogs.com/elvi/p/7657994.html #!/bin/sh #运行环境 centos6.cent ...