【Studio】世界観を魅せるフェードイン・アウトの実装方法

フェードイン・アウトに関するブログ記事サムネイル Studio

Webデザインでは、ユーザー体験（UX）を向上させるアニメーション効果が重要視されています。特に、スクロールに応じてコンテンツが滑らかにフェードイン・フェードアウトする「スクロールアニメーション」を用いることで、単調なページでも動きを持たせることで、ユーザーにとって魅力的な体験を提供できます。そこで今回は、カスタムコードを活用して、簡単にフェードイン・アウトのスクロールアニメーションを追加する方法を解説します！

✅ スクロールに応じて要素がフェードイン・フェードアウト
✅ Studioのカスタムコードで簡単に実装可能
✅ ユーザーの視線誘導を強化し、情報の伝達力を向上

⚫︎カスタムコードとは？

Studioのカスタムコード機能についての使い方等は、以前の記事でご紹介しています。もしカスタムコード機能を初めて知ったという方は下記の記事もご覧ください。

【デザイン例あり】STUDIOのカスタムコードで活用方法を解説！
前回までの記事では、STUDIOを使ったUIボタンの作成やTOPページの構築方法をご紹介しました。今回はさらに一歩踏み込んで、カスタムコードを使ったデザイン作成について深掘りしていきます。また、記事の最後には、私がココナラで提供しているサー...
the-learning-canvas.com
2024.01.08

フェードイン・アウトとは？

フェードイン・アウトとは、要素の透明度（opacity）を変化させることで、コンテンツを滑らかに表示・非表示にするアニメーション効果のことです。

フェードイン・アウトを取り入れるメリット

✅ スクロール時に自然な視線誘導を実現（コンテンツが徐々に表示され、ユーザーの注意を引く）
✅ Webサイトの動きに一貫性を持たせ、洗練された印象を与える
✅ テキストや画像が突然表示されるのを防ぎ、UXを向上

このフェードアニメーションをStuidoのカスタムコードで簡単に実装する方法を、次のセクションで詳しく解説します。

フェードイン・アウトを実装する手順

① カスタムCSSの追加

まず、 Studioの「カスタムコードエディタ」に以下のコードを追加します。
このCSSは、スクロール時に要素をフェードイン・アウトさせるための基盤となるスタイルです。

[id*="naka"] {
    opacity: 0;
    transition: opacity 1s ease-in-out; /* フェードインアニメーション */
}

✅ [id*="naka"]

  • IDに「naka」を含むすべての要素が対象（例: id="naka-text" など）。
  • STUDIOエディタでIDを設定するだけで、アニメーションが適用される。

✅ opacity: 0;

  • ページ読み込み時は要素を完全に透明にする（スクロールで表示されるまで見えない状態）。

✅ transition: opacity 1s ease-in-out;

  • 透明度（opacity）の変化を1秒かけて行う。
  • ease-in-out により、スムーズな動きが適用される。

② JavaScriptの追加

次に、「カスタムコードエディタ」に以下のJavaScriptを追加し、スクロール時にフェードイン・アウトを適用します。

フェードインを適用する関数

function checkFadeIn() {
  const nakaElements = document.querySelectorAll("[id*='naka']");
  const windowHeight = window.innerHeight;
  const windowMidPoint = windowHeight / 2;

✅ document.querySelectorAll("[id*='naka']")

  • id="naka" を含むすべての要素を取得し、対象にする。

✅ window.innerHeight

  • 画面の高さを取得し、スクロール判定に使用。

✅ windowMidPoint = windowHeight / 2

  • 画面の中央位置を基準にして、フェードインを制御。

スクロール時に要素の位置をチェック

nakaElements.forEach((element) => {
  const elementRect = element.getBoundingClientRect();

  if (elementRect.top <= windowMidPoint && elementRect.bottom >= windowMidPoint) {
    element.style.opacity = 1; // フェードイン
  } else {
    element.style.opacity = 0; // フェードアウト
  }
});

✅ 要素が画面の中央にきたら opacity: 1 に変更し、フェードイン
✅ 画面から外れたら opacity: 0 に戻し、フェードアウト

実装結果

このカスタムコードを適用すると、スクロールに応じて要素がフェードイン・アウトするアニメーションが追加されます。

また、上記のアニメーションを応用すると、より魅力的な表現方法も可能になります。
ここでは例として、「フェードイン・フェードアウトの開始位置を変えた場合」「連続する子要素それぞれにタイミングを割り振った場合」の２パターンを作成しています。

STUDIOのカスタムコード実装例をチェック！

もっとStudioのカスタムコードでの事例を見たい方はこちら！
https://kreaidesign.studio.site/library

最新の制作事例をInstagramでチェックしてみてください！
InstagramのDMからお仕事のご相談をいただいた、先着５名様限定で定価の10％OFFにて、WEBサイト制作を実施させて頂きます！
https://www.instagram.com/kreai_design?igsh=dmdqNXdudmlxNWZv&utm_source=qr

インスタグラムのQRコード

私のココナラサービスでは、Studioを用いたWEBデザインから実装のサービスを提供しています。
カスタムコードのみの対応も承っていますので、ウェブサイトに個性を加えるためのカスタムコードを入れたい方、ぜひ詳細はココナラのプロフィールページをご覧ください。

STUDIOでオリジナルWEBサイト作成します 修正制限無し！デザイン/画像/文章丸投げOK!【２名様限定】

まとめ：STUDIOのカスタムコードでサイトの魅力をアップ！

フェードイン・アウトのスクロールアニメーションを実装することで、Webサイトに動きとメリハリを加え、UXを向上できます。特に、情報の伝達力を強化し、ユーザーの視線誘導をサポートするため、コンテンツがより魅力的に見えるようになります。
👉 ぜひこのカスタムコードを試して、STUDIOで魅力的なサイトを作成しましょう！

コメント