【前言】
之前总结过了fullPage.js的用法,但全屏翻滚经常配合绚丽的动画才显得有品位一些,所以接下来总结下fullPage翻页的动画效果
有的页面向下滚动的时候,有点元素会产生一些动画效果,这些动画多数是通过css3来实现的,而由于是用css3的,所以Ie8以下的浏览器多数不支持,这时我们可以写hack,或者直接忽略这些浏览器
可以利用fullPage.js和Animation.css来实现“滚动”动画效果,也就是用CSS3执行动画。除此之外还有另外一种方法即jQuery animate()动画,这个我在后面文章再做介绍
【正文】
接下来讲解下,利用fullPage.js和animate.css,如何实现基于滚动的动画效果
我们的页面由三个部分组成,每一部分都填满页面(感谢fullPage)。 用户滚动鼠标,页面即会跳到下一个部分(section )。或者,通过右边的分页链接,也可实现导航。 每次当我们滚动或导航时,都会触发一些动画,比如:把图像带到某个位置
【一】先来说明需要哪些步骤来触发动画
需要利用fullPage提供的回调函数
在我们的例子中,更加具体地说,我们想要使第二、三部分实现动画效果,所以我们会使用onLeave回调函数。 如果我们想要使第一 部分“动起来”,我们可以使用回调函数afterLoad。 同样的方式,为了使slides动起来,我们应该使用afterSlideLoad和onSlideLeave函数。
利用jQuery,我们将动态地添加css动画(animate.css提供),我们也将把动画按序应用到元素上,通过animate-delay css属性来实现
【回调函数列表】
(1)afterRender(渲染完成后)
页面结构生成后的回调函数,或者说页面初始化完成后的回调函数--->常用于第一页
(2)onLeave(离开前)
滚动前的回调函数,可以理解为--->离开某个页面前的函数
接收 index、nextIndex 和 direction 3个参数:
①. index 是离开的“页面”的序号,从1开始计算;
②. nextIndex 是滚动到的“页面”的序号,从1开始计算;
③. direction 判断往上滚动还是往下滚动,值是 up 或 down
(3)afterLoad(加载后)
滚动到某一屏后的回调函数,可以理解为--->到达某个页面时执行的函数
接收 anchorLink 和 index 两个参数:anchorLink 是锚链接的名称,index 是序号,从1开始计算
(4)afterSlideLoad(载入幻灯片后)
滚动到某一水平滑块后的回调函数,可以理解为--->到达某个页面的幻灯片时执行的函数
与 afterLoad 类似,接收 anchorLink、index、slideIndex、direction 4个参数
(5)onSlideLeave(离开幻灯片前)
某一水平滑块滚动前的回调函数,可以理解为--->离开某个页面的幻灯片时执行的函数
与 onLeave 类似,接收 anchorLink、index、slideIndex、direction 4个参数
【二】下面根据案例来按照步骤做出动画
(1)基本架构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例讲解</title> <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"> <link rel="stylesheet" type="text/css" href="css/animate.css"> <style type="text/css"> .one{width: 100px;height: 100px;background-color: #00bcd4;display: inline-block; border-radius: 100%} </style> </head> <body> <div id="main_body"> <div class="section"> <div class="one one1"></div> <div class="one one2"></div> <div class="one one3"></div> </div> <div class="section"> <div class="slides slides1">1</div> <div class="slides slides2">2</div> <div class="slides slides3">3</div> </div> <div class="section">第三屏</div> </div> <script src="../js/jquery-1.8.3.min.js"></script> <script src="../js/jquery.fullPage.min.js"></script> <script src="../js/jquery.fullPage.js"></script> <script> $(function(){ $("#main_body").fullpage({ sectionsColor:['red','green','yellow'] }); }) </script> </body> </html>(2)接下来先添加加载完成后首页的动画,这时用到afterRender(页面初次加载完成后的回调函数)
相关推荐
fullPage.js是一款强大的jQuery插件,专为实现全屏滚动效果而设计。它不仅支持简单的上下滚动,还支持左右切换,使得网页内容展示更为灵活多变。 ### 一、fullPage.js的基本概念 1. **全屏布局**:fullPage.js将每...
fullpage.js结合animate.css实现滚屏动画,每段代码都加有详细注释 文章地址:https://blog.csdn.net/cplvfx/article/details/80649574
"多种屏幕切换效果fullPage.js自适应屏幕效果"这个主题涉及到的是如何使用JavaScript库fullPage.js来创建富有吸引力的全屏滚动效果,并确保这些效果能在不同尺寸的屏幕上完美呈现。 fullPage.js是一个流行的...
**全屏滚动插件fullpage.js详解与animate动画效果应用** 在网页设计中,全屏滚动效果已经成为一种流行趋势,它能为用户带来流畅且沉浸式的浏览体验。fullpage.js是一款强大的JavaScript插件,专为实现全屏滚动页面...
fullPage.js提供了一系列的回调函数,如`onLeave`、`afterLoad`、`onSlideLeave`等,开发者可以利用这些回调在页面滚动、滑动切换时执行特定操作,如动画、数据加载等。 **6. 响应式设计** fullPage.js支持响应式...
jQuery.fullPage.min.js正是为了实现这种效果而设计的,它能够将网页内容分割成多个全屏“段”,每个段可以包含不同的信息和交互元素。 2. **简单易用**: 使用jQuery.fullPage.min.js非常直观,只需在HTML中引用...
此外,fullPage.js还提供了丰富的自定义选项,如滚动速度、动画效果、导航条样式等,使得开发者可以根据需求调整页面的外观和行为。 在制作网易邮箱6.0介绍页面时,开发者可能首先会规划页面结构,将邮箱的功能特性...
1. **引入库文件**: 首先需要在HTML文件中引入jQuery库和fullPage.js插件的JavaScript及CSS文件。 2. **HTML结构**: 结构化页面,每个全屏段落包裹在`<div>`标签内,使用`data-anchor`属性指定锚点,`class=...
`fullPage.js`提供了丰富的配置选项,包括自定义滚动效果、滚动动画、触发动画、响应式布局等。例如,你可以通过`afterLoad`回调函数在每个段落加载后执行特定操作: ```javascript afterLoad: function(anchorLink...
fullpage.js是一款强大的JavaScript插件,专为实现这种效果而设计,它提供了丰富的选项和定制能力,使得创建美观且交互性强的全屏滚动网站变得简单易行。 ### 1. fullpage.js基本概念 - **分页**:在fullpage.js中...
3. **JavaScript初始化**:引入fullpage.js库后,使用`new fullPage.js('#fullpage')`初始化全屏滚动。你可以传递参数来定制滚动行为、导航样式等。 4. **内容交互**:结合jQuery或其他JavaScript库,可以实现滑动时...
同时,可以通过JavaScript或jQuery与fullPage.js提供的API交互,实现更丰富的用户交互功能,如动态加载内容、动画效果等。 总的来说,fullPage.js以其简洁的API和丰富的功能,为开发者提供了创建专业级全屏滚动网站...
Vue-fullpage.js fullpage.js库的官方Vue.js包装器。 在线演示| Codepen fullpage.js扩展名@ imac2。 感谢VasiliyGryaznoy Vue-fullpage.js fullpage.js库的官方Vue.js包装器。 在线演示| Codepen fullpage.js扩展名...
fullPage.js是一款知名的JavaScript插件,专为创建全屏滚动效果而设计。本篇文章将深入探讨类似fullPage.js的全屏滚动插件及其相关知识点。 1. **fullPage.js**: fullPage.js是由Alvaro Trigo开发的,它支持...
5. **CSS3动画**:借助CSS3技术,fullPage.js可以实现丰富的过渡效果和动画,让页面间的切换更加生动有趣。 6. **窗口缩放自动调整**:当用户改变浏览器窗口大小时,fullPage.js会自动调整布局,确保在不同分辨率和...
`fullPage.js`是一款基于jQuery的开源插件,专为实现这种效果而设计。这款插件允许开发者轻松创建全屏滚动的单页面网站,具有丰富的定制选项和出色的性能。 ### 1. 安装与引入 首先,你需要在项目中安装`fullPage....
jquery.fullPage.js
fullPage.js的实现原理主要基于JavaScript和CSS3,利用这些技术可以实现平滑的动画过渡效果,同时支持自适应布局,确保在不同设备和屏幕尺寸上都能保持良好的视觉效果。此外,该插件还提供了丰富的定制选项,允许...
总结,fullpage.JS和onepage-scroll.JS是两个功能强大的JavaScript插件,分别用于实现全屏垂直滚动和水平滚动效果。它们为网页设计师和开发者提供了构建富有创意的交互式网站的工具,通过合理的运用,可以大大提高...