iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
自我挑戰組

前端之 " wow~原來是這樣啊 " 系列

我是一個剛踏入前端不久的新手,在接觸新的觀念及技術時,常常會有"wow~原來是這樣啊" 的感覺,希望可以透過這30天,透過教學重整頭緒,把那些曾經我覺得很疑惑,到後來 wow~ 的事情記錄下來跟大家分享。

鐵人鍊成 | 共 30 篇文章 | 77 人訂閱 訂閱系列文 RSS系列文 團隊好想工作室第二屆鐵人賽
DAY 11

Day 11 CSS position之想去哪就去哪

瞭解 position 設定,讓網頁元素想去哪裡就去哪裡 在網頁排版設計中,並不是所有元素都會依照水平及垂直的一定流向排列,有時其中一個元素需偏向某一個方向,或...

2018-10-26 ‧ 由 Lai 分享
DAY 12

Day12 講講 CSS3 動畫 - Transitions

在網頁中設定動畫效果,可以吸引使用者目光到特定區域,也可以與使用者間有更好的互動關係,以提升使用者經驗。 在 CSS3 當中有兩個主要用來實現動畫的方式,分別爲...

2018-10-27 ‧ 由 Lai 分享
DAY 13

Day13 CSS3 動畫 Transitions實作練習(上)

續上篇我們對 Transitions 的學習,我們實現幾個效果試試看吧! 接下來我們分爲上下篇依序實作這四個效果。上篇我們先實作上方兩個動畫。在這四個效果中,...

2018-10-28 ‧ 由 Lai 分享
DAY 14

Day14 CSS3 動畫 Transitions實作練習(下)

續上上篇我們對 Transitions 的學習,我們實現幾個效果試試看吧! 在上篇實作中完成了上方兩個動畫效果,本篇我們繼續實作下方兩個動畫效果吧! 左下動畫...

2018-10-29 ‧ 由 Lai 分享
DAY 15

Day15 CSS 動畫 Animation - 基礎篇

利用 keyframes (影格)來設定更細節的動畫吧! 之前講解過 Transitions 的動畫效果,也實作一些範例。這一篇文章我們來講講另一個動畫實現方式...

2018-10-30 ‧ 由 Lai 分享
DAY 16

Day16 CSS 動畫 Animation 實作練習(上)

利用 Animation 製作美美的動畫吧 上一篇我們介紹了 Animation 的相關設定,Animation 有多個屬性供設定,比起 Transitions...

2018-10-31 ‧ 由 Lai 分享
DAY 17

Day17 CSS 動畫 Animation 實作練習(下)

利用 Animation 製作美美的動畫吧 上上篇我們介紹了 Animation 的相關設定,在上一篇也實作了字體模糊動畫效果,本篇來試試看經典的球球追隨運動吧...

2018-11-01 ‧ 由 Lai 分享
DAY 18

Day18 來一個 Google Pie Chart 吧

資訊呈現中,免不了以圖表作視覺化資訊呈現,那就不能錯過好用的 Google charts 了! Google charts 提供了一系列圖表供開發者使用,例如...

2018-11-02 ‧ 由 Lai 分享
DAY 19

Day19 JS Scroll 實作學習

在網頁互動中,經常可見滾動觸發事件,今天來試試看吧 最近在一個專案中需要監聽網頁 Scroll 事件,用以觸發元素的移動。學習了JS Scroll 事件,今天來...

2018-11-03 ‧ 由 Lai 分享
DAY 20

Day20 練習使用簡單的 GET 方法接一個 open data

前端的學習之路,有一天會需要動態的互動,需要與外面的資料產生連結,今天試試看練習用簡單的 GET方法接一個 open data吧 在前端學習過程,都是在自己的電...

2018-11-04 ‧ 由 Lai 分享