jQueryで画像などコンテンツ要素を順番にフェードインさせる方法｜BLACKFLAG
写真のギャラリーページなど、たくさんの画像が一覧となって並べられているページでの ページロード時に画像が一枚ずつ順番にフェードインしながら表示される演出技法。 一度に全ての画像がフェードインするよりも 滑らかな読み込みアニメーションを演出することができます。 この画像（コンテンツ要素）が順番にフェードインしながら表示する演出を jQueryを使って簡単シンプルに実装する方法を紹介してみます。 まずは動作のサンプルから。 下記画面の「リロード」を押してみてください。 サンプルを別枠で表示する ページの読み込みが終わると 一覧画像が左上から順々にフェードインして表示されます。 この全体構成について、 まずはHTMLから。 ◆HTML <ul> <li><a href="#"><img src="img/photo1.jpg" alt="" /></a></li> <li><a href="#"
jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BLACKFLAG
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法｜BLACKFLAG
jQueryでの画像ビューアー用プラグインはたくさん公開されていますが、 単純にサムネイルを並べて、クリックしたらメインビジュアルが切り替わる シンプルなスライドショー的ビューアーを作ってみたので紹介してみます。 まずは動作のサンプルから。 サムネイル画像をクリックしてください。 jQuery SIMPLE IMAGE VIEWER【SAMPLE】 「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」サンプルを別枠で表示 下部に並べてあるサムネイルをクリックすると メインビジュアル部分がクロスフェードして切り替わります。 （自動でスライドする動作などは今回は付けていません。） サムネイルは透過具合でアクティブ状態か、 そうでないかを変化させています。 全体構成についてHTMLから。 ◆HTML <div id="viewer"> <div> <img src="img/p
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
