WhiskyStudios

フェードインには、 CSSのキーフレームアニメーション を用いています。 そして、 animation-delay を使って時間差が出るように遅延時間を調整しています。 HTML. 画像が下から上へ移動しながら順番にフェードインで表示される、イメージフェーダーのサンプルです。 CSSのtransitionを使用せず、jQueryのanimateのみで実装しています。 YouTubeLive + OBSでチャットを映しながら配信する時に使われる Chat v2.0 Style Generator の日本語版です。 対象のHTMLタグの class の値に wowを含めることで、該当要素がスクロールフェードインの対象とすることができます。 続けて、用意されているアニメーション用CSSセレクタの中から目的のセレクタを指定することで指定したモーションでスクロールフェードインさせることができます。 フェードインとともに、頻繁に使用されるcssアニメーションといえば、フェードアウトです。テキストがゆっくり消えていくようなアニメーションも、cssで手軽に実装することができます。 これもまた例によって、サンプルをつくってみました。 この記事では、ウェブサイトでよく見かける、CSSのフェードインアニメーションのやり方をサンプル付きで解説していきます。, コピペでサクっとフェードインを実装できるように「classを付けるだけ」の簡単仕様です。, どちらも必要なコードをコピペしてclassを追加するだけですので、初心者の方でもご自身のサイトにスグ実装できるかと思います。, どちらもコピペで実装可能です。（サンプルページのdownloadから全ソースダウンロードできます）, 記事後半のスクロールとフェードインを連動するサンプルはJavaScript（jQuery）を使っているので少し難しく感じるかもですが、定番の使い方ですのでぜひチャレンジしてみてください。, CSSのanimationプロパティーを使用して、スライドしつつフェードインしてくるアニメーションを解説します。, このCSSをコピペして、フェードインさせたいTHMLのタグに「fade-in-bottom」というclassを追加してみてください。それだけで、下からス〜っとフェードインするかと思います。（上・左・右からフェードインするパターンも少し下にコピペコードを記載しています）, プレストとコントローラーの関係をイメージすると分かりやすいです（逆に分かり難いかな、、、）先ほどのCSSをブロックでみていくと次のようになります。, まずanimationプロパティーについて簡単に解説します。先ほどの画像で、プレステのコントローラー側のブロック「速さ・時間・回数 etc」をコントロールする方から見てみます。, サンプルでは、真ん中の文字の「フェードイン開始のタイミング」を少し遅らせています。その場合は次のように「animation-delay」プロパティーを使い「何秒待ってから開始するか」を記載します。この場合は「0.3秒」待ってからアニメーションスタートとなります。, どんなアニメーションなのか？その内容を「keyframes」に書きましょう。先ほどの画像でいうプレスト本体の方です。, まずアニメーションの名前を決めます。コントローラーの方で「コントロールするアニメーション」をどれにするか決める時に、この名前を指定します。遊ぶゲームソフトを決めるようなイメージです。, 下からスライドしてフェードインするアニメーションなので分かりやすく「fadein-bottom」にしました。, フェードインでは定番のCSSプロパティー「opacity」と「translate」でアニメーションを作ります。, CSSアニメーション考え方はとてもシンプルで、「0％の状態」と「100％の状態」を書けば後は自動的に変化してくれます。, 20ピクセル分下にずれた状態たいから、元の位置に戻るようにアニメーションしてくれます。, ※補足※縦方向の位置調整は「translateY」、横方向の位置調整は「translateX」で指定します。, この二つの変化が合わさって、次のように「開始→終了」までアニメーションする分けです。, 先ほどの説明を踏まえ、「上から／下から／左から／右から」フェードインするCSSを4パターンをコピペ用に記載します。, HTMLのタグに追加するclassは次の通りです。CSSを全てコピペしてから、フェードインさせたいタグにお好みでclassを追加してください。, このコピペ用のCSSはコードがスッキリするように「animation」をまとめて書いています。コードが短く見やすくなるので、animationプロパティーはまとめて書くのに慣れておきましょう。, コピペ用のCSSでは、③の「animation-delay」を「0」にしてありますが、アニメーションスタートのタイミングをずらしたい時は、上記画像の書き方を参考に秒数に変えてください。, 後半では、CSSとJavaScript（jQuery）を使って、スクロールしたらフェードインする定番のアニメーションを解説していきます。, 初心者の方は難しく感じるかもしれませんが、必要なコードをコピペして、フェードインさせたいHTMLタグにclassを付けるだけでOKなので、頑張ってみてください。, とてもシンプルですが、これを導入するだけでウェブサイトがカッコ良くお洒落になりますよ。, 手順はとても簡単です。「CSS／jQueryの本体／jQueryのコード」をコピペ。「slide-bottom」と、トリガーになる「show」というclassをフェードインさせたいHTMLのタグに付けるだけです。, jQueryを使っているので複雑に感じるかもしれませんが、各々の役割はシンプルで2ステップです。, このように「show」というクラスはあくまでjQueryを発動するための目印で、jQueryもただCSSを調整する役割です。難しそうに見えますが、やってる事はとてもシンプルです。, スクロール連動のフェードインでは「animationプロパティー」ではなく「transition」を使用します。transitionは時間経過による変化を簡単にコントロールできる便利なプロパティーでとても扱いやすいです。, プロパティーをまとめて書きましたが、個別に書く方法や数値を細かく指定する方法など、複雑な設定も可能です。「Qiitaの【CSS3】Transition（変化）関連のまとめ」がすごく丁寧にまとめてあったので、詳しくしりたい方はぜひご覧ください。, アニメーションに時間差を付けたい場合は、赤い下線の「0s」の数字を変更してください。1秒待ってから処理したい場合は「1秒 = 1s」となります。, 最初は難しいですが、スクロールをトリガーにした処理の定番ですので、少しずつでも慣れていきましょう。, 上下左右の4パターンのコピペ用CSSです。仮に左からフェードインさせたい場合は、そのHTMLタグに2つのクラス「slide-left」と「show」を付けてください。（jQueryは1パターンだけでOKです）, かなり強引に、ほとんど全ての要素にクラスを付与してます。簡素な見た目ですがご勘弁ください。, この記事のサンプル2種は、以前「固定ヘッダーをレスポンシブ化する」記事で紹介した、ヘッダーとメインビジュアルのコードを流用しています。定番のレスポンシブヘッダーの作り方を紹介しているので、興味のある方は是非。, CSSのみの方はanimationプロパティーを使い、スクロール連動のフェードインはtransitionを使ってアニメーションをさせています。, どちらも、実践で良く使うアニメーションですので、慣れておくとウェブ制作のちょっとした演出でとても便利です。, 特に後半の、CSSとjQueryを使って実装するスライドしながらフェードインする演出は、数多くのウェブサイトで実装されています。, jQueryのところが難しいかもしれませんが、jQueryの基本的な処理ですので、難易度的には、教材で勉強中の方や教材を終えたばかりの方にオススメのコードだと思います。, また、他サイトでもこの手のフェードインは多数の方が解説していますので、この記事で上手く行かなかった方は、他のサイトもチェックしつつモノにしてください。, 記事前半「CSSだけのフェードイン」と記事後半「スクロールと連動するフェードイン」は、どちらも.

プリウスα インチアップ 燃費 5, ウェディングドレス ボレロ 作り方 7, お酒 試飲 許可 11, カタナ フレーム 錆 13, α7 Iii ブログ 4, チャット 用語 英語 5, アイシンaw 2ch 46 13, ポケモン 塗り絵 ソードシールド 4, Excel Vba 列挿入 複数 10, エクセル 近似曲線 式 E 7, スクエア ロー アンテナ 原理 5, 老犬 預かり 神奈川 5, Crv ナビ 9インチ 8, バレーボール ネット 張り方 6, 応用化学 生命科学 違い 5, 力士 食事 伝説 15, Word 文字 ○ 囲む 4, 犬 雷 ショック死 4, 実家 ゴミ屋敷 帰りたくない 6, 吉祥寺 卵 不使用 5, 中和滴定 レポート 感想 14, 小学3年生 国語 問題集 おすすめ 4, Cbc アナウンサー 田中優奈 16, スプレッドシート ローマ字 変換 16, 猫 頭を振る ふらつく 20, Aviutl 色 反転 6, 雨 自転車 髪型 6, サピックス 夏期講習 コロナ 4, デスクワーク モニター サイズ 4, 宅 建 写真 自 撮り 22,