滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編） - ICS MEDIA

2023/08/04 15 users ICS MEDIA 前編 挙動 余韻 スクロール

ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか？　このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲... 続きを読む

GSAP入門 - アニメーション制作のための高機能なJSライブラリ（前編） - ICS MEDIA

2022/08/22 18 users ICS MEDIA アニメーション制作 前編

JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。トゥイーンの機能を提供するJSライブ... 続きを読む

Flash作品を残すために取り組んだこと - プラグイン無しでFlashを再生できるJSライブラリを採用して - ICS MEDIA

2021/02/15 12 users Flash ICS MEDIA Flash作品 筆者 手段

ブラウザプラグインのFlash Playerは2020年末でサポートが終了しました。そのことにより、Flashコンテンツをブラウザで再生する手段がなくなっています。 筆者はBeautiflビューティフルというウェブサイトを個人的に運用しています。Beautiflは、ユーザーが投稿したFlash作品を紹介するギャラリーサイトです。Flash Play... 続きを読む

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

2019/12/11 220 users ライブラリ ICS MEDIA Jav GPLライセンス 一方

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

定期的にyarn updateするには - おもしろwebサービス開発日記

2018/03/18 36 users Gemfile YARN おもしろWEBサービス開発日記

2018 - 03 - 18 定期的にyarn updateするには ライブラリは定期的かつこまめにアップデートすることで辛さを減らしていく、というのは最近の開発現場では定説ではないかと思います。Railsプロジェクトの場合、Gemfileの定期更新を実施している現場も多いのではないでしょうか *1 。 最近のRailsアプリケーションはjsライブラリの管理にyarnを使っているところが多いかと思... 続きを読む

スクロール時にちょっとしたアニメーションを加えたいときに使えるJSライブラリ「ScrollReveal」 | Rriver

2018/03/14 28 users Rriver ScrollReveal アニメーション 邪魔

シンプルなスクロールアニメーションを実装したいときに使えそうなライブラリを見つけたのでご紹介します。「 ScrollReveal 」というやつです。 無意味にたくさん動くアニメーションはUIやユーザの情報消費の邪魔をするので好きではないですが、単調なページをより魅力的に見せるための「気の利いた」アニメーションならいいですよね。 ScrollRevealのいいところ 3.3KB（minified /... 続きを読む

Vue.js で初めて SPA を開発する際に考えたこと - Qiita

2017/12/03 30 users jQuery Qiita React angular 足掛かり

はじめに MVVM フレームワーク初心者の筆者がVue.jsを使ってSPAを開発する際に考えたことを掲載していきます。本記事を通して、これからSPAを開発する人にとっての 足掛かり となれば幸いです。 対象読者 HTML, CSS, JavaScript の経験あり、また jQuery などのJSライブラリの使用経験あり React, Angular といった今時のJSフレームワークによるSPA開... 続きを読む

スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」 | bl6.jp

2017/11/22 13 users スクロールイベント トリガー 赤い点線 bl6.jp 要素

scrollama.jsは、スクロールイベントを実装することができるモダンで軽量なJavaScriptライブラリです。IntersectionObserverを使用しているとのこと。スクロールされた位置によって要素のカラーを変更したりなんてことができます。 以下、scrollama.jsの実際のデモページになります。 デモ デモページでは中央に赤い点線が引かれていて、ここがトリガーとなっています。... 続きを読む

初心者でも音楽アプリが作れる！Web Audio APIを簡略化したJSライブラリ「Tone.js」でピアノ鍵盤を作ってみよう！ - paiza開発日誌

2017/03/01 90 users ピアノ鍵盤 paiza開発日誌 0310lan 実装 簡略化

2017 - 03 - 01 初心者でも音楽アプリが作れる！Web Audio APIを簡略化したJSライブラリ「Tone.js」でピアノ鍵盤を作ってみよう！ プログラミング初心者 プログラミング学習 Webサービス紹介 開発ネタ どうも、まさとらん（ @0310lan ）です。 今回は、Web Audio API の実装で面倒な処理をすべて簡略化し、 誰でも音楽プログラミングを楽しむことが可能な... 続きを読む

