サイト構築 -JavaScript

[JS]これなら簡単!シンプルなHTMLで、Masonryレイアウトを実装できる超軽量スクリプト -Macy.js

Post on:2017年8月18日

画像やカード型コンテンツをレンガ状に敷き詰めて配置する、レスポンシブ対応のMasonryレイアウトを簡単に実装できる超軽量(4kb)スクリプトを紹介します。 jQueryやCSSなど、他のファイルは一切不要で、単体で動作

...記事の続きを読む

[JS]これなら簡単で便利!要素がビューポートに表示されているかを判定できる -Intersection Observer

Post on:2017年8月10日

スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。

...記事の続きを読む

[JS]レスポンシブ対応!テキストを親コンテナに応じて、ぴったりに配置するスクリプト -Fitty

Post on:2017年8月1日

テキストを親コンテナの幅に応じて、ぴったりに配置されるようにサイズ変更する超軽量スクリプトを紹介します。 レスポンシブ対応で、日本語にもWebフォントにも対応しています。 Fitty Fitty -GitHub

これからは今まで以上に、jQueryが必要なくなるかもしれない

Post on:2017年7月14日

3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than

...記事の続きを読む

実装が非常に簡単!アニメーションに対応したSVGアイコンと埋め込みコードがセットになったライブラリ -Titanic

Post on:2017年7月5日

アニメーションするSVGアイコンもそれを実装するJavaScriptも、ゼロから作成すると時間がかかります。 Webページやスマホアプリでよく使用するさまざまなアイテムが用意された、アニメーションに対応したSVGアイコン

...記事の続きを読む

目的にあったJavaScriptのライブラリを探す時にかなり便利、JavaScript専門の検索エンジン -searchlibs

Post on:2017年6月19日

スライダーやカルーセル、ナビゲーション、アニメーションを伴ったスクロールエフェクトなど、目的にあったJavaScriptのライブラリを探す時に役立つJavaScript専門の検索エンジンを紹介します。 人気はあるのか、ア

...記事の続きを読む

[JS]スマホにも対応!ページをスクロールした際、要素をアニメーションで表示する軽量スクリプト -t-scroll

Post on:2017年6月5日

スマホやタブレットに対応、もちろんデスクトップにも対応、ページをスクロールした際に、要素にさまざまなアニメーションを簡単に適用できる単体で動作する軽量(4KB)のスクリプトを紹介します。 jQueryなど、他のスクリプト

...記事の続きを読む

[JS]スマホやタブレットにも完全対応!垂直・水平方向にパララックス スクロールさせる軽量スクリプト -paroller.js

Post on:2017年5月24日

ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。 モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示さ

...記事の続きを読む

「position: sticky;」より便利!スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky

Post on:2017年4月26日

HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sti

...記事の続きを読む

jQueryの「$」やセレクタなどをサポート、jQueryの代替として利用できる超軽量スクリプト -Selector

Post on:2017年4月19日

jQueryは確かに便利ですが、すべての機能が必要かと言われれば、そうではない人が多いと思います。 「$」やセレクタなど、jQueryの機能をサポートしたjQueryの代替として利用できる超軽量スクリプトを紹介します。

...記事の続きを読む

 1 2 3 4 5 ... 119 120 Next

top of page

©2017 coliss