menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/01/23
  • JQuery

シンプルなコードでページ読込み時にオシャレにfadeInする

ページ表示時にフェードインさせるプラグインや方法はたくさんありますが今回は最も簡単でシンプルな方法を紹介します

フェードイン

使用方法

準備するファイル

・jquery.js

外部ファイルの読み込み

JavaScript

ページ全体がフェードイン表示されるように「body」を対象にしています。

Stylesheet

CSSでbodyに「display:none」を設定しページ全体を非表示にします。

Option

fadeIn()の数字を設定してfadeのスピードを調整してください。
(3000ms) = 3秒でフェードイン
(slow) (normal) (fast) 値でも指定できます。

今回はbodyに設定してページ全体をfadeさせましたが特定の要素を設定することもできます。シンプルで軽いのでおすすめです。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11