最速のアニメーションライブラリはこれだ!? JSライブラリの性能をDOMとWebGLで徹底検証 - ICS MEDIA

2017/02/21 61 users CPU アニメーション JavaScriptライブラリ 前回

HTML5のアニメーション実装に役立つ様々なJavaScriptライブラリがあります。前回の記事「 ウェブのアニメーション制作に役立つ！ 流行りのJSライブラリのまとめ 」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。 JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます 。また、パフォーマンスがよければCPU... 続きを読む

ウェブのアニメーション制作に役立つ！ 流行りのJSライブラリのまとめ - ICS MEDIA

2017/02/17 317 users アニメーション制作 ウェブ

ウェブサイトのインタラクションやUIの振る舞いなど、 HTML5でモーションを実装する機会は多々あります 。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブ... 続きを読む

JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza開発日誌

2016/06/07 785 users ライブラリ paiza開発日誌 0310lan グラフ 解説

2016 - 06 - 07 JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ 開発ネタ Webサービス紹介 どうも、まさとらん（ @0310lan ）です。 今回は、 JavaScript を使って「 グラフやチャートを描きたい！ 」とか、「 さまざまなデータを可視化させたい！ 」という人にオススメの JSライブラリ をご紹介しようと思います。 また、すぐに使い... 続きを読む

Webカムに映った顔の位置を認識するJSライブラリ headtrackr.js がすごい « console.log :) | Don't forget trace :)

2015/09/08 63 users console.log Webカム GitHub 位置 デモ

Javascriptで実装された顔認識ライブラリ「headtrackr.js」がけっこうスゴイです。 Githubでソースが公開されています。 https://github.com/auduno/headtrackr/ 以下のデモでどういう機能か分かると思いますが、 Webカムに映った顔を認識し、その位置座標を取得できるものです。 実装されている処理は、ホワイトバランスを調整する処理や顔認識処理、... 続きを読む

シンプルで軽量なプログレスバー実装の為のJSライブラリ・「nanobar」 - かちびと.net

2015/08/25 27 users net

Web制作の話題を中心に、便利なWebサービスやリソースなどを紹介 Kudos for About This Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。 Kachibito.net is a community-based ... 続きを読む

ある要素が表示されるまで待つJSライブラリを書いた(MutationObserver) | Web Scratch

2015/04/06 51 users then セレクタ functio require ライブラリ

