Web-シェア-ツイート-ブックマーク-Pinterest最近のウェブサイトに多く見られる、写真やメニューが「ふわっ」と表示されるアニメーションありますよね。あれを実装したいという方のために、一番簡単なCSSでの作り方を紹介します。JavaScriptを使えば、スクロールに合わせてふわっと表示できますが、少し難易度がたかいため、最後に少しだけご紹介します。ほとんどこれで十分でしょう。Gナビ編(スクロール関係なし)ファーストビューで表示されるグローバルナビは、スクロール関係なくふわっと表示させたいので、JavaScriptの必要なく下記コードだけでじっそうできまあす。Gnavの他にも企業ロゴや電話番号など、ファーストビューで見られるようなページ上段に出てくる要素なら何でも構いませんが、ページ下部の要素には向きません。}class=”fadenav”class名をfadenavとしていますが、変更して大丈夫です。class="fadenav"><ul><li>TOP</li><li>メニュー</li><li>お問い合わせ</li></ul></nav>スポンサードリンクスクロール追随編(要JavaScript)スクロールにあわせてスライド&フェードアニメーションを表示する、よくある演出です。JavaScriptが必要ですがHTMLの最後に追記するだけのもので、特に難しいものではありません。(⚠️要jQary)HTMLここは先ほどのGナビ編と変わりません。class="fadein"><ul><li>TOP</li><li>メニュー</li><li>お問い合わせ</li></ul></nav>CSSclass名はfadeinとしていますが、同名をJavaScriptと同時に修正すれば他のクラス名でも構いません。0);}JavaScriptHTML後半の</body>直前にコピペしてください。});</script>jQueryjQuery現在のjQueryバージョンがなにかよくわかりませんが、私の場合は下記のバージョンで動いています。このコードをhtmlの</body>タグ直前あたりにコピペしてください。src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>参考にしたサイト参考にしたページは以下のサイトです。細かい設定変更の際はそちらを見てください。q-Azq-az.net【CSS】ページ読み込み時にフワっとスライドフェードインするアニメーションブログなどでページを読み込んだ時にふわ〜っと記事のタイトルやヘッダーがスライドして出てくるのをよく見かけるようになりました。imasashi.net最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。要するに...imasashi.netCSSこの記事を書いた人mojigumi「もじぐみ」の代表、コウです。Webデザインと管理。最近はブログ、動画、3DCG、AR、LINEスタンプ等のコンテンツ配信にも力をいれ、自分自身もランニングアートでコンテンツ化に努めています。...新しい投稿ランニングコーデでカッコよく走りたい男のファッション研究(2...関連記事WebHタグや本文の改行禁止、折り返し禁止をHTMLとCSSで制御したい時HTML+CSSを使って、一番シンプルに、改行を制御、折り返しを制御する方法を作ってみました。コピペして使ってください。今時のテキストは、文中に絵文字を入力できるが、ない時は画像をインラインで挿入するしかない。簡単そうだが、cssで随分に微調整しなくてはならず、面倒なので、レガシーcssに含めて、自己標準化してしまおう、ってはなし。mojigumi2020年7月21日WebWebスクロールすると透明から白く変化するナビバーをシンプルなCCSで作りたいスクロールすると透明から白く変化するナビゲーションバーを手軽に作りたい。[...]mojigumi2018年6月23日Webこの投稿へのコメントコメントはありません。コメントを残すメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Δこの投稿へのトラックバックコメントはありません。簡単レシピ集このサイトの管理人コウ・タダシWeb、Gデザインを中心に動画、3DCG、ARまでカバー。休日は東京・国立市にランニングアート200コース設計を目標にし、語学では英韓中の準三級検定でクワドリンガルを目指す。SNSフォローよろしくお願いします。TwitterInstagramFacebookYouTubeプロフィールイラスト、Webデザイン、動画、など様々なコンテンツ制作をしております「もじぐみ」です。ここでは仕事、趣味、お勉強ものや、映画レビュー、スポーツ、アウトドアなど、仕事から遊びまで、当事務所関連のブログを公開しております。reserved.動画編集Web制作デザインイラストランニングアート。