Category : TIPS

READ MORE

先日、AllAboutさんの記事でWebページ上のテキストに対して「1文字ずつ色を変えるなど、文字単位で装飾する方法 [ホームページ作成] All About」と題したjQuery+CSS3を使って1文字ずつ装飾を変える方法を解説していましたがこれをCSS3未対応ブラウザでも実装できるようにjQueryのみで文字単体に…

READ MORE

パララックスサイトやAppleのプロダクトページの様な動きを付ける為のスクロールして特定の位置でアニメーション等の処理を実行させることができるjQueryプラグイン等をここでも何度か紹介しましたがプラグインのバージョンによって動作仕様が変わってしまっていたり上からのスクロールと、下からのスクロールの判断が微妙だったりし…

READ MORE

jQueryを使ってのレスポンシブに対応したスライドショーを実装するいくつかのパターンを紹介してきましたが、サムネイルも何もなしでただ画像(コンテンツ要素)がクロスフェードするだけのシンプルなスライドショーのレスポンシブに対応したパターンの要望を多くいただいたので試しに作ってみたのを紹介してみます。jQueryでレスポ…

READ MORE

以前に「jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験」と題して「もっと見る」ボタンで画像を次々と読み込ますUIを紹介しましたがそこで紹介したスクリプトでは連番で構成している画像要素のみの追加だったので「jQueryでページ最下部までスクロールした際に外部HTML(JSON形式)化した要素を追加する…

READ MORE

Googleさんの画像検索で使われているサムネイルをクリックするとすぐ下にアコーディオン形式で詳細エリアが広がるUI。このUI動作を実装するには「SuperBox」というjQueryプラグイン等が有名だったりしますが画面仕様等ちょっと理想と違う構成のところがあったり動作が少し重かったりしたので実験がてらjQueryを使…

READ MORE

TwitterやFacebookで見るUIの様な、ページの最下部にスクロールした際に自動的に追加要素の読み込み処理をするjQueryプラグインは多々ありますが任意のHTMLソースを簡単に追加できるものがなかなか見当たらなかったのでjQueryを使ってJSON形式で試しに作ってみたのを紹介してみます。jQueryでページ…

READ MORE

先日ここで、レスポンシブ対応のスライドショーとして、「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」と題して、クロスフェードで切り替わるレスポンシブスライドショーを紹介しましたがフェード切り替えばかりじゃおもしろくないと思い同様の構成で切り替わる際に、画像を分割してアニメーション…

READ MORE

半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して画面幅めいっぱいでのコンテンツスライダーを紹介しましたが当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応さ…

READ MORE

先日ここでレスポンシブ対応のスライドショーの試作品として「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法 」と題してjQueryを使ってのレスポンシブ対応のサムネイル付きクロスフェードスライドショーを紹介しましたが、操作面に関してフリック操作には対応していなかったので、メイン部分に…

READ MORE

以前からjQueryを使ってのシンプルなスライドショーをいくつか紹介していますがやはり今後はサイト上に設置するスライドショー関連もレスポンシブに対応している必要が出てくることは必至なので試しに作ってみたのを紹介してみます。jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法今回のレスポン…

BlackFlag
FOLLOW
Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技