モーダルウィンドウ

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

おさえておきたいところ

「モーダルウィンドウ」を使う目的はこんな感じです。

　　　　　　　　　　　　目的：メインコンテンツと関連性のある詳細情報を表示。ユーザーの注意を引いたり入力させる。
動きのきっかけ：画面の読み込み後 / クリック

ページを開くと、背景が暗くなりテキストを表示

See the Pen ページを開くと、背景が暗くなりテキストを表示 by Web Navigator (@web-navigator) on CodePen.

ページを開くと、背景が暗くなり動画を表示

See the Pen ページを開くと、背景が暗くなり動画を表示 by Web Navigator (@web-navigator) on CodePen.

リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示

See the Pen リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示 by Web Navigator (@web-navigator) on CodePen.

次回の予定

様々な動きのパターンを集めたCSSライブラリ「Animate.css」と

要素が画面に入ったら動く「jquery.inview」というJavaScriptライブラリを組み合わせて

スクロールで手軽に要素を動かす方法に挑戦してみます ＼＼\\٩( ‘ω’ )و //／／

合わせて読みたい

モーダルウィンドウ

WEBさん

WordPressの不具合をなおす人

TwitterInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。