前回の続きになりますが、今回はjQueryを利用して、前回よりも少しだけリッチな感じにしたものをご紹介いたします。

タイトルの通り、スクロールと連動させ、スクロールにあわせて一瞬だけテキストを表示させる方法になります。

スクロールにあわせて一瞬だけテキストを表示

どういうことかというのはデモを見て頂くと分かると思いますので、デモをご覧ください。

DEMO

jQueryといってもほとんどCSSの力でやっております。CSS万歳。

HTML

デモでは2ヶ所で表示されるようになっていますが、HTMLコード自体は基本同じなので1ヶ所だけ記載します。

<div class="contents" id="js-flashText">
  <div class="flash-text">
    <p>ここに一瞬だけ表示させたいテキスト</p>
  </div>
  <div class="contents__inner">
    <p>ここは普通に表示させたいコンテンツなど</p>
  </div>
</div>

該当箇所のみ記載しています。また、マークアップは適当ですので、よきに計らえということでお願いします。

とりあえず、表示させたい位置の div に js-flashText というid(2ヶ所の場合はclassにする)をつけて、「一瞬だけ表示させたいテキスト」の一式を入れ子にしてしまえばいいです。あとは普通に通常表示させるコンテンツを置いておけばOK。

CSS

animation だったり、opacity だったり、display:table だったりを使用していますので、IE8以下については察して頂ければと思います(animation はIE9でも無理か…察してください)。

必要なスタイルのみ記載していますので、足りない部分はサイトにあったスタイルを適当にあててくださいね。

.flash-text {
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  width: 100%;
  height: 100%;
  visibility: hidden;
  z-index: 1;
}

.visible .flash-text {
  -webkit-animation: fade-in-out 2s ease 0s forwards;
  animation: fade-in-out 2s ease 0s forwards;
}

.flash-text p {
  display: table-cell;
  vertical-align: middle;
  font-size: 90px;
  text-align: center;
  color: #000;
}

@-webkit-keyframes fade-in-out {
  0% {visibility: hidden; opacity: 0;}
  50% {visibility: visible; opacity: 1;}
  100% {visibility: hidden; opacity: 0;}
}

@keyframes fade-in-out {
  0% {visibility: hidden; opacity: 0;}
  50% {visibility: visible; opacity: 1;}
  100% {visibility: hidden; opacity: 0;}
}

CSSは前回の分とほとんど同じで、animation の指定だけ別に切り離し、visibleというクラスを付けています。

要は、visibleというクラスが付いた時だけ表示するような仕組みになっていて、visibleというクラスはHTML上では付けずに、jQueryで付与するというイメージです。

jQuery

jQueryになりますので、下記とは別にjQuery本体の読み込みが必要になります。しっかりと読み込んであげてください。

$(function () {
  var $win = $(window),
      winHeight = $win.height(),
      scroll,
      cur,
      pos;
  $win.on("scroll", function () {
    $('#js-flashText').each(function () {
      scroll = $win.scrollTop();
      cur = $(this);
      pos = cur.offset().top;
      if (scroll > pos - winHeight / 2) {
        cur.addClass('visible');
      }
    });
  });
});

複数箇所で表示させたい時は #js-flashText をクラス(.js-flashText)にして、HTML側にもクラスを付与するだけです。

表示のタイミングを調整したい場合は、winHeight / 2 のところを変更すればいいです。この場合だと、表示させたい位置のブロック(ターゲット)が、画面の半分まできたらテキストが表示されるようになっています(/2を+200とかにするとターゲットが200px分画面に表示されたところでって感じになりますよ)。

DEMOはこちらになります。

使いどころ

が難しいですけど、どっかのサイトでこういうのがあって、それ見て面白いなと思ってやってみました。演出としては面白んですけど、ユーザーの使い勝手的にはどうなんでしょうね、こういうの。

あまり使い過ぎはよくないかなぁと思っていて、このサイトでもかなり限定して使っています(今回のスクロールと連動してっていうのは使用していないですけど)。

皆様もよかったらぜひ。