​​Web109 Rundown

​​0930

​​華文永續報導獎揭曉

​​https://www.newsaward.org/previous

​​HTML & CSS

​​
 
HTML
jirlong.gitbook.io
HTML • jirlong.gitbook.io
​​

​​Case Study: parallax scrolling

​​
 
【來不及說再見】等你開口叫媽媽 | 專題 | 聯合報
「我已經有2千784天，沒有聽到我兒子開口叫媽媽了。」8年前，林毓英的兒子詹庭豪被酒駕肇事者撞成植物人。詹庭豪出事後，林毓英便把照顧兒子變成自己生活的全部。
udn.com
【來不及說再見】等你開口叫媽媽 | 專題 | 聯合報 • udn.com
​​

​​Case Study: Color designs

​​
 
Hong Kong: 100 days of protests
Hongkongers have taken to the streets to demonstrate against the extradition bill in huge numbers. The protesters and the government are in no mood to compromise and police have found themselves thrust into the front line
bit.ly
Hong Kong: 100 days of protests • bit.ly
​​

​​Stylebot: Customizing your webpage and practice CSS

​​Installing Chrome Extension Stylebot https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=zh-TW
​​
 
User-uploaded image: image.png
​​
User-uploaded image: image.png
​​
User-uploaded image: image.png
​​

​​Talk

​​The Color issue: https://jirlong.gitbook.io/html/appendix/the-color

​​108 Rundown

​​​+Web108 Groups​ 

​​1212

​​
 
Sorting out China’s waste problem
China plans to recycle up to 35 per cent of household waste by 2020
bit.ly
Sorting out China’s waste problem • bit.ly
​​
  • ​​Using transition​ to smooth changes
  • ​​Horizontal scrolling in animated storytelling
  • ​​Using mapbox

​​Horizontal cases

​​
 
A Trail of Terror in Nice, Block by Block
Documenting devastation along a one-mile stretch of waterfront.
www.nytimes.com
A Trail of Terror in Nice, Block by Block • www.nytimes.com
​​
​​
 
User-uploaded image: image.png
​​https://kpmc.com.tw/
​​
 
User-uploaded image: image.png
​​https://www.awwwards.com/sites/qode-interactive-catalog
User-uploaded image: image.png
​​https://www.awwwards.com/sites/qode-interactive-catalog

​​Horizontal scrolling skills

​​
 
User-uploaded image: image.png
​​https://dashboards.handmadeinteractive.com/jasonlove/ scrolling by keyboard arrows
​​
 
Manuela & Michael - LOVE IS IN THE AIR
LOVE IS IN THE AIR! This is the wedding website of Manuela & Michael, made with love! Make sure to turn the music on and then scroll to the right!
love-is-in-the-air.wiralle.net
Manuela & Michael - LOVE IS IN THE AIR • love-is-in-the-air.wiralle.net
​​

​​Notes

  1. ​​若position:absolute​的話，要指定外面的<div>​為position:relative​，用意是要讓裡面的position:absolute​物件知道要參考哪一層的<div>​。
  1. ​​transition​的使用方法基本上是，當你要改變什麼東西的大小，當使用transition​，那就會緩慢改變，例如修改left​或者top​也不例外，修改transform​也不例外。
  1. ​​Other: very good storytelling design on the medium.com 
​​
 
The Influencer and the Hit Man: How a Years-Long Domain Name Feud Ended in a Bloody Shootout
To get his URL, the founder of State Snaps turned to extreme measures
onezero.medium.com
The Influencer and the Hit Man: How a Years-Long Domain Name Feud Ended in a Bloody Shootout • onezero.medium.com
​​
​​
 
User-uploaded image: image.png
​​http://springsummer.gucci.com/
User-uploaded image: image.png
​​http://springsummer.gucci.com/
​​http://andrebergs.com/protanopia/#
​​