- PR -
スクロールした時に下からふわっと文字を出す方法~CSS、jQueryを駆使~
あなたの事業、応援します!

中山テック 代表の中山です。

さて、今まではブログ→動画で補足という流れでございましたが・・・

今回は動画→ブログの補足となります。

動画編集の勉強を兼ねてやっておりましたが、最近は内容次第で動画をアップすることが増えてきました。

今回は動画(ショートですが)で出した「ほーむぺーじを作る」からスクロール→ふわっと出す方法についてお話したいと思います。

  • プログラミング関連記事

――― PR ―――

――― PR ―――



1分未満のショート動画としてYouTubeにアップしました。

モックとして作成したBEFORE⇒AFTERへの流れを簡潔に流してます。

よろしければご覧のうえ、面白いと思ったらチャンネル登録・高評価お願いいたします。



コード

こちらはスクロールしてフェードインしていくもの

HTML

<p class="scroll-up">我々は何も成し遂げていない。</p><br><br>
<p class="scroll-up">だがしかし、何をすれば<br><br>良いかもわからない。</p><br><br><br><br>
<p class="scroll-up">まずは色々なことに挑戦し<br><br>何かをやり遂げる・・・</p>

抜粋となります。

pタグ(文字の1つの段落として表示するHTMLタグ)に「scroll-up」と入れてます。

これはCSSのクラスを読み込んでおりますのでさほど難しくはないでしょう。

CSS

.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(100px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

上記動画の32秒頃が前項HTMLとの組み合わせとなります。

「.scroll-up.is-show」はJavascript(jQuery)で制御しています。

・opacity⇒透明度を表しています。0は透明なので何も表示されません。is-showで1にして表示。

・visibility⇒hiddenで要素を不可視、visibleで可視にします。不可視にしても見えないだけでスペースは残ります。

・transform⇒要素の変更です。translateYの100px指定ということで、元々の場所から縦100px下に配置します

・transition⇒プロパティを指定します。プロパティってなんぞ?と思うでしょうが動きのことを指します。

例としてはallをnoneにするとわかりやすいと思います。「1s」が効かず、「is-show」がパッと表示されます。

「きっちりプロパティを定義して!」と思いの方、「transition-duration: 1s;」で同義ですので、ぜひ試してみてください!

  • システム開発関連記事

jQuery

$(function () {
  $(window).scroll(function () {
    const windowHeight = $(window).height();
    const scroll = $(window).scrollTop();

    $('.scroll-up').each(function () {
      const targetPosition = $(this).offset().top;
      if (scroll > targetPosition - windowHeight + 100) {
        $(this).addClass("is-show");
      }
    });
  });
});

ふわっとさせるにはJavascript(jQuery)制御が必須です。

理由は「隠れている文字の〇〇pxまで来たら」という命令がCSSではできないからです(HTMLもできない)。

「.scroll-up」が表示前のCSS、「is-show」が表示後になるので、コピペして使いたい方はそこだけ変えてください。

※ローカル(オフライン)だと正常に動かないことも多々ありますので、WEB上で試すのが吉



我々は何も成し遂げていない。


だがしかし、何をすれば

良いかもわからない。


まずは色々なことに挑戦し

何かをやり遂げる・・・



また、ふわっとした箇所を表示したり消したい場合はif文の下にコードを追加してください。

※下記コードがない場合は1回だけふわっとします

何度もふわっとさせるとしつこく感じる方もいらっしゃるので、1回が良いかと思います。状況に応じて使い分けてください。

 else {
    $(this).removeClass("is-show");
 }

Javascript(jQuery未使用)

function scroll_effect() {
  var element = document.getElementsByClassName('scroll-up');
  if(!element) return;
                      
  var scrollY = window.pageYOffset;
  var windowH = window.innerHeight;
  var showTiming = 200; // 要素を表示するタイミング
  for(var i = 0; i < element.length; i++) { 
    var elemClientRect = element[i].getBoundingClientRect(); 
    var elemY = scrollY + elemClientRect.top; 
    if(scrollY > elemY - windowH + showTiming) {
      element[i].classList.add('is-show');
      
    }
  }
}

window.addEventListener('scroll', scroll_effect); // スクロール時に実行

jQueryはわかりづらい!という方は通常のJavascriptでも表現できます。

上記コードは前項と同義ですので、使いやすい方で試してみてください!

addEventListenerもお忘れなく。

開発者ツールを使ってブレイクポイント貼るとわかるのですが、スクロールする度に呼ばれるので多少処理は重くなります。

※jQueryも同様ですが

まとめ

さて、ホームページでよく使われる下からふわっと浮き出るアニメーション。

HTML+CSS+Javascript(jQuery)の組み合わせになりますが、慣れたら難しくないです。

特にWEB制作では基本のプログラムなので是非覚えて欲しいです!

また、誤りやアドバイス等ございましたら、いつでもコメントやメール、Twitterでも承っております。

最後までご覧頂き、ありがとうございました。

  • プログラミング関連記事

ホームページ制作系

ご料金はサービス内容・料金を参照ください。

■ホームページ制作

※ロゴ、バナーは外注となります

■SEO対策

Googleガイドライン診断、マネジメント、ブログ執筆など

システム開発系(SES請負契約向け)

■役職

プロジェクトマネジメント、PMO、リーダー、開発(要件定義~納品まで)

■スキル

工数見積(FP法)、折衝・提案、計画、調査、設計、実装(C、Java、クライアント系、SQL等)

データベース全般、テスト計画・項目作成、運用・保守

その他

Excel、プログラミングなどソフト系のお困りごと

対象地域

千葉県:東葛エリア(松戸市、柏市、我孫子市、市川市、流山市、船橋市、鎌ヶ谷市、白井市、浦安市) 他要相談

茨城県:取手市、土浦市、他要相談

埼玉県:三郷市、草加市、春日部市、他要相談

東京都:23区、他要相談

京都府:南区、他要相談

ご質問ございましたら、お問い合わせページよりご連絡ください。

ブログ・YouTubeが面白いと思って頂けたらファンレターよろしくお願いします!

OFUSEで応援を送る
おすすめの記事