​​Vue.js で作るスクロール同期型コンテンツ
​​
​​
 
User-uploaded image: cover.jpg
​​

​​自己紹介

​​
 
User-uploaded image: my_profile_s.jpg
​​
​​株式会社まぼろし フロントエンドエンジニア
​​木村 哲朗
​​
​​1980年12月31日生まれ
​​東京都文京区出身
​​
​​GitHub/ Instagram / Twitter / Facebook
​​
​​
​​

​​野望

​​
 
User-uploaded image: capture.jpg
​​

​​個人的フレームワーク選定基準

  • ​​React + Flux (Redux/俺々)
  • ​​ウェブアプリ作るとき
  • ​​Vue.js
  • ​​一般的なウェブページ作るとき
  • ​​Angular
  • ​​積極的に選ぶ理由はない
  • ​​Riot.js
  • ​​正気の沙汰じゃない ​🔥​​🔥​​🔥​
​​

​​本日のお話

  • ​​スクロールに応じたインタラクションのあるページを Vue.js で実装する
  • ​​アニメーションの開始タイミングの操作
  • ​​インジケーター
  • ​​画像のレイジーロード（時間があれば）
​​
  • ​​data​ プロパティと computed​ プロパティの実践的な使い方
  • ​​Vue.js は小規模なページ・サイトでも “too much” じゃない
​​

​​デモページの構造

​​
 
User-uploaded image: image-01.jpg
  • ​​単純な縦積み構造
  • ​​ブロックごとに写真とタイトル・キャプションを内包
  • ​​先頭のブロックのみ { position: fixed; }​ 
​​
​​

​​基本的な仕組み

​​
 
User-uploaded image: image-02.jpg
  • ​​赤枠は画面のスクロール位置