Recent Posts

Demo:實作捲動觸發CSS動畫

1 minute read

demo 第一部分:使用CSS撰寫Slide In效果 這個單元使用的技巧有: 使用transition讓屬性值改變時有動畫的效果 使用animation-fill-mode設定結束狀態 使用transform:translate移動元素 1. 使用transition讓屬性值改變時有動畫...

Demo:使用scrollspy讓畫面更生動

less than 1 minute read

Demo展示頁 作法說明 1.幫body加工 將body加上display: relative,如果還是不行使用的話加上width: 100%與height: 100%。 display: relative; width: 100%; height: 100%; 2. 宣告navbar並設定targe...

Landing Page 實作:來做個簡單的Jumbotron

less than 1 minute read

製作jumbotron有兩個重點 垂直置中 設定背景。 Background 設定position: center bottom讓圖片顯示出需要的區塊 使用background-size: cover;讓圖片滿版 section.intro{ padding: $baselin...

Demo:使用Matirialize框架實現視差滾動

less than 1 minute read

完成品展示頁 Materialize是除了Bootstrap以外現今相當熱門的前端框架,可以製作的網頁類型相當廣泛,未來將使用Materialize來開發一些小作品,是今天練習的主要目的。 實現Materialize框架提供的視差滾動效果 視差滾動的效果由materialize提供的Parallax JS ...