マガジンのカバー画像

デイトラWeb制作

49
本
運営しているクリエイター
ren_k0227

DAY46.実務でよく使うアニメーションの付け方編 スマホ時のドロワーメニュー

01.ドロワーが作れるライブラリ1.drawer.js 対応ブラウザ ・IE10~ ・Safari ・Chrome ・Firefox 2.hiraku.js 日本人が開発している ドキュメントも全部日本語 02.ドロワーメニューを開いた時のレイヤー階層ドロワーが開いた時の重なりを意識してz-indexを指定する 下から順 ①通常のbody内のコンテンツ ②ヘッダー（※上部に固定表示するため） ③ドロワー開いた時の黒背景 ④ドロワーメニュー ⑤ハンバーガーメニュー（

ren_k0227

DAY45.実務でよく使うアニメーションの付け方編 スクロールで「フワッ」と登場

01.WOW.jsで「フワッと」表示するフワッとした動きを実装するなら「WOW」ライブラリを使うのが一番楽 ※WOW.jsには商用利用も無料の「MIT版」商用利用は有料の「本家」 の２種類があります！ 無料のMIT版を使わないとお金がかかる animate.css クラス名をつけるだけでアニメーションがつけられるcssパッケージ wow.js アニメーションのトリガーや詳細を操作できるJavaScriptパッケージ wow.min.jsを読み込むだけじゃなく 「new

ren_k0227

DAY44.実務でよく使うアニメーションの付け方編 スライダー（カルーセル）

01.スライダーの実装ライブラリの使い方を覚えてそのライブラリをカスタマイズ出来る デザインカンプ上にアローボタンやページネーションが 用意されていたら「スライダーで実装する」と判断する ※デザイナーさんに意図を聞く 2枚目以降の画像がない場合、適当に同じようなサイズの仮の画像を入れる 先方が画像を差し替えたらいいだけの状態にして納品 02.扱いやすいスライダー系ライブラリを１つ持つスライダーは自作してもいいが、先人の凄い人が作ってくれた JavaScriptのライブ

ren_k0227