サイト構築 -JavaScript

[JS]これスゴイよ!スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic

Post on:2014年3月10日

スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピ

...記事の続きを読む

[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js

Post on:2014年3月7日

ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカ

...記事の続きを読む

[JS]画像のホバー時の方向によってオーバーレイをスライド表示するスクリプト -SlipHover

Post on:2014年3月6日

画像やパネルなどをホバーすると、テキストを配置したオーバーレイを2D/3Dのさまざまなアニメーションで表示するjQueryのプラグインを紹介します。 スライドの方向は、ホバーの方向によって変わります。右からホバーしたら、

...記事の続きを読む

[JS]異なる高さを単に揃えるだけでなく、グルーピングや列に応じて揃えることも可能な便利スクリプト -matchHeight

Post on:2014年3月4日

高さを揃える系のスクリプトは数多く紹介してきましたが、これはその中でもかなり使い勝手のよく、あーこの機能が欲しかった! というスクリプトです。 コンテンツの量が異なっているのを揃えるのは当たり前、パディングやマージンやボ

...記事の続きを読む

[JS]シンプルでかっこいいナノサイズのバーを実装するjQueryいらずの超軽量スクリプト -nanobar

Post on:2014年3月3日

ブラウザの上部に、シンプルでかっこいいナノサイズのバーをアニメーションで実装するスクリプトを紹介します。 jQueryなど他のスクリプトは必要なく、725bytesで超軽量です。 nanobar nanobar -Git

...記事の続きを読む

[JS]ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト -Scroll Depth

Post on:2014年2月28日

ユーザーがページを見た際に、どのくらいスクロールされているのか、また指定した要素がスクロールされて表示されるまでにどのくらいかかるのか、といったデータをGoogle Analytics上で解析できるようにするjQuery

...記事の続きを読む

[JS]このホバーエフェクト楽しい!シールのようにぺらっとめくるスクリプト -Sticker.js

Post on:2014年2月18日

写真画像やアイコンなどを配置したベタ塗りのボタンなどをサークル状にし、ホバーするとシールのようにぺらっとめくれるようにするスクリプトを紹介します。 実装は非常に簡単で、jQueryなどの他のスクリプトは必要ありません。

...記事の続きを読む

[JS]モーダルウインドウの実装を検討する時はこのスクリプトもチェック! -vex

Post on:2014年2月13日

カスタマイズ性に優れ、シンプルなものからカラフルなものまでさまざまなテーマも用意されており、簡単に実装できる超軽量(6KB)のjQueryのプラグインを紹介します。 レスポンシブ対応、IE8+もサポート、ウインドウを表示

...記事の続きを読む

[JS]デモがめちゃ楽しい!jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js

Post on:2014年2月12日

ページを表示した時やスクロールした時など、ページ上の要素がビューポートに表示された時に各要素にさまざまなアニメーションをセットする超軽量(3KB)スクリプトを紹介します。 上から左から右からスライドさせたり、タイミングを

...記事の続きを読む

[JS]画像とコンテンツを交互に配置する簡単実装でパララックスコンテンツを作成できるスクリプト -Parallax ImageScroll

Post on:2014年2月10日

ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。 もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェ

...記事の続きを読む

top of page

©2024 coliss