サイト構築 -JavaScript

[JS]画像の拡大表示をシンプルなコードで実装し、スマホ時のクロップ表示にも対応しているスクリプト -enhance.js

Post on:2016年2月29日

Mediumで採用されているような画像拡大のエフェクトに、より使いやすくなるように工夫が加えられたスクリプトを紹介します。 アニメーションがより洗練され、スマホなどの小さいサイズではクロップして画像を表示します。 enh

...記事の続きを読む

これはかなり気になる!スタイルシートの可能性が広がるReact.jsのCSS版のようなスクリプト -Descartes

Post on:2016年2月23日

「React: CSS in JS」からインスピレーションを得て、CSSをJavaScriptで記述し、スタイルの定義、変数・関数の利用、レスポンシブやスクロールなどのイベントに動的に値を生成できるスクリプトを紹介します

...記事の続きを読む

[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes

Post on:2016年2月22日

スクリプトは外部ファイルを記述するだけ、レスポンシブ用画像の配置や設定はHTMLベースで記述できるスクリプトを紹介します。 超軽量(5.8KB)で、jQueryなど他のスクリプトは不要です。 lazySizes -Git

...記事の続きを読む

最近のWebサイトで使われている、レスポンシブ対応のページレイアウトに役立つスクリプトのまとめ

Post on:2016年2月12日

レスポンシブ対応のカード型レイアウト、中央で分割されたレイアウト、動画や画像や幾何学模様を背景に配置したり、画像やコンテナのサイズをデバイスごとに最適化したりなど、ページのレイアウトに役立つスクリプトを紹介します。 st

...記事の続きを読む

[JS]スマホもOK!縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch

Post on:2016年1月25日

縦長ページで次のコンテンツを表示する時、画像やテキストを配置したコンテンツスライダーで、すぅーとスライドさせたり、ぱたり、くるり、ぐい~んなど、ブラウザいっぱいのコンテンツやパネルをさまざまなアニメーションで表示させるス

...記事の続きを読む

[JS]アニメーションを使った快適操作がすごい!レスポンシブ対応のフリップコンテンツを実装する軽量スクリプト -jQuery Flipster

Post on:2016年1月15日

レスポンシブ対応、タッチデバイス対応、CSS3アニメーションを使った快適操作が気持ちいいさまざまなフリップコンテンツが実装できる軽量(5kb)のスクリプトを紹介します。 パタパタ、クルクル、ペラペラ、本当に気持ちよく動き

...記事の続きを読む

[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js

Post on:2016年1月12日

スマホ・タブレット・デスクトップのブラウザがさまざまな機能(WebGL, Canvas, rem unit, async属性、タッチイベントなど)に対応しているか判別し、その判定を利用することができる超軽量(1kb)スク

...記事の続きを読む

2015年総まとめ、jQueryのプラグインとスクリプト100選

Post on:2015年12月17日

毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやS

...記事の続きを読む

[JS]一歩進んだレスポンシブ用の画像配置!見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS

Post on:2015年11月30日

レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。 フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。 Re

...記事の続きを読む

[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ

Post on:2015年11月25日

縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。

top of page

©2024 coliss