fullpage.js結合animate.css實現滾屏動畫，詳細講解，附下載地址

阿新 • • 發佈：2019-01-17

fullpage.js結合animate.css實現滾屏動畫：【點選下載】

-----------------------------------------------------------------------

------------------------------------------------------------------------

html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<title>fullpage.js結合animate.css實現滾屏動畫</title>

<!-- animate 動畫引入 -->
<link rel="stylesheet" href="css/animate.min.css"> 

<!-- jquery引入 -->
<script src="js/jquery-1.8.3.min.js"></script>

<!-- fullpage依賴引入 -->
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery-ui-1.10.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<!-- fullpage依賴引入 end-->

<!-- 自定義配置fullpage的js -->
<script src="js/cpjs.js"></script>
 

<style> 
.section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} 
</style>

</head>



<body>

<div class="section">

	<h3>第一屏</h3>

	<p id="p1">fullPage.js — 回撥函式演示</p>

</div>

<div class="section">

	<h3>第二屏</h3>

	<p id="p2">滾動到第二屏後的回撥函式執行的效果</p>

</div>

<div class="section section3">

	<h3>第三屏</h3>

	<p id="p3">滾動到第三屏後的回撥函式執行的效果</p>

</div>

<div class="section section4">

	<h3>第四屏</h3>

	<p id="p4">滾動到第四屏後的回撥函式執行的效果</p>

</div>

</body>

</html>

自定義配置fullpage的js,本文中定義的是cpjs.js

$(document).ready(function() {

	$.fn.fullpage({
        //設定背景顏色
		slidesColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90', '#ef820'],
        //定義錨鏈接
		anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
        //滾動到最底部後是否滾回頂部
        loopBottom: true, 
        // 是否顯示專案導航
        navigation: true,
        // 滾動速度，單位為毫秒
        scrollingSpeed: 500, 


        //滾動到某一屏後的回撥函式，接收 anchorLink 和 index 兩個引數，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算
		afterLoad: function(anchorLink, index){
			if(index == 1){  
                // 向ID為P1的元素新增class，animated是animate.css啟用動畫必須加的class,後面跟的是動畫class
                $('#p1').addClass('animated zoomIn');
			}
			if(index == 2){  
                $('#p2').addClass('animated fadeInDown');
			}

			if(index == 3){  
                $('#p3').addClass('animated lightSpeedIn');
			}

			if(index == 4){  
                $('#p4').addClass('animated rotateIn');
			}

		},


        //  滾動前的回撥函式，index 是離開的“頁面”的序號，從1開始計算；
        // nextIndex 是滾動到的“頁面”的序號，從1開始計算；
        // direction 判斷往上滾動還是往下滾動，值是 up 或 down。
		onLeave: function(index, direction){
            if(index == '1'){  
                // 向ID為P1的元素移除class
                $('#p1').removeClass('animated zoomIn');
			}

			if(index == '2'){  
                $('#p2').removeClass('animated fadeInDown');
			}

			if(index == '3'){  
                $('#p3').removeClass('animated lightSpeedIn');
			}

			if(index == '4'){  
                $('#p4').removeClass('animated rotateIn');
			}

		}

	});

});

fullpage配置

1、選項

選項	型別	預設值	說明
verticalCentered	字串	true	內容是否垂直居中
resize	布林值	false	字型是否隨著視窗縮放而縮放
slidesColor	函式	無	設定背景顏色
anchors	陣列	無	定義錨鏈接
scrollingSpeed	整數	700	滾動速度，單位為毫秒
easing	字串	easeInQuart	滾動動畫方式
menu	布林值	false	繫結選單，設定的相關屬性與 anchors 的值對應後，選單可以控制滾動
navigation	布林值	false	是否顯示專案導航
navigationPosition	字串	right	專案導航的位置，可選 left 或 right
navigationColor	字串	#000	專案導航的顏色
navigationTooltips	陣列	空	專案導航的 tip
slidesNavigation	布林值	false	是否顯示左右滑塊的專案導航
slidesNavPosition	字串	bottom	左右滑塊的專案導航的位置，可選 top 或 bottom
controlArrowColor	字串	#fff	左右滑塊的箭頭的背景顏色
loopBottom	布林值	false	滾動到最底部後是否滾回頂部
loopTop	布林值	false	滾動到最頂部後是否滾底部
loopHorizontal	布林值	true	左右滑塊是否迴圈滑動
autoScrolling	布林值	true	是否使用外掛的滾動方式，如果選擇 false，則會出現瀏覽器自帶的滾動條
scrollOverflow	布林值	false	內容超過滿屏後是否顯示滾動條
css3	布林值	false	是否使用 CSS3 transforms 滾動
paddingTop	字串	0	與頂部的距離
paddingBottom	字串	0	與底部距離
fixedElements	字串	無
normalScrollElements	無
keyboardScrolling	布林值	true	是否使用鍵盤方向鍵導航
touchSensitivity	整數	5
continuousVertical	布林值	false	是否迴圈滾動，與 loopTop 及 loopBottom 不相容
animateAnchor	布林值	true
normalScrollElementTouchThreshold	整數	5

2、方法

名稱	說明
moveSectionUp()	向上滾動
moveSectionDown()	向下滾動
moveTo(section, slide)	滾動到
moveSlideRight()	slide 向右滾動
moveSlideLeft()	slide 向左滾動
setAutoScrolling()	設定頁面滾動方式，設定為 true 時自動滾動
setAllowScrolling()	新增或刪除滑鼠滾輪/觸控板控制
setKeyboardScrolling()	新增或刪除鍵盤方向鍵控制
setScrollingSpeed()	定義以毫秒為單位的滾動速度

