[B! JS][コリス] fujis_aのブックマーク

UIでボタンをクリックするのが楽しくなるエフェクトがたくさん揃ったJavaScriptライブラリ -Party.js

ユーザーがボタンのクリックなど、アクションをした際に紙吹雪やハートをクラッカーで弾けたようなエフェクトで表示する、楽しさを演出するJavaScriptライブラリを紹介します。クリックするのが楽しくなるエフェクトがたくさん揃っており、「おめでとう！」「ありがとう！」「うれしい！」などを視覚的に伝えることができます。 Party.js Party.js -GitHub Party.jsの特徴 Party.jsのデモ Party.jsの使い方 Party.jsの特徴 Party.jsは「おめでとう！」「ありがとう！」「うれしい！」などを視覚的に表現するエフェクトを実装し、ユーザーのサイトエクスペリエンスを明るく楽しくするJavaScriptライブラリです。ユーザーのアクションに伴い、紙吹雪やハートやキラキラなどのエフェクトを簡単に実装できます。実装が簡単ライブラリをHTMLファイルに含め

fujis_a 2021/05/12

リンク

テキストやSVGや画像が3Dで動く！HTMLで実装した要素から3Dアニメを自動生成するスクリプト -ztext.js

普通のHTMLで実装されたテキストやSVGや画像を立体的にするためにレイヤーを自動生成し、3DのアニメーションにするJavaScriptを紹介します。日本語や絵文字にも対応しており、アニメーションはマウス操作などに反応させることもできます。 ztext.js ztext.js -GitHub ztext.jsの特徴 ztext.jsのデモ ztext.jsの使い方 ztext.jsの特徴 ztext.jsはHTML要素からレイヤーを自動生成することで、テキストやSVGや画像を3Dにできます。CanvasやWebGLは一切必要はありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。

fujis_a 2020/09/07

リンク

Webページやスマホアプリにパノラマ画像のコンテンツを簡単に実装できる軽量スクリプト -Panolens.js

360度のパノラマ画像をブラウザ上で表示できる、軽量スクリプトを紹介します。パノラマ画像を見るだけでなく、パノラマ動画、リンクコンテンツ、物語コンテンツなど、インタラクティブなさまざまなコンテンツを実装できます。 Panolens.js Panolens.js -GitHub Panolens.jsの特徴 Panolens.jsのデモ Panolens.jsの使い方 Panolens.jsの特徴 Panolens.jsはイベント駆動型で、WebGL対応のパノラマビューアーです。パノラマは水平方向をはじめ、垂直方向・拡大縮小にも対応しています。 Three.JS（3Dフレームワーク）をベースに実装された軽量のスクリプトで、カスタマイズも優れています。 Panolens.jsのデモデモではPanolens.jsで実装されたさまざまなパノラマを楽しめます。

fujis_a 2020/03/18

リンク

Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo

/* Scrolleo - make your video scroll with inertia * MIT License - by Mark Teater */ (function(window, document, undefined) { "use strict"; var _Scrolleo = function(opts) { // Defaults this.acceleration = 0.08; //1 is fastest, 0 is slowest, 0.08 is default this.secondsPerScreen = null; //Set this to the length of the video. "1" is 1 second. this.additionalOffset = 0; //Add or subtract pixels to whe

fujis_a 2019/11/15

リンク

フォームのinput要素に電話番号・日付・時間・金額など、数字のフォーマットを定義できるスクリプト -Cleave.js

クレジットカード番号・電話番号・日付・時間・金額などを入力するフォームのinput要素に、数字を区切ったり、記号文字を加えたり、入力する数字のフォーマットを簡単に定義できる軽量スクリプトを紹介します。単体のスクリプトとしてだけでなく、Reactコンポーネント、AngularJSディレクティブでも利用できます。 Cleave.js -GitHub Cleave.jsの特徴 Cleave.jsのデモ Cleave.jsの使い方 Cleave.jsの特徴 Cleave.jsは、フォームのinput要素に入力する数字のフォーマットを簡単に定義できます。クレジットカード番号のフォーマット電話番号のフォーマット日付・時間のフォーマット数値のフォーマット区切り文字、プレフィックス、ブロックパターン

fujis_a 2019/03/01

リンク

人工知能もついにココまで！写真やイラストが健全か、健全でないのか判定できるJavaScriptライブラリ -NSFW JS

人工知能を使用して、写真やイラストなどの画像が健全なのか、健全ではないのかを判定するためのシンプルなJavaScriptライブラリを紹介します。 NSFW JS NSFW JS -GitHub NSFW JSの特徴 NSFW JSのデモ NSFW JSの使い方 NSFW JSの特徴 NSFW JSはTensorFlow.jsのマシンラーニングをベースに、画像を識別するJavaScriptライブラリです。画像を以下の5つのクラスに分類します。 NSFW JSは15,000枚以上の画像を検証し、その正解率は90％以上とのことです。健全ではない場合は自動的にぼかしのプロテクションがかかります。 NSFW JSのデモ下記ページで実際の動作を試すことができます。