すべてのカテゴリ

今回は、GSAPを使ってカフェ風デザインのWebサイトをコーディングする様子をまとめた解説動画を作成しました。実際のサイト制作を想定して、デザインからアニメーション実装までの流れをそのまま収録しています。動画では以下のような内容を扱っています。・ファーストビューのフェードイン演出・スクロールに合わせた要素のアニメーション・カフェらしいやわらかい動きの作り方・GSAPの基本的な書き方と考え方・シンプルだけど見栄えのする実装テクニック「アニメーションを入れたいけど難しそう」と感じている方でも、そのまま真似できる形でコードを組んでいますので、初心者の方にもおすすめの内容になっています。ポートフォリオ制作や、実案件を想定したサイト制作の練習にも使える構成です。Webサイトに少し動きを加えるだけで、印象やクオリティは大きく変わります。ココナラのブログでは、・どんな構成で作ったのか・どんなポイントを意識してアニメーションを組んだのかもあわせて解説しています。GSAPに触れてみたい方、カフェ風デザインのサイトを作ってみたい方、サイトの表現力を一段上げたい方は、ぜひ動画を参考にしてみてください。

今回は、HTML・CSS・JavaScript（GSAP）だけで構築した「RPGファンタジー風オープニングアニメーション」を紹介します。🪄 使用した技術HTML / CSS / JavaScriptGSAP（GreenSock Animation Platform）GSAPは、アニメーションの動きを細かく制御できるJavaScriptライブラリで、タイミング・順序・速度・透明度などを自由に操れる強力なツールです。🌟 今回の実装ポイント🎨 1. Headerアニメーションページを開いた瞬間に、Header全体 → ロゴ → 各ナビリンクの順で「上からふわっと」表示されるように設定しました。tl.from(".header", { y: -60, opacity: 0, duration: 1 });tl.from(".logo", { y: -40, opacity: 0, duration: 0.8 }, "-=0.5");tl.from(".nav ul li", { y: -20, opacity: 0, stagger: 0.15 });アニメーションの順序はGSAPのtimelineを使うことでスムーズに管理できます。これにより、まるでタイトル画面が立ち上がるような演出を再現しました。🌌 2. Heroセクションの登場演出Heroにはパーティクル背景（星や光の粒）と背景画像を組み合わせ、その上にテキストを配置しました。tl.from(".hero h2", { opacity: 0, y: -30, duration: 1 });tl.from(".hero p", {

今回は、GSAPを使って本格的なWebギャラリーを制作する方法を紹介した動画を公開しました。初心者の方でも理解しやすいように、HTML・CSS・JavaScriptの基本構成から、実際のアニメーション部分までしっかり解説しています。💡 動画の内容今回の動画では、次のような実装を紹介しています👇✅ タイトル文字のアニメーション — 文字が一文字ずつ動く✅ カードアニメーション — スクロール時にふわっと登場✅ モーダルウィンドウ — カードクリックで詳細表示✅ 閉じる動作もGSAPで自然にフェードアウト✅ ダークモード切替 — ワンクリックでテーマ変更「ただ動くだけ」ではなく、**デザインの流れを大事にした“魅せるUIアニメーション”**を意識しています。🧩 使用した主なコードポイントgsap.to(".card", {  opacity: 1,  y: 0,  stagger: 0.15,  ease: "power2.out"});modalTitle.textContent = card.dataset.title;document.body.classList.toggle("dark");GSAPの stagger（順番アニメーション）やdataset（HTML属性データの取得）など、実務でもよく使うテクニックを活かしています。👉 YouTubeで見る（あなたの動画URL）ショート動画なので1分以内でサクッと見られます🎬コードを見ながらアニメーションの仕組みを理解したい方におすすめです。🧠 こんな方におすすめWebデザイン・コーディングを勉強中の方GSAPを使ってみたい

今回は、私が制作中のケーキ屋さん向けWebページの Header、背景、商品紹介部分に動きをつけたアニメーション をYouTubeショートで公開しました。動画では次の3つのポイントを紹介しています：Headerのアニメーションロゴが斜めから正面に回転しながらフェードインナビリンクは小さく縮んだ状態から拡大SNSアイコンは下からスライドして登場背景の動きThree.jsのシェーダーでグラデーションがゆっくり変化クッキー型の3Dモデルが画面上から下に回転しながら降るパーティクル演出MenuItemsのスクロールアニメーション商品説明のテキストが左右からスライドイン画像が画面外から滑り込む動きスクロールに合わせた自然な表示でユーザーの目を引くこれらのアニメーションを組み合わせることで、Webページ全体に 華やかさと動き が加わり、ケーキ屋さんの魅力をより直感的に伝えられるようになります。🔗 YouTubeショート動画はこちら ↓