Webサイト制作

投稿日:2017年5月10日 更新日:

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。

トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフェクト実装できる方法を書いてるページを見つけました!
ありがとうございます!
フェードインエフェクト簡単実装

サンプルよりもっとゆっくり表示させたいと思い、("slow")の部分を("2000")とかに変更したけど変化なし。
何でだろー?と思ってたら数値入力の時はダブルコーテーション要らなかった。
初歩的なミスですが次の時のためにメモ。

他にも色々なエフェクトがあり、簡単に実装できるようになってます。
jQuery日本語リファレンス

- Webサイト制作
-

関連記事

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー 無限 ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...

cssだけでドロップダウンメニューを実装(軽い!)

ドロップダウンメニューをcssだけで実装できる方法があるらしい。 jsファイルの読み込みがないなら軽くていいなぁと思いやってみた。 まずはhtml 一般的な入れ子構造のリストです。 <heade ...

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

サイトのタイトルを画像置換する方法

よくやり方忘れてしまうのでメモ。 サイトのタイトルをh1とかで記述した場合 それを画像置換するための方法は色々あって 評価が分かれるので現時点でいいなと思っているものを。 まずはhtml <h1 ...