wait-for-element.js wait-for-element.js という関数一個だけのライブラリを書きました。 以下のような感じで、セレクタにマッチする要素が出現するまで待つというシンプルな関数です。 var waitForElement = require("wait-for-element"); waitForElement("#js-element").then(functio... 続きを読む

SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」 - かちびと.net

2015/01/09 36 users SVG CSS img SVGファイル class

deSVG deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように自動で置換し、CSSでスタイリング可能にしてくれます。現在はsvgというclassが指定されていますが、任意のユニークなclass名に変えたい時はコードの最下部にあるdeSVG(“.svg”... 続きを読む

JavaScript - 俺のJSライブラリの世界観(2014末版) - Qiita

2014/12/11 446 users Qiita JavaScript 世界観

http://qiita.com/advent-calendar/2014/frontrend 概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるよ... 続きを読む

JSライブラリ/フレームワークの良い、悪いメモ - 素人がプログラミングを勉強していたブログ

2014/11/05 441 users フレームワーク Fac jsx プログラミング トランスパイラ

2014-11-05 JSライブラリ/フレームワークの良い、悪いメモ ※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFac... 続きを読む

JavaScriptコードを貼り付けるだけで、どんなサイトでもコラボレーションを可能にする『TogetherJS』 | IDEA*IDEA

2013/09/20 42 users カーソル ぺろ Mozilla Labs チャット IDEA

あれ、これ、結構いいのでは。Mozilla LabsによるJSライブラリです。使い方は簡単で、JavaScriptをぺろっと貼り付けるだけですね。 ↑ サイトにこういうボタンを埋め込んでこれをクリックすると・・・。 ↑ ユーザー間でチャットできたり、カーソルの位置を表示したりできます。 他にも音声チャットもできるようですよ。ちょっとしたコミュニティサイトやらで使えそうな・・・という気もしますね。詳... 続きを読む

地図アプリで使えそうなアイコンフォント「Map Icons」:phpspot開発日誌

2013/08/21 12 users phpspot開発日誌 アイコンフォント マーカー アイコン

地図アプリで使えそうなアイコンフォント「Map Icons」 2013年08月21日- Map Icons 地図アプリで使えそうなアイコンフォント「Map Icons」 地図上に使えそうなアイコンのアイコンフォント。種類が豊富で使いやすそうです。 アイコンフォントだけではなく、便利に使うためのJSライブラリも入っています。 JSライブラリを使って以下のようなマーカーの画像と組合せてより便利に使えそ... 続きを読む

サイトの使い方をその場でステップに分けてオーバーレイできるJSライブラリ「Intro.js」:phpspot開発日誌

2013/04/01 39 users Intro.js phpspot開発日誌 ライ オーバー

Intro.js | Better introductions for websites and features with a step-by-step guide for your projects. サイトの使い方をその場でステップに分けてオーバーレイできるJSライブラリ「Intro.js」 はじめてのサイトの場合、何をやっていいか、使い方もよくわからない場合も少なくなさそうですが、このライ... 続きを読む

Excel2013やGoogleSpreadSheetでの関数が使えるようになるJSライブラリ「Formula.js」:phpspot開発日誌

2013/03/26 44 users ライブラリ 関数 Excel phpspot開発日誌

Excel2013やGoogleSpreadSheetでの関数が使えるようになるJSライブラリ「Formula.js」 2013年03月26日- Formula.js Excel2013やGoogleSpreadSheetでの関数が使えるようになるJSライブラリ「Formula.js」 WEB開発者でExcelも使いこなしているという方には便利そうなライブラリ。使い慣れた関数をJSで使えるので便利... 続きを読む

文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」:phpspot開発日誌

2013/03/21 38 users ライブラリ 段落 phpspot開発日誌 沢山 単語数

文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」 2013年03月21日- Countable.js?live word-counting in JavaScript 文字数、段落数、単語数を簡単に数えられるJSライブラリ「Countable.js」 文字数を数えるライブラリは沢山ありますが、段落や単語数までカウントしてくれるライブラリははじめてかも。 文字数、段... 続きを読む

様々なJavaScriptライブラリをコレクションしているWebサイト・JSDB.IO - かちびと.net

2013/02/10 135 users JavaScriptライブラリ net Webサイト イト

様々なJSライブラリのまとめサ イトのご紹介。主にクライアン トサイドのJSライブラリを中心 にコレクションしているみたい です。シンプルで探しやすかっ たのでメモ。 JSのコレクションサイト。サクサク動作して広告などの余計なコンテンツも無いので非常に探しやすい印象です。 JSDB.IO シンプルにまとめてくれいます。カテゴリから探すことも可能ですよ。 個別ページに移動することなく情報を表示してく... 続きを読む

様々なスタイルのツールチップを実装できるスクリプト・opentip - かちびと.net

2013/01/26 49 users ツールチップ net OSS スタイル JSフレームワーク

様々なスタイルでツールチップを 実装する為のJavaScriptフレーム ワーク・opentipのご紹介です。 噴出しの形状や表示場所、Ajax対 応など、状況に応じて実装する事 が出来ます。 ツールチップ実装用のJSライブラリです。様々なスタイルで実装可能です。 opentip ツールチップのJSフレームワークです。OSSとして公開されています。 複数のツールチップを一括で出すことも可能です。 ... 続きを読む