Tutorial : Waypoint Landing Page

https://codepen.io/desbear96/pen/Gxrzry

課程目標

了解transition delay來創造進場動畫

透過Waypoint的js產生滾動過程中的動態效果

並再次強調zindex的應用來帶出hero image中的圖層順序

並於此次帶出inline-block垂直置中的實作方式

學前必備知識

  • position
  • z-index
  • background-size
  • transform basic
  • transition
  • margin:0 auto
  • clear both
  • float
  • inline-block
  • :before :after ( pseudo element )
  • Scss基礎 nest與variable

重點知識

  • waypoint.js
  • inline-block vertical align middle
  • scss nest selector and XXX &
  • transition delay

教學方式

  • 首先要先解釋inline-block創造垂直置中的條件與概念,將hgroup區塊安至於中間
  • 接著將花與方塊透過指定的大小安置進去
  • 而三段文字則透過after與before安置前後層圖片
  • 並透過variable指定高度順序運算
  • 透過animate &這樣的祖代選擇方式,製作在進場前的位置,讓animate抽走後可以依序展示出物件
  • 安置下方的section結構,安置inner創造中間區塊的置中並設定最大寬度限制
  • 教授透過float與set-left right的樣式名稱,讓原本一樣的結構可以依據樣式名稱置左置右
  • 透過雙層祖代選擇達到同前animate抽換後產生的動畫結構

素材

https://cl.ly/qIfb/hero-flower.png

https://cl.ly/qHo7/vintage.png

https://cl.ly/qHsB/vintage-up.png

https://cl.ly/qHcj/illustration-up.png

https://cl.ly/qHMB/illustration.png

https://cl.ly/qIV4/nature.png

jQuery(document).ready(function(){
jQuery(‘body’).imagesLoaded(function (){
jQuery(‘.os’).addClass(‘ready’);
function onScrollInit( items, trigger ) {
items.each( function() {
var osElement = jQuery(this)
var osTrigger = ( trigger ) ? trigger : osElement;
osTrigger.waypoint(function() {
osElement.removeClass(‘animate’);
},{
triggerOnce: true,
offset: ‘50%’
});
});
}
onScrollInit( jQuery(‘.os’) );
});
});

$bgC:#F3D5D7;

$color:#CE4D5A;

script(src=”https://cl.ly/q6Ke/jquery.min.js“)

script(src=”https://cl.ly/qI9e/imagesloaded.pkgd.min.js“)

script(src=”https://cl.ly/qI1b/jquery.waypoints.min.js“)

script(src=”https://cl.ly/qIja/inview.js“)

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *