画面全体に背景動画を流す | 動くWebデザインアイディア帳
video ファイルと代替え画像を用意します。video ファイルは各ブラウザに対応するため .mp4、.ogv、.webmの3 種類を用意します。 ※動画は、ユーザーのページの読み込み時間や再生時の挙動を削減するため4MB 以下を目安に制作しましょう。 ※無料の高画質video 素材は Pixabay （https://pixabay.com/）などのサービスを活用しましょう。 body内の背景動画を表示させたい場所にHTMLを記載します。 <header id="header"> <h1>Title</h1> <div id="video-area"> <video id="video" poster="img/movie.jpg" webkit-playsinline playsinline muted autoplay loop> <!-- poster：動画ファイルが利用できない
YouTubeを使って、画面全体に背景動画を流す | 動くWebデザインアイディア帳
/*========= 背景動画設定のCSS ===============*/ /*header設定*/ #header{ position: relative;/*ローディング画像などを表示す際の基点とするため指定*/ height: 100vh;/*高さを全画面にあわせる*/ text-align: center; color: #fff; /*ローディング画面時＆動画が表示されないときに表示する背景画像のレスポンシブ化*/ background: url("../img/movie.jpg") no-repeat; background-size: cover; } /* ローディングアイコン設定 */ #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font
jQueryと自作のJavaScriptの設置方法 | 動くWebデザインアイディア帳
このサイト内に掲載している多くの動きは、比較的難易度が低いjQueryというライブラリを採用しています。 jQueryは、JavaScriptを短く簡単に記述できるライブラリです。 代表的なライブラリはその他にも、React、Vue.js、Angular.js などがあり、使用するライブラリによってソースコードの書き方や難易度は変わってきます。 ここでは、jQueryと、jQueryの文法で書いた自作のJavaScriptをHTMLに設置する方法を解説します。 jQueryの設置方法 jQueryのHTMLへの設置方法は、以下の2つの方法があります。 jQueryのサイトからソースコードをダウンロードして設置する方法jQueryをダウンロードせずにインターネット経由でjQueryを読み込んで設置する方法 今回は2.jQueryをダウンロードせずにインターネット経由でjQueryを読み込んで
jQueryで動く「きっかけ」を指定しよう | 動くWebデザインアイディア帳
このサイト内に掲載している多くの動きは、jQueryというライブラリをベースにして動かしています。 「画面が読み込まれた後に動く」「スクロールしたら動く」「クリックしたら動く」 といった代表的な「動くきっかけ」の記述の仕方を理解していきましょう。 動くきっかけを指定する基本的な記述
ふわっ（CSS） | 動くWebデザインアイディア帳
See the Pen 4-1 最低限覚えておきたい現れ方 - ふわっ by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね！↑ 動きを実現する仕組み CSS アニメーションで実現するフェードインの現れ方です。 このサンプルは、画面を開いたらすぐに動きます。 スクロールをして動かす、といったきっかけを指定したい場合は、「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」を参考にしてください。 HTMLの書き方 <div class="fadeIn">ふわっ（その場で）</div> <div class="fadeUp">ふわっ（下から）</div> <div class="fadeDown">ふわっ（上から）</div> <div class="fadeLeft">ふわっ（左から）<
jQuery とCSS を組み合わせてスクロールをしたら要素を動かす | 動くWebデザインアイディア帳
jQueryとCSSアニメーションを組み合わせてスクロールをしたら要素を動かす方法をご紹介します。 スクロールをしたら要素を動かす仕組み HTML 内の「動かす要素」に「動くきっかけの起点となるクラス名」を付け、jQuery 側で動くきっかけの動作（スクロールなど）をしたら、アニメーション用のCSS のクラス名が付与されるという指定を行う。 （例）スクロールをしたらふわっと出現させる 動くきっかけの起点となるクラス名 「fadeUpTrigger」の位置までスクロールをしたら、「fadeUp」というアニメーション用のCSSのクラス名を付与して動かす。 See the Pen 「画面が読み込まれた後に動く場合」と「画面がスクロールされたら動く場合」の 動くきっかけの指定をまとめる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. HTMLの準備 ① HTM
順番に現れる（CSS） | 動くWebデザインアイディア帳
See the Pen 4-10 順番に現れる（CSS） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね！↑ 動きを実現する仕組み CSS アニメーションで実現する順番に現れる方法です。 このサンプルは、画面を開いたらすぐに動きます。 スクロールをして動かす、といったきっかけを指定したい場合は、「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」を参考にしてください。 ①スタート時は要素自体を透過0 にするため、opacity:0; を指定する .box{ opacity: 0; } ②動かしたい動き（今回は” ふわっ” を採用）＋動きのスタートを遅らせるCSS animation-delay: 秒数の値;をあわせて指定します。 出現させたい要素の順番に遅延時間を増やしていくと
ページ内の指定の場所にスクロール | 動くWebデザインアイディア帳
See the Pen 8-2-1 ページ内の指定の場所にスクロール by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内のリンクをクリックして動きを確かめてね！ 動きを実現する仕組み jQuery を使い、ページ内リンクのHTML タグhref から、リンクされているエリアid の値を取得し、id の上部の距離を取得する。 リンクがクリックされたら取得された位置までスクロールする。 ［使用するライブラリ］ ＊ jQuery HTMLの書き方 body内にリンク元のHTMLとリンク先のHTMLを記載します。 <ul id="page-link"> <li><a href="#area-1">Area 1</a></li> <li><a href="#area-2">Area 2</a></li> </ul> <section id="ar
スクロールすると画面やエリアが時間差で重なる | 動くWebデザインアイディア帳
See the Pen 6-2 スクロールすると画面やエリアが時間差で重なる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の表示を確かめてね！ 動きを実現する仕組み Luxy.jsというライブラリを使い、各要素に動きを指定してスクロールをすると画像やエリアが時間差で重なるように設定する。 重なりのあるレイアウトに使用すると浮遊感のあるリッチな印象のサイトになる。 [使用するライブラリ] Luxy.js（https://min30327.github.io/luxy.js/） HTMLの書き方 head終了タグ直前に自作のCSSを読み込みます。 <div id="luxy"><!--時間差で重ねるエリア全体に id="luxy"と指定--> <section class="area"> <!--動かしたい要素のclassにluxy-
スクロールすると位置が固定して追従 | 動くWebデザインアイディア帳
See the Pen 5-1-10 スクロールすると位置が固定して追従 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 768px以下で動きを変更しています。PCの場合は「HTML」ボタンを押して「Result」を全画面にし、動きをご確認ください↑ 動きを実現する仕組み CSSのposition: sticky; を使用してナビゲーションエリアを固定。 position: sticky; に対応していないブラウザにはstickyfill.js を読み込んで対応。 JavaScriptでブラウザの横幅が768px 以下になった時にはナビゲーションを下部に移動して追従を解除する。 ［使用するライブラリ］ ＊ jQuery ＊ stickyfill.js（https://github.com/wilddeer/stickyfill） HTMLの書き方 he
スクロールすると上部に固定 | 動くWebデザインアイディア帳
See the Pen 5-1-5 スクロールすると上部に固定 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内をスクロールして動きを確かめてね！ 動きを実現する仕組み jQueryを使いheaderの高さ以上スクロールをしたらheaderに「fixed」というクラス名を付与する。 クラスが付与されたらCSSでposition:fixed;を指定して上部にナビゲーションを固定する。 ※ JavaScript を使用せずに、CSS のみで header に position:fixed; を指定し、固定する方法もあります ［使用するライブラリ］ ＊ jQuery HTMLの書き方 head終了タグ直前に自作のCSSを読み込みます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
