WEBデザイン動画を全画面表示にしてトップに固定する。
インビジュアルの見せ方として最近は画像を画面いっぱいに表示するようなダイナミックな手法が増えてきました。その中でも動画を使った見せ方はユーザーの興味をより引きやすく人気があります。ここでは動画を全画面表示にしてトップに固定方法を解説していきます！
2023-09
WEBデザイン
WEBデザインスクロールダウンアニメーション（CSSアニメーション、keyframes）
サイトのファーストビューにある「SCROLL」などというテキストとともに線や丸が動いて下へとスクロールを促すアニメーションを見たことがあると思います。そちらの実装方法をデモサイトを見ながら解説していきます。
WEBデザインドロップダウンメニューの実装（jQuery編、CSSのみ）
サイトのヘッダー部分などでよく見かける、メガメニューをホバーするとサブメニューがドロップダウンでぶら下がって表示されるタイプのメニューを今回は作ってみましょう！ jQueryを使うタイプとCSSのみで実装できるタイプと２種類紹介します。
WEBデザインパララックス効果をスマホでも実装する（CSSのみ）
パララックス効果を簡単に実装できるCSSプロパティとして background-attachment: fixed; があります。しかし、こちらのやり方ではiOS の Safari には対応できていないため、今回紹介するclip-pathプロパティを用いて背景を矩形に切り抜くやり方でスマホ対応のパララックスページを実装していきます。
WEBデザインフェードスライダーの実装（Swiper）
近年のメインビジュアルの傾向として、まず画面いっぱい100vw、100vhで表示させながらフェードでビジュアルイメージを切り替えるタイプをよく目にします。今回は前回同様SwiperというJavaScriptライブラリを使って実装していきます。
WEBデザインスライダーの実装（Swiper）
メインビジュアルなどでよく見られる画像のスライダーや、フェードなどの動きを簡単に実装できるライブラリである「Swiper」の解説をした記事になります。
WEBデザインロゴがアニメーションした後背景が右から左に流れて画面遷移するローディング（jQuery使用）
vivus.js というSVG アニメーションを表示するライブラリを使ってロゴのアウトラインのアニメーションと左から右に背景が流れる画面遷移を組み合わせた、ちょっとリッチなローディングを紹介します。
WEBデザインモーダルウィンドウの実装（jQuery編）
ボタンをクリックすることで、背景が暗くなった上に小窓が開き重要なお知らせなどユーザーの注意を引きやすいコンテンツを表示させることができるモーダルウィンドウの実装方法を解説します。
WEBデザインタブメニューの実装方法（jQuery編）
WEBデザインの現場でも頻出度の高いUIパーツ、タブで切り替えて複数のメニューの情報を掲載できるタブメニューの作り方を解説した記事になります。