サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
coco-factory.jp
See the Pen 9-2 PNGアニメーション(APNG) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の表示を確かめてね! 動きを実現する仕組み 仕組み ⇒ 1枚の動く画像 長所 ⇒ 透過が利用可能。GIFに比べて画質がきれい。オンラインジェネレーターなどの制作ツールで比較的簡単に制作できる。 短所 ⇒ IE,Edgeには非対応。※apng-canvas.jsで疑似的な対応は可能 オンラインサービス「Ezgif.com(https://ezgif.com)」を利用して制作。 パラパラ漫画のようにコマ送りで複数の画像を組み合わせてPNG形式のアニメーション画像をつくる。 作り方 ① 動かすコマを、画像制作ソフトを使ってコマ数分作る。 カンバスサイズは全てのコマで同じサイズにし、画像を少しずつ動かしてコマ数分を制作。 サンプル
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: 秒数の値;をあわせて指定します。 出現させたい要素の順番に遅延時間を増やしていくと
書籍情報 紙面だからこそできるまとめ方でコードを説明し、 全体を俯瞰して調べることが出来る構成になっています。 もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。 購入をしてくださった方には特典がありますので是非チェックしてみてください!
/*========= 背景動画設定の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
See the Pen 6-1-2 フェードイン・アウトさせて全画面で見せる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の動きを確かめてね! 動きを実現する仕組み slick というスライドショーを実現するJavaScript ライブラリを使い、HTML 内の<li>にCSS で指定した背景画像をスライドさせる。 ※今回は背景画像にしていますが、画像でもスライドは実現できます。 [使用するライブラリ] * jQuery * slick(https://kenwheeler.github.io/slick/) HTMLの書き方 head終了タグ直前にslickのCSSと自作のCSSの2つを読み込みます。 <link rel="stylesheet" type="text/css" href="https://cdn.jsdeliv
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-
See the Pen 5-1-9 スクロール途中でヘッダーが消え、上にスクロールすると復活 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内をスクロールして動きを確かめてね! 動きを実現する仕組み jQueryを使い、指定のエリアidの高さ以上スクロールをしたら、ヘッダーにクラス名を付与する。 クラスが付与されたらCSSで非表示にする。 さらに、JavaScript でスクロール値の比較を行い、上にスクロールをしている間はヘッダーを出現させるためのクラス名を付与して、CSSでヘッダーを表示する。 [使用するライブラリ] * jQuery HTMLの書き方 head終了タグ直前に自作のCSSを読み込みます。 <header id="header" class="DownMove"> <h1>Logo</h1> <nav> <ul id
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">ふわっ(左から)<
See the Pen 9-4-2 SVG アニメーションを使い、手書き風アニメーションを実現 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」内の表示を確かめてね! 動きを実現する仕組み 仕組み ⇒ SVG形式のベクターデータを利用して、CSS、JavaScriptを使って動かす。 長所 ⇒ 拡大縮小しても画質が劣化しない。 短所 ⇒ 制作ソフト、もしくはプログラムの知識が必要なので、導入にひと手間かかる vivus.jsというライブラリを使用して、アウトライン化したテキストの上でマスク用のパスが動き、徐々にテキストを出現。 ※サンプル9-4-2(※サンプルデータ:https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/move02/9-4-2/9-4-2.zi
アニメーションの指定方法 このサイトで紹介しているサンプルコードの多くは、CSSのanimation プロパティを使用して動かしています。 ※transitionプロパティを使うこともできますが、より細かい動きの設定が可能なanimationを主に採用しています。 アニメーションの基本設定は、animation-nameにつけた名前に対し、keyframesで動きの変化を指定します。 また、アニメーションの繰り返しや、変化する時間の調整などの設定も追加できます。 See the Pen CSSアニメーションで動きを指定しよう by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね!↑ アニメーションはまとめて指定できます!
jQueryとCSSアニメーションを組み合わせてスクロールをしたら要素を動かす方法をご紹介します。 スクロールをしたら要素を動かす仕組み HTML 内の「動かす要素」に「動くきっかけの起点となるクラス名」を付け、jQuery 側で動くきっかけの動作(スクロールなど)をしたら、アニメーション用のCSS のクラス名が付与されるという指定を行う。 (例)スクロールをしたらふわっと出現させる 動くきっかけの起点となるクラス名 「fadeUpTrigger」の位置までスクロールをしたら、「fadeUp」というアニメーション用のCSSのクラス名を付与して動かす。 See the Pen 「画面が読み込まれた後に動く場合」と「画面がスクロールされたら動く場合」の 動くきっかけの指定をまとめる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. HTMLの準備 ① HTM
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:動画ファイルが利用できない
See the Pen 5-9 星がキラキラ by 動くWebデザインアイディア帳 (@ugokuweb)on CodePen. 「Result」内の表示を確かめてね! 動きを実現する仕組み particles.jsというライブラリのオンラインジェネレーターを利用して描画を行い、HTML内の<div>タグの背景に指定する。 [使用するライブラリ] particles.js(https://vincentgarreau.com/particles.js/) HTMLの書き方 head終了タグ直前に自作のCSSを読み込みます。
このサイト内に掲載している多くの動きは、jQueryというライブラリをベースにして動かしています。 「画面が読み込まれた後に動く」「スクロールしたら動く」「クリックしたら動く」 といった代表的な「動くきっかけ」の記述の仕方を理解していきましょう。 動くきっかけを指定する基本的な記述
See the Pen 4-1-4ロゴアニメーション by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. 「Result」下のRerunを押して動きを確かめてね!↑ 動きを実現する仕組み CSS のアニメーションで天地中央に配置したアイコン(ロゴ)を動かす。 jQuery でローディング画面をフェードアウトする。 [使用するライブラリ] * jQuery HTMLの書き方 head終了タグ直前に自作のCSSを読み込みます。
jQueryとCSSアニメーションを はじめたばかりの方へ Webデザインのスクール講師が 「動かしたいパーツ」ごとの 逆引きリストをつくりました News 2024.03.27Gmailにおける特典受け取りについて2024.01.185-1-1、5-1-2 グローバルナビゲーション ドロップダウンメニュー(上・左)に関するCSSコード不備のお詫び2023.08.305-1-3、5-1-4 グローバルナビゲーション ドロップダウンメニュー(写真付 上・左ナビ)に関するコード不備のお詫び2022.10.195-1-7 「グローバルナビゲーション-スクロールするとハンバーガーメニューに変化-」に関するコード不備のお詫び Gmailにおける特典受け取りについて 【お知らせとお詫び】 2024年2月にGmailのガイドラインが変更となった影響で、特典受け取りとお問い合わせフォームの内容がGmail
このページを最初にブックマークしてみませんか?
『ウェブ事業部 | 有限会社 久保田商事』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く