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