サイト構築 -JavaScript

[JS]カードやリストをアニメーションで移動できるレスポンシブ対応のグリッドを実装するスクリプト -Muuri

Post on:2017年12月5日

レンガ状のカードやリスト状のパネルをドラッグ&ドロップで移動したり、フィルタリングやソートも可能なレスポンシブ対応のグリッドを簡単に実装できるスクリプトを紹介します。通常だと複数のライブラリを組み合わせないと実装

...記事の続きを読む

スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama

Post on:2017年11月24日

Intersection Observerを利用したWebページが増えてきました。 IntersectionObserversは、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる(または交差する「

...記事の続きを読む

Web制作者がチェックしておきたい、気持ちいいインタラクションやUIを実装できるJavaScriptのまとめ

Post on:2017年11月14日

Webサイトやブログに、気持ちいいインタラクションやユーザーインターフェイスを実装できるJavaScriptを紹介します。実用的なものから、あまり見かけない新鮮なものまで、素晴らしいアイデアがいっぱいです!

[JS]要素がビューポートや指定した範囲に表示されたか判定する超軽量スクリプト -Emergence.js

Post on:2017年11月9日

ページをスクロールして、指定した要素がビューポートに表示されたかを判定し、アニメーションなどを適用できる超軽量のスクリプトを紹介します。 ビューポートだけでなく、範囲を指定することもできるので、かなり面白いと思います。

...記事の続きを読む

[JS]このスクリプト一つで、さまざまな用途に合わせたスライダーが実装できて便利 -Tiny Slider

Post on:2017年11月8日

スライダーとしてのあらゆる機能を備えた単体で動作する軽量のスクリプトを紹介します。シンプルなHTMLでスライダーを実装でき、ベーシックなスライダーからフルカスタマイズされたスライダーまで、簡単に実装できます。 Tiny

...記事の続きを読む

今までにない快適動作!サイドバーを⬆⬇スクロールに合わせてぴたっとくっつけるスクリプト -Sticky Sidebar

Post on:2017年10月16日

サイドバーをスクロールに合わせて、ぴたっとくっつける快適に動作する超軽量スクリプトを紹介します。 コンテンツが長い・短い場合はもちろん、サイドバーが長くてビューポートをはみ出す場合にも期待通り完璧に対応します。スクリプト

...記事の続きを読む

Web制作者は要チェック!モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js

Post on:2017年10月10日

ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。 Micromoda

...記事の続きを読む

[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

 1 2 3 4 5 ... 120 121 Next

top of page

©2018 coliss