GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編） - ICS MEDIA
JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴15年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基本的なGSAPの使い方を中心に説明しま
サポートが終了したパッケージや危険なパッケージが除外されたJavaScriptライブラリ検索ツール・「Code awesome」 - かちびと.net
Code awesomeはサポートが終了したパッケージや危険なパッケージが除外されたJavaScriptライブラリ検索ツールです。 更にVanilla、React、Vueに分けられており、それぞれ更に細かく用途で探せるようになっています。各項目は名前や最終更新日などでもソート可能です。ただ、任意のキーワード検索ではソートできません。 収集されているライブラリはその場でGithub等のReadmeが表示され、詳細を確認する事が出来ます。ライブラリ探しに困っている方は一度使ってみては如何でしょうか。 Code awesome
WebサイトのUIにさまざまなフローティング要素を実装するためのJavaScriptのライブラリ -Floating UI
WebサイトのUIにフローティング要素、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどを実装するJavaScriptのライブラリを紹介します。 フローティング要素の実装で問題となる配置の向きや衝突やオーバーフローなどにも対応しており、アクセシブルなフローティング要素を実装できます。 Floating UI Floating UI -GitHub Floating UIの特徴 Floating UIのデモ Floating UIの使い方 Floating UIの特徴 Floating UIは、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどのフローティング要素を配置するためのJavaScriptライブラリです。 フローティング要素はコンテンツのフローを中断することなくUIの上に浮かぶため、配置するときに課題が発生します。Floating UIではフローティン
どのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリ・「DFlex」 - かちびと.net
DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。 CLS CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といったもので、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。 そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとし
これなら実装がすごく簡単！スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScript -Animon
Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。 HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画像が右・左からアニメーションでふわりと表示されたり、フェードインやスケールアップ・ダウンなどが簡単に実装できます。 Animon Animon -GitHub Animonの特徴 Animonのデモ Animonの使い方 Animonの特徴 Animonは、Webページ上のDOM要素がビューポートに表示された時に、指定したDOM要素をアニメーション化させるJavaScriptの超軽量（0.9kB）ライブラリです。単独で動作し、他のスクリプトへの依存はありません。 実装は
これなら簡単！フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリ -Flicking
フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリを紹介します。スマホのフリック操作だけでなく、デスクトップのクリックやドラッグ操作にも対応しています。 シンプルなHTMLで簡単に実装でき、Vue、React、Angularもサポート、単体でも動作するJavaScriptです。 Flicking Flicking -GitHub Flickingの特徴 Flickingのデモ Flickingの使い方 Flickingの特徴 Flickingはその名の通り、フリック操作に対応したスライダー・カルーセルを簡単に実装できるJavaScriptライブラリです。新しくなったFlicking 3はフレキシブルで、さまざまな拡張機能を備えており、無限フリック・フリースクロール・スナップ・バウンドをはじめ、異なるサイズのパネル、静止位置のカスタマイズなどもできます。
軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリ・「WinBox.js」 - かちびと.net
WinBox.jsは軽量でカスタマイズ性の高い、非依存のウィンドウ生成ライブラリです。 クリックで開かせることも可能ですが、今回は既に開いた状態のサンプルを用意しました。 <script src="winbox.bundle.js" defer></script> 今回はオールインワンのbundle版を使いました。サンプルでは以下のコードで実装しています。 var node = document.getElementById("content"); new WinBox("サンプルです", { background: "#ff005d", border: "0 1em 15px 1em", x: "center", y: "center", width: "50%", height: "50%", mount: node }); タイトルや背景色、ボーダーサイズや配置場所を決め、内容はid
任意の要素に好みのエフェクトを付与できるシンプルなJavaScriptライブラリ・「party.js」 - かちびと.net
party.jsは任意の要素に好みのエフェクトを付与できるシンプルなJavaScriptライブラリです。 導入も操作も簡単で、利用するに特に困る事も無さそうなので覚えておこうかなと思います。 以下動作サンプルです。 ボタンにクリックするとクラッカー🎉が表示されるエフェクトが追加されています。 <script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script> CDNが用意されていたので今回は使わせてもらいました。 document.querySelector(".button").addEventListener("click", function(e) { party.confetti(this, { count: party.range(20, 40) }); }); セレク
JavaScriptの外部ファイルで簡単に実装できる、映画コンテンツを快適に再生するHTML5動画プレーヤー -Moovie.js
動画、特に映画コンテンツを快適に再生することにフォーカスされたHTML5プレーヤーを実装するスクリプトを紹介します。 実装は非常に簡単でカスタマイズも豊富、字幕は多言語をサポート、動画の再生速度は0.1x-8xまで変更可能、デザインはCSSベースで簡単に変更できます。 Moovie.js デフォルトでも快適、フルカスタマイズも可能 動画の字幕は多言語をサポート 再生速度は0.1x-8xまで変更可能 .vtt, .srtの字幕ファイルをサポート トラックや字幕を動的に追加可能 字幕のカスタマイズ イベント・ショートカットのAPI 依存関係はなし、VanillaJSで構築 すべてのモダンブラウザをサポート レスポンシブに完全対応 MITライセンスで、商用プロジェクトでも無料で利用できます Moovie.jsのデモ デモでは映画コンテンツを再生しながら、Moovie.jsのいろいろな機能を楽しめ
軽量で拡張的な非依存のカルーセルライブラリ・「Tiny-Swiper」
Tiny-Swiperは軽量で拡張的な非依存のカルーセルライブラリです。他ライブラリを必要とせず、軽量ながら単体で動作、必要に応じてプラグインで拡張する事も可能です。 名前からも想定できますがタッチフレンドリーな設計にもなっており、設定もシンプルで使いやすい印象です。 <script src="https://unpkg.com/tiny-swiper@latest/lib/index.min.js"></script> <script> var swiper = new Swiper(".swiper-container"); </script>本体を読みこんで対象を指定して <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div cl
ブラウザでMarkdownでスライドを作成して公開できるJavaScipt製のOSS・「PRESENTA Lib」 - かちびと.net
PRESENTA LibはブラウザでMarkdownでスライドを作成して公開できるJavaScipt製のOSSです。 1枚のファイルで作成可能で書き方もシンプルで使いやすそうです。また、Markdownだけでなく、JavaScriptやJSON、YAMLなどでも作成可能です。 肝心の1枚のファイルで複数ページを作る方法ですが、見れば分かりますが以下の書き方でページ分けが可能です。 1ページ目 --- ## 2ページ目です --- **3ページ目だぞ** --- このようにページ毎に---で仕切ればいいだけ。作ったスライドはURLを発行して公開できます。簡単でいいですね。 本WebアプリはOSSとしてもソースコードが公開されています。ライセンスは BSD-3との事。 PRESENTA LibOn Github
Moment.jsライクに使える2KBほどの軽量な日付操作ライブラリ・「Day.js」 - かちびと.net
Day.jsはMoment.jsライクに使える2KBほどの軽量な日付操作ライブラリです。Moment.jsとほぼ同じ使い方で同じように操作する事が出来ます。 他ライブラリにも依存せず、Moment.jsを使っている方なら学習コストもほぼ不要でファイルサイズもかなり軽量になっています。 Moment.jsにあるような痒いところに手が届く機能を削いだ分、軽量化されている、みたいな感じでしょうか。国際化も進んでおり、翻訳者も募集されています。 ざっくり使い方です。今回は用意されているCDNを使います。unpkgの他、cdnjsやjsDelivrにも用意されているみたいです。 <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> まずスクリプトを読み込みます。 <script>dayjs().format()</sc
Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap
サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。 設定 利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル
手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリ・「keen-slider」
keen-sliderは手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリです。 他ライブラリを必要としない非依存型でタッチデバイスファーストな設計となっています。操作もシンプルで様々な用途に使えそうな印象でした。 という訳で動作テストしてみました。 サンプル 使い方は従来通りです。 <link rel="stylesheet" href="keen-slider.min.css" /> <script src="keen-slider.js"></script>CSSとライブラリを読み込みます。 var slider = new KeenSlider('#my-keen-slider')読込先を指定します。 <div id="my-keen-slider" class="keen-slider"> <div class="keen-slider__slide">1</div>
チャートも含める事が出来るテーブルライブラリ・「AnyGrids」
AnyGridsはチャートも含める事が出来るテーブル生成JavaScriptライブラリです。サンプルのように簡単なチャートをテーブルに含める事が出来ます テーブルといっても厳密にはtable要素ではなくdivをflexboxで並べているのでテーブルでは無いのですが便宜上このように書いてます 以下使用方法です <script src="https://unpkg.com/anygrids@latest/anygrids.js"></script>AnyGridsを読み込みます チャートのデータはJSONで書きます const data = [ { id: 1, email: "hogehoge", first_name: "foo", last_name: "bar", avatar: "https://picsum.photos/100/100", linear: [0, 30, 5, 2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アプリケーション開発をより早くリリースする為に設計されたReactベースのコンポーネントライブラリ・「Formation」
開閉パネルやアコーディオン、タブなど切り替え要素のあるUIの為の軽量JavaScriptライブラリ・「Tiny UI Toggle」
任意の要素をドラッグ移動出来るようにする軽量スクリプト・「dragmove.js」
Pandasライブラリにインスパイアされた、構造化されたデータの操作や処理を行うためのJavaScriptライブラリ・「danfo.js」
Canvas 2Dベースの高速で軽量、さまざまなタイプのチャートに対応できるオープンソースのチャートライブラリ・「μPlot」 - かちびと.net