3、回撥函式

名稱	說明
afterLoad	滾動到某一屏後的回撥函式，接收 anchorLink 和 index 兩個引數，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算
onLeave	滾動前的回撥函式，接收 index、nextIndex 和 direction 3個引數： index 是離開的“頁面”的序號，從1開始計算； nextIndex 是滾動到的“頁面”的序號，從1開始計算； direction 判斷往上滾動還是往下滾動，值是 up 或 down。
afterRender	頁面結構生成後的回撥函式，或者說頁面初始化完成後的回撥函式
afterSlideLoad	滾動到某一水平滑塊後的回撥函式，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個引數
onSlideLeave	某一水平滑塊滾動前的回撥函式，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個引數

fullpage.js結合animate.css實現滾屏動畫，詳細講解，附下載地址

fullpage.js結合animate.css實現滾屏動畫：【點選下載】----------------------------------------------------------------

fullpage.js與animate.css搭配使用

滾動 blank function logo get user after wid dev jquery的fullpage.js插件的使用 https://alvarotrigo.com/fullPage/#3rdPage 官網 https://github.com

vue transition 結合 animate.css 實現動畫過渡

在vue元件中實現一些過渡動畫是很常見的，有時候使用一些css庫也是很正常的，今天就簡單的說一下在vue元件中使用transition與animate.css結合的用法安裝animate.

vue中結合animate.css實現元素動畫入場

話不多說先看下demo的GIF： 1.首先引入animate.css，可以直接在index.html中cdn引入； 2.其次在開發這種動畫較多的頁面我覺得還是引用jquery比較方便，操作dom稍多，我這裡沒有使用jquery，就想複習複習原生js。可以npm安裝

學習fullpage.js外掛實現滾屏心得

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=e

LINUX下如何實現滾屏檢視

ls | more ls | less less 使用許可權：所有使用者使用方式：less [Option] filename 說明：less 的作用與 more 十分相似，都可以用來瀏覽文字檔案的內容，不同的是 less 允許使用者往回捲動以瀏覽已經看過的部份，

Vue.js 結合bootstrap 前端實現分頁效果

Vue.js 結合bootstrap 前端實現分頁和排序效果寫之前先抱怨幾句。本來一心一意做.net開發的，漸漸地成了只做前端。最近專案基本都用java做後臺，我們這些.net的就成了前端，不是用wpf做介面，就是用html寫web頁面。深知自己前端技術

使用animate.css實現翻轉特顯

.houverlxx是父元素其他兩個元素是子元素,使用定位 $(function(){ $(".houverlxx").hover(function(){ // floor-goods-item消

vue路由+子路由+具名路由demo例項(結合animate.css動畫)

const Index = { template:"#index" } const List = { template:"#list", data(){

css實現的loading動畫

nbsp city display tip nim fill abs utf-8 title 第一種： <!DOCTYPE html> <html> <head> <title>loading</t

css實現線條樣式（中間高亮，兩邊透明）

div height round width eight style near 中間樣式 .line{ width: 100%; height: 2px; background: linear-gradient( to

[002]-css實現顏文字動畫

效果預覽 https://codepen.io/strugglingBoy/pen/BqKWBY 程式碼下載 https://github.com/enstrongbill/daily-frontend-exercise/tree/master/020-shrug

css實現多行文字超出省略號顯示，相容所有瀏覽器

原文連結：https://github.com/happylindz/blog/issues/12 float 特性實現多行文字截斷基本原理有個三個盒子 div，粉色盒子左浮動，淺藍色盒子和黃色盒子右浮動，當淺藍色盒子的高度低於粉色盒子，黃色盒子仍會處於淺藍色盒子右下方。如果淺藍

css實現盾牌的動畫效果

直接上程式碼：用偽類選擇器去選擇每個圖片，再進行2d動畫的實現 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

jquery animate step實現css3屬性動畫

jquery animation的工作原理是通過將元素的css樣式從一個狀態改變為另一個狀態。css屬性值是逐漸改變的，這樣就可以建立動畫效果。但是animate方法下，只有數字值可建立動畫（比如 “top:30px”），字串值型別的值則是無法建立動畫（比

CSS實現表格表頭（thead）固定，內容（tbody）滾動

前言最近在寫一個專案，然後要實現表頭固定，tbody內容滾動的效果，該專案中沒有使用任何外掛，並且表格列數蠻多的，剛開始實現起來遇到各種問題，感覺蠻複雜的，後來找到了一種利用transform的方法實現，效果還不錯，請看程式碼~~~~~~————程式碼————<!DO

用純CSS實現載入中動畫效果

HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"&

CSS實現Loading載入動畫

優秀的前端工程師總是優先考慮用CSS替代圖片：基本思路是建立8個圓形div，絕對定位排列成圓圈，然後，依次通過opacity屬性更新透明度，就得到一個loading的效果圖。和GIF相比，CSS實現的好處主要在於，對於不同背景顏色，該動畫都是完美的，還可以用CS

css實現進度載入動畫

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport"

css實現上面div根據內容自動高度，下面的div自動鋪滿剩餘高度

“載入更多”的功能，如果是監聽某個dom元素來實現，你會怎麼做？我的設想是： 1、此dom元素要可滾動； 2、判斷合適應該做“載入更多”的邏輯；在我所做的專案中，引用了bootstrap框架，並且這個dom元素隱藏的還比較深。 <body class='enroll

fullpage.js結合animate.css實現滾屏動畫，詳細講解，附下載地址

fullpage.js結合animate.css實現滾屏動畫：【點選下載】

fullpage配置

1、選項

2、方法

3、回撥函式

相關推薦