sat0ma014のブックマーク - はてなブックマーク

JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。作例の紹介本記事のチュートリアルの完成形はこちらになります。別タブで再生するソースコードを確認するこの記事で学べること 2Dテキストを粒子化して動かす表現パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用）制作の技術本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
sat0ma014 2022/12/17
JavaScript

techfeed
リンク
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りましたアニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。その他にも、メソ
sat0ma014 2021/04/10
あとで読む
リンク
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。サンプルを別ウィンドウで開く（シンプル版）サンプルを別ウィンドウで開く（リアルタイム版）コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーションまずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
sat0ma014 2020/10/19
あとで読む
リンク
npm互換のJavaScriptパッケージマネージャーYarn入門 - ICS MEDIA
最近のWebのフロントエンド開発ではライブラリの管理を行うパッケージマネージャーの採用が主流になってきています。たとえば、タスクランナーのGulpやGruntであったり、SassやTypeScriptのコンパイルのためにNode.jsノード・ジェイエス（npm）を導入している方は多いでしょう。 JavaScriptのパッケージマネージャーとしては「npmネヌ・ピー・エヌ」が有名ですが、2016年10月にFacebookが新しいパッケージマネージャー「Yarnヤァン」を公開しました。 Yarnはnpmと互換性のあるJavaScriptのためのパッケージマネージャーで、「インストールが高速」「より厳密にバージョンを固定」「セキュリティが高い」といった魅力があります。弊社はnpmからYarnに乗り換えて早3年、快適に開発に利用しています。本記事では、npmの経験者に向けてYarnの利点と使い方を
sat0ma014 2020/10/07
Node

JavaScript

package
リンク
1