Tag : jQuery

READ MORE

以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで1…

READ MORE

Webページ制作時において、<li>や<img>などのインライン要素に対してHTMLソース上でタグ間を改行させると半角スペースほどの空白(余白)が発生してしまい扱いに困ることがあったりするので、この空白をjQuery使って強引に削除する実験をしてみました。jQueryでインライン要素をHTML内で改行すると発生する空白…

READ MORE

レスポンシブレイアウトで構築したWebページの場合、閲覧している画面サイズによってレイアウトが最適化される構成になるのでPC用レイアウトとスマートフォン用レイアウトを任意で切り替えることは出来ないものだと思っていたのですがjQuery等を使ってmetaの「viewport」を切り替えることによってスマートフォンでもPC…

READ MORE

最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くありその都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですがjQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ自分でもいろいろと試してみたので実験内容と併せて紹…

READ MORE

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

READ MORE

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

READ MORE

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

READ MORE

Webページ上のテキストや数値を表示する演出でスロットマシンの様な回転アニメーションの必要性に駆られた事がこれまでに何度かありその度に苦労していたのですがとても簡単に同様のアニメーションを実装することができるスクリプトがあったので自分用メモとして紹介してみます。Odometer - Transition numbers…

READ MORE

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

READ MORE

Webページ作成時にリストやdivなど連続したブロック要素を並べた際に中の要素量によって高さがまちまちになってしまった場合個々の高さを揃えるのはCSSだけだと何かと面倒だったりします。Webページ内に並べられたブロック要素の高さを揃えるjQueryプラグインは多々ありますが、ここ最近新たに話題になった高さを揃えるプラグ…

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR