Embed Size (px)
Citation preview
「現場のプロが教えるWEBデザイン 新・スタンダードテクニック37」
に載っているテクニックでLP作ってみた話
倉持友喜
自己紹介
普段はWeb制作会社に勤務しています。 フロントエンド、WordPressが多め。
@mochi_Flappe
ペットはヤマトヌマエビ
ラズパイで動画配信したり水槽ハックしてます。
今日のはなし
• ターゲットはビギナーのコーダーさん
• 本のテクニックを利用した簡単なLP
• CSSアニメーションの話
• GoogleMapの話
デモ
CSSアニメーションって 意外と書くのが大変
バウンドする要素
要素をバウンドさせる keyframesアニメーションの例
keyframes部分
keyframes部分（拡大）
ショートハンドもあるけど なかなかつらい
ちょっとした動きなら ライブラリを使ってみよう
CSSを読み込んで classを当てるだけなので簡単
infiniteを付ければ アニメーションがループしてくれる
hoverしたときだけ アニメーションさせたい
animate.css Sass版のMixinを使う
https://github.com/geoffgraham/animate.scss
Github検索すると沢山出てくるが 上記リポジトリが活発だった
$ bower install animate.css-scss
or
Zipで落としてきてディレクトリに入れる
ルートにあるanimate.scssをimport アニメーションmixinとして利用できる
mixinに引数を渡せるので ある程度の調整が可能
やったね！簡単にできたよ
大きめなGoogleMapを置くと スクロールが引っかかってしまう問題
Google Maps JavaScript API v3 にはマウススクロールを無効にできる
オプションが有る
Mapの細かなスタイルを 手軽にカスタマイズできるサービス
https://snazzymaps.com/Styled Map Wizard
まとめ
• 「すぐにできるんでしょ？」って言われがちなテクニックがたくさん本に乗ってます
• 定番のテクニックはなるべくサクサク実装して時間を有効に使おう！
ご清聴ありがとうございました。
