javascript・jQuenry

画像と同じ色のシャドウを加えてくれる【cosha】 | Webクリエイターボックス

2020/09/16(Wed) 10:34

通常 box-shadow などで画像に影をつけると単色になりますが、今回紹介する「cosha」を使えば画像を反射したようなカラフルな影を実装できます。画面に透明感がでて素敵に演出できますよ！

https://www.webcreatorbox.com/tech/cosha

SVGでテキストにマーカーを引いたり、くるっと丸く囲む超軽量JavaScriptライブラリ -Rough Notation

2020/06/15(Mon) 10:11

テキストに蛍光ペンで引いたようなマーカーを引いたり、下線をつかたり、丸や矩形で囲ったり、さまざまなスタイルでテキストを強調表示できる超軽量（3.63Kb）のJavaScriptライブラリを紹介します。

https://coliss.com/articles/build-websites/operation/javascript/create-and-animate-hand-drawn-annotations.html

日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker

2020/04/03(Fri) 09:55

デスクトップでもスマホでもタブレットでも動作し、フレームワークの有無に関係なく機能する、日付・時間のピッカーを簡単に実装できるわずか5Kbの軽量JavaScriptを紹介します。

https://coliss.com/articles/build-websites/operation/javascript/aeon-date-picker.html

これなら簡単！数字や文字のパネルをぱたぱた回転させるフリップを実装できるスクリプト -Flip Countdown

2020/03/25(Wed) 10:09

カウントダウン、カウンター、タイマー、メッセージなど、数字や文字のパネルをぱたぱた回転させるフリップを簡単に実装できるスクリプトを紹介します。ぱたぱた回転するアニメーションが非常に気持ちよく

https://coliss.com/articles/build-websites/operation/javascript/flip-countdown-with-animation.html

モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出（2019年版）

2019/12/13(Fri) 09:57

スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？　かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。

https://ics.media/entry/191211/

Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap

2019/08/28(Wed) 09:49

Webページ内のコンテンツの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプトを紹介します。マップはページ内リンクにも対応しています。

https://coliss.com/articles/build-websites/operation/javascript/mini-map-for-web-pages.html

タッチデバイスも完全サポート！さまざまなスライダーをシンプルなコードで実装できる軽量JavaScript -Tiny slider

2019/07/17(Wed) 09:56

デスクトップ・タブレット・スマホをサポート、シンプルなスライダーをはじめ、さまざまなスライダーを簡単に実装できる軽量JavaScriptを紹介します。

https://coliss.com/articles/build-websites/operation/javascript/tiny-slider-for-all-purposes.html

遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js

2019/07/04(Thu) 09:43

画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。

https://coliss.com/articles/build-websites/operation/javascript/boundsjs-asynchronous-boundary-detection.html

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut

2018/09/28(Fri) 10:00

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。

https://coliss.com/articles/build-websites/operation/javascript/animate-on-scroll-library-scrollout.html

[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2

2018/08/31(Fri) 09:53

チャートやグラフは、さまざまなスマホアプリで見かけます。スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。

https://coliss.com/articles/build-websites/operation/javascript/chart-library-for-mobile-f2.html