javascript・jQuenry

日付・時間のピッカーを単独の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

テクニカルSEOの上級者になりたいならJavaScriptに精通すべし

2018/08/24(Fri) 09:50

SEO に一生懸命に取り組んで精通したいのであれば、今後は JavaScript に詳しくなることを、Google の John Mueller（ジョン・ミューラー）氏は推奨しました。

https://www.suzukikenichi.com/blog/you-should-learn-seo-if-you-want-to-be-keen-on-technical-seo/

[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts

2018/08/01(Wed) 09:55

チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。

https://coliss.com/articles/build-websites/operation/javascript/modern-javascript-charting-library.html