網頁視差效果精品教程:具有視差效果的標籤頁切換
今天要向大家分享的是一個簡單的具有視差效果的標籤頁切換技術。我們使用CSS動畫技術,控制標籤頁切換時產生的動畫動作,通過背景圖的移動,讓瀏覽者感覺到神奇的視差效果。
本教程是受Kendo UI的啟發,它是一個HTML UI框架。在經過研究之後,我們最終決定仿製出這種效果。
工作原理
顯示的內容由多個標籤頁組成,每個裡面都有一個H2元素,一個文欄位落,一個連結和一張圖片:
<div id="da-slider" class="da-slider lazy "> <div class="da-slide lazy "> <h2>Some headline</h2> <p>Some description</p> <a href="#" class="da-link lazy ">Read more</a> <div class="da-img lazy "> <img src="/lazy.gif?17c416" data-original="images/1.png" alt="image01" /> </div> </div> <div class="da-slide lazy "> <!-- ... --> </div> <!-- ... --> <nav class="da-arrows lazy "> <span class="da-arrows-prev lazy "></span> <span class="da-arrows-next lazy "></span> </nav> </div>
關鍵是標籤頁切換時的動畫。我們通過給每個標籤頁一個“方向類”來控制它們。例如,如果我們要把當前標籤頁向右滑動,我們就給它一個“da-slide-toright”類。這裡有4個不同的css類,每個負責一種可能運動方向。
- .da-slide-fromright
- .da-slide-fromleft
- .da-slide-toright
- .da-slide-toleft
對於這些css類,我們設計出各種不同的動畫效果:
/* Slide in from the right*/ .da-slide-fromright h2{ animation: fromRightAnim1 0.6s ease-in 0.8s both; } .da-slide-fromright p{ animation: fromRightAnim2 0.6s ease-in 0.8s both; } .da-slide-fromright .da-link{ animation: fromRightAnim3 0.4s ease-in 1.2s both; } .da-slide-fromright .da-img{ animation: fromRightAnim4 0.6s ease-in 0.8s both; } /* Adjust animations for different behavior of each element: */ @keyframes fromRightAnim1{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @keyframes fromRightAnim2{ 0%{ left: 110%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @keyframes fromRightAnim3{ 0%{ left: 110%; opacity: 0; } 1%{ left: 10%; opacity: 0; } 100%{ left: 10%; opacity: 1; } } @keyframes fromRightAnim4{ 0%{ left: 110%; opacity: 0; } 100%{ left: 60%; opacity: 1; } }
動畫選項
這些動畫是可以調整的,我們提供了一些引數選項:
$('#da-slider').cslider({ current : 0, // index of current slide bgincrement : 50, // increment the background position // (parallax effect) when sliding autoplay : false, // slideshow on / off interval : 4000 // time between transitions });
視差效果是通過將背景圖向內容頁移動方向的反向移動獲得的。通過bgincrement引數,你可以控制移動的畫素點。
需要注意的是,我們的程式碼裡包含的對那些不支援CSS3動畫和變換的瀏覽器的應變處理。
希望你能從我們的這個小例子中學到一些有用的東西!
相關文章
- 小程式標籤頁切換效果
- UIMotionEffect和Home頁背景視差效果UI
- 用css實現視差效果CSS
- CSS完成視差滾動效果CSS
- 視差滾動效果的10個教程和外掛
- css實現視差滾動效果CSS
- 【程式碼輕視訊】使用stellar.js快速生成頁面元素的視差滾動效果JS
- 10個關於視差滾動效果的教程和外掛
- [Parallax Animation]實現知乎 Android 客戶端啟動頁視差滾動效果Android客戶端
- js具有跟隨彈性效果的網頁右下角視窗程式碼JS網頁
- 視覺差緩動效果的輪播--React版視覺React
- 用CSS實現Tab頁切換效果CSS
- Unity Shader基於視差對映的雲海效果Unity
- 用 Stellar.js 製作視差滾動效果JS
- 微信小程式頁面功能-----標籤切換微信小程式
- css3實現手機效果的“切換標籤”CSSS3
- CSS實現頁面切換時的滑動效果CSS
- Swift-低仿搜狐新聞標籤頁效果Swift
- JS實現網頁換膚功能效果JS網頁
- 38 首頁切換研究深度按鈕加陰影效果
- jquery實現的具有漸變效果的圖片切換jQuery
- Android 高仿騰訊新聞視訊切換效果Android
- 在多個遊戲檢視間切換實現效果遊戲
- 自定義實現MIUI的拖動視差效果(阻尼效果)UI
- ViewPager、Fragment和TabLayout實現切頁效果ViewpagerFragmentTabLayout
- 點選按鈕實現切換頁面背景顏色效果
- 讓網頁舞動起來!25個免費的視差滾動外掛網頁
- 微信網頁授權視訊教程網頁
- JS新增標籤效果JS
- 網站營銷視覺效果決定一切網站視覺
- 網頁title標題滾動效果程式碼例項網頁
- html網頁內容如何實現上標和下標效果HTML網頁
- ios 卡片切換效果iOS
- 類似憤怒的小鳥層滑動的視差效果(CCParallaxNode)和粒子效果記憶體洩露問題記憶體洩露
- 太讚了!超炫的頁面切換動畫效果【附原始碼下載】動畫原始碼
- Unity2D橫板遊戲之背景視差與無限滾動效果Unity遊戲
- js效果——頁面如何讓換皮膚JS
- flutter好用的輪子推薦十八-flutter液體效果的頁面切換元件Flutter元件