webGLでFluid
フレームバッファの切り替えと流体表現の管理をやる練習
参考元 なしcreativeCodings
学習や追究をする上で取り組んだ自主制作
参考元が不明でない限り、
参考にしたものを明記しております
masonryレイアウト
grid:masonryがなかなか使用可能にならないので、ピンタレスト風の格子状レイアウトをJavaScriptで構築。
参考元 なしstickyの重なりを制御する
重なりの上下を制御する練習
参考元 なしCSSだけでスクロール速度を算出する
CSSだけでスクロール速度を算出する計算の練習
参考元 YoutubeGLTFに環境マッピング
blenderで作った3DモデルにHDRで環境マッピングする練習
参考元 なしSVGで電流っぽいアニメーション
SVGFilter芸の練習
参考元 colissスクロールの加速度をとる
スクロールの速さによって何かしたい時用
参考元 なしCSSだけでページ遷移アニメーションをやる
viewTransitionsAPIがMPAをサポートしたので、CSSだけでページ遷移アニメーションをやってみる。
参考元 なし背景追従をCSSだけでやる
背景追従をCSSだけでやる練習。
参考元 Twitter上(TAK さん)blenderからthree.jsへのエクスポート
blenderで作ったオブジェクトやカメラのアニメーションタイムラインをthree.jsでスクロールやクリックと連動して再生する練習。
参考元 chatGPTフレームバッファの切り替え
フレームバッファを切り替え続け、前フレームの描画結果をテクスチャに焼き続ける行いをthree.jsでやる練習。
参考元 GLSLスクールNuxt3で汎用タブコンポーネント
Nuxt3で汎用タブコンポーネントを作ってみる練習。単一のrefだとbooleanが全タブで連動してしまうが、各タブのindexと表示状態をオブジェクトにして、そのオブジェクトをrefにしたら制御できるという気づきを得た。
参考元 なしページ内検索に対応したアコーディオンパネル
アコーディオンパネルの中身がページ内検索にヒットした場合、アコーディオンを開くようにする
参考元 Twitter上(TAKさん)カルーセルをスクラッチ
カルーセルをスクラッチしてみる。
参考元 なしAPNGでmask-imageをやってみる
APNGでmask-imageをやってみる練習。
参考元 なしモーダルの背景を賑やかす
モーダルの背景を賑やかす練習。
参考元 なしスムーススクロールにイージングをつける
スムーススクロールにイージングをつけるサンプル。
参考元 なしwebGL境界ぐにょん
fragmentShaderで遷移の境界をぐにょーんさせる練習。
参考元 Twitter上(詳細失念)CSS3Dスライダー
スライダーをZ軸方向奥行き配置。
参考元 なしclipマウスストーカー
clip-pathでマウスストーカー。
参考元 zennグリッチ
CSSでグリッチ。
参考元 zennコントラストフレーム
clip-pathでコントラストを上げたフレームを作る。
参考元 Twitter上(詳細失念)項目がポーン
リストの項目部分でポーンでボーダーが伸びるアニメーション
参考元 Twitter上(詳細失念)CSS場面切り替え
CSS場面切り替えアニメーション。
参考元 なし無限スクロール
intersectionObserverで無限スクロール。
参考元 なしカード登場演出
カード登場アニメーション。
参考元 なしグラデーションシャドウ
CSSでグラデーションシャドウ
参考元 なし下線伸びる演出
文字の都合に合わせて下線が伸びるアニメーション。
参考元 Twitter上(詳細失念)背景固定パララックス
スクロールしても背景がセクションごとに固定されるパララックス。
参考元 なしgrid伸縮
gridを伸縮させるアニメーション。
参考元 なし光の乗算
mix-blend-modeで光を乗算して画像を輝かせる。
参考元 Twitter上(詳細失念)SVG文字散らし
Illustratorで文字を刻んでCSSで動かす。
参考元 Twitter上(詳細失念)borderを伸ばす
SVGでborderを伸ばすアニメーション。
参考元 なしSVGパスに文字を沿わせる
offset-pathで文字や要素を沿わせる。
参考元 Twitter上(詳細失念)スライド時のみ加速スライダー
スライド時のみ加速するwebAnimationsAPI製のループスライダー。
参考元 なしテーブルセル演出
hoverされた行列を明らかにする演出。
参考元 なし円周上スライダー
円周上にスライドを配置する。
参考元 なしwebGLディゾルブ
fragmentShaderでディゾルブエフェクトをやる練習。
参考元 shadertoy(詳細失念)webGL色収差ストーカー
fragmentShaderで水泡っぽい感じにする練習。
参考元 shadertoyマウスに連動する影
影をマウス座標と連動させる。
参考元 なしスライムなborder
スライムな感じでborderを変化させる。
参考元 なしSVGでモヤモヤ登場
SVGでモヤモヤ登場させる練習。
参考元 Twitter上(詳細失念)スクロール可能をmaskで示唆
横スクロール可能である事をmask-imageで示唆する。
参考元 なし歪曲収差
fragmentShaderで歪曲収差させる練習。
参考元 shadertoy(詳細失念)固定横スクロール
CSSのみで縦スクロールに連動して横スクロールさせる。
参考元 twitter上(詳細失念)maskを変化させる
CSSのみでスクロールに合わせてmask-imageを変化させる。
参考元 twitter上(詳細失念)グラデーションを変化させる
CSSのみでスクロールに合わせてグラデーションを変化させる。
参考元 twitter上(詳細失念)stickyを重ねる
stickyを重ねていく。
参考元 twitter上(詳細失念)viewTransitionsAPIでgridの移動
viewTransitionsAPIでgridの位置の変化にtransitionを効かせる。
参考元 twitter上(詳細失念)clip-pathで扉パカーン
clip-pathで扇型にパカーンさせる練習。
参考元 twitter上(詳細失念)webGLでテクスチャ湾曲
fragmentShaderでテクスチャを湾曲させる練習。
参考元 twitter上(詳細失念)CSSでループスライダー
CSSのみで無限ループするスライダー。
参考元 なし固定パララックス雛形
スクロールインタラクションのテンプレ用にstickyとrequestAnimationFrameで作った雛形。
参考元 なしviewTransitionsAPIでモーダル
viewTransitionsAPiでモーダルをやる練習。
参考元 なしwebGLでページめくり
fragmentShaderでページめくりな遷移をやる練習。
参考元 gl-transitionswebGLでノイズスライダー
fragmentShaderでノイズ画像を使って遷移する練習。
参考元 gl-transitionswebGLで境界をゆらゆらさせる
fragmentShaderで境界をゆらゆらする練習。
参考元 gl-transitionsSVGで光と影
SVGで光と影をやる練習。
参考元 Twitter上(ふぉくるさん)webGLでメタボール
fragmentShaderでメタボールをやる練習。
参考元 shadertoywebGLでモザイクに遷移
fragmentShaderでモザイクな感じで遷移する練習。
参考元 gl-transitionswebGLで四角な感じで遷移
fragmentShaderで四角な感じで遷移する練習。
参考元 gl-transitionswebGLで旗
fragmentShaderで旗みたいに揺らす練習。
参考元 shadertoy角度と速度を反映するマウスストーカー
直前の座標と最新の座標のギャップを使って速度と角度を算出するマウスストーカーの練習。
参考元 Not Equal遷移の境界線をギザギザにする
fragmentShaderで遷移の境界線をギザギザにする練習。
参考元 gl-transitionsアメーバなスライダー
fragmentShaderでアメーバなスライド演出をやる練習。
参考元 gl-transitions躍動感なスライダー
fragmentShaderで躍動感なスライド演出をやる練習。
参考元 gl-transitions特定の座標に吸い付く要素
ドラッグした位置が特定の座標に近づくと吸い付く練習。
参考元 なし光る吸い付く要素
マウス座標に連動して傾いて光らせる練習。
参考元 なしstickyな被せ演出
stickyでセクションを被せていく練習。
参考元 なしshaderで線アニメーション
fragmentShaderで線になるように描画して三角関数で動かす練習。
参考元 GLSLスクールクリップな登場演出
clip-pathの座標を動かす事で登場演出をやる練習。
参考元 なしドラッグした箇所を削る
canvas2Dを使ってドラッグした箇所をマスクする練習。
参考元 404shibuya.tokyomask-imageで煙エフェクト
mask-image用の煙画像を作ってmask-imageで遷移させる練習。
参考元 穂垂亭viewTransitionsAPIでタブ演出
viewTransitionsAPIでタブの切り替えアニメーションをやる練習。
参考元 なしwebGL波紋エフェクト
webGLで波紋をつくる練習
参考元 shadertoyCSSモーショングラフィック
translateとscaleでカメラのような振る舞いをやる練習。
参考元 After Effects 定番パターンで覚える モーショングラフィックスレシピ燃えて消えるエフェクト
燃えるディゾルブエフェクトをwebGLでやる練習。
参考元 shadertoyタイピング風アニメーション
タイピング風のテキスト表示アニメーションをCSSとJavaScriptで表現。
参考元 なしマウスストーカー
div生成しまくり方式のためパフォーマンス的に好ましくないが、JavaScriptからアニメーション必要な数値を算出する練習になった。
参考元 なし