Sabitlenmiş Tweet
池田 泰延
31.5K posts
池田 泰延
@clockmaker
ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSS/JavaScriptを用いたユーザビリティーを意識したUI構築が専門で、3D表現・クリエイティブコーディングが得意。著書『フロントエンドの知識地図』など技術書14冊を執筆。趣味でタイムラプス撮影。
東京都品川区 Katılım Nisan 2007
1K Takip Edilen31K Takipçiler
@Miguel07Code Sure. I can’t share the source code just yet because I’m currently on vacation for Golden Week, but once it’s ready, I’ll publish it on the site below.
ics.media/en/entry/categ…
English
@clockmaker so sicckk! could you share the source code to make it a transition component for HyperFrames like this one? hyperframes.heygen.com/catalog/blocks…
English
@CTsuchinoko コメントありがとうございます！
PixiJSというライブラリを用い、RGBズレや縞々模様はビルドインのエフェクトを使っています。転換時の横方向の歪みは、GLSLの自作頂点シェーダーで歪ませています。
日本語
おお、雰囲気出てる
WebGLとかシェーダ書かないでもいけるのか
疑似ラスタスクロール的な事をやってるのかな
池田 泰延@clockmaker
JavaScriptで作るグリッチ表現。 ブラウン管のテレビのような揺らぎや 不安定さを再現してみました。
日本語
ポストが65万ビューまでバズったので自己紹介をぶら下げておきます。
東京でフロントエンド制作をやっています。
HTML、CSS、JSでのUI実装とクリエイティブコーディングのテクニックを発信。
ウェブの最新技術にこだわりがあります。
よければフォローくださいませ。
↓
x.com/clockmaker
日本語
この演出実装にインスパイアをうけ、自作のJSライブラリ「shuffle-text」のデモを追加しました。
shuffle-text版のデモは以下の記事に掲載しています。
ics.media/entry/15498/
日本語
池田 泰延 retweetledi
@clockmaker Wow this blew up! you can see the full animation and code here btw codepen.io/juliangarnier/…
English
@getpochi Using a monospaced font makes it much easier to keep the width stable during the animation. I used a monospaced font in my library as well:
ics.media/en/entry/15498/
That said, intentionally using a proportional font and letting the text jitter can also work as an effect.
English
@clockmaker It seems that the best scramble fonts are the ones with the most uniform metrics like block elements, boxdrawing chars, even some kana. the actual content of the noise matters less than the metric stabilityy
English
@Doxposting I don’t think anime.js is parsing Unicode blocks specially. My guess is that characters like ░▒▓█ are simply used as the scramble character set like array.
I’ve built a similar JS library before, and the implementation is probably similar:
ics.media/en/entry/15498/
English
@clockmaker never seen those box chars used as a real animation keyframe before. is anime.js parsing unicode blocks now or am i just missing something?
English
@belousotroll Это демо JavaScript-библиотеки. Его можно встроить в веб-страницу.
Я объясняю это в разделе про Anime.js в этой статье:
ics.media/en/entry/14973/
Русский
@clockmaker А это можно куда-то интегрировать? Vscode, vim? Или это концепт?
Русский
@Gokhanvci Evet, bu karakterlerle progress bar yapmak gerçekten hoş görünüyor.
Türkçe
@clockmaker loading bar tasarımları bu kare bar sembollerini kullanıyorum daha hoş
Türkçe
@AliGrids Thanks for sharing!
The English version of the article is available here:
ics.media/en/entry/22082…
#gsap #javascript
English
motion paths aren’t just for SVG. divs can dance too
池田 泰延@clockmaker
JavaScriptライブラリのgaspが便利なのは、風のような動きを簡単に作れること。 divタグに、モーションパスを指定して動かしています。
English