クリエイティブ系のウェブサイト制作で役立つCSS技法 / CSS for develop creative website

CSSとWebGLを組み合わせたウェブサイトを題材に、CSSでインパクトを残すための演出実装のアイデアを紹介します。CSSがテーマですが、関連してWeb Animations APIが役立つポイントも解説します。

デモサイトは以下のURLで確認できます。
https://twitter.com/clockmaker/status/1525338778931728386

Transcript

1. גࣜձࣾ*$4
   ஑ా
   ହԆ
   
   ೥݄೔ ΫϦΤΠςΟϒܥͷ 
 ΢ΣϒαΠτ੍࡞Ͱ໾ཱͭ$44ٕ๏ 
2. ஑ా
   ହԆʢ͍͚ͩ
   ΍͢ͷͿʣ wגࣜձࣾ*$4୅ද
   
   ஜ೾େֶඇৗۈߨࢣ
   wܦྺɿ
   'MBTI
   4UBHF%ؚΉ
   ˠ
   $BOWBT
   ˠ
   8FC(-
   w *$4
   .&%*"ʮ5ISFFKTೖ໳αΠτʯ୲౰  !DMPDLNBLFS
3. ΢Σϒͷԋग़ٕ๏Λ঺հ ˞৽͍͠$44ͷٕज़঺հ͸͋Γ·ͤΜ 
4. σϞ 
5. 
6.  %0.Λ
   Ξχϝʔγϣϯ 7VFKT
7.  %0.Λ
   Ξχϝʔγϣϯ 7VFKT
8. %0.ͷΞχϝʔγϣϯ  $44
   5SBOTJUJPOT
    $44
   "OJNBUJPOT
    8FC
   "OJNBUJPOT
   "1*
    τΡΠʔϯܥ+4ϥΠϒϥϦ 
9. %0.ͷΞχϝʔγϣϯ  $44
   5SBOTJUJPOT
    $44
   "OJNBUJPOT
    8FC
   "OJNBUJPOT
   "1*
    τΡΠʔϯܥ+4ϥΠϒϥϦ  wλΠϛϯάͷ੍ޚΛߦ͍΍͍͢
   w$44ʹࣅͨه๏
   w Ϟμϯϒϥ΢βͰར༻Մʢ*&আ͘ʣ
10. 
11. ԋग़ͷϙΠϯτ w͋͠Β͍ͱͯ͠ͷۣܗ
    
 ˠ
    CBDLHPVOEDPMPSͰృ͚ͬͨͩͷۣܗ
    wϞʔγϣϯ࠶ੜͷλΠϛϯάͷͣΒ͠
    
 ˠ
    Θ͔ͣͳ࣌ؒͷ஗ԆΛՃ͑Δ 
12. ԋग़ʹ໾ཱͭ+4ϥΠϒϥϦ  5XFFOKT
    ʢτΡΠʔϯχδϡ΢Ϥϯʣ (4"1ʢδʔαοϓʣ
13. ΢Σϒ੍࡞Ͱ ΫϦΤΠςΟϒίʔσΟϯά͕
    ໾ཱͭ৔໘͸ͨ͘͞Μ͋Γ·͢ɻ
    
 ָ͠ΜͰ࡞͍͖ͬͯ·͠ΐ͏ʂ  *$4Ͱ͸ελοϑΛืू͍ͯ͠·͢ʂ