jqueryとcssで画面をスクロール時にフワッと文字や要素が現れるやつ

今回はjqueryとcssと使って、画面をスクロールした時にフワッと文字や要素を表示してみました。
自分用の備忘録ですが、気になる方はチェックしてみてください。

どんなやつ？

(1)下にスクロールするとフワッと現れる。
(2)上に戻るとスッと消える
(3)また下にスクロールするとフワッと現れる。
(…)繰り返し・・・

簡単に言えば要素が見える範囲までスクロールした時にフワッと表示するってことです。
jqueryのコードには色々コメントを書いてますので必要に応じて編集してみてください。

jqueryとcssでスクロール時にフワッと文字や要素を表示する方法

まずは、htmlを準備します。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!-- 独自のcssの読み込み -->
<link rel="stylesheet" type="text/css" href="jquery-animation.css">
<!-- jquery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- jqueryファイルの読み込み -->
<script src="jquery-animation.js"></script>
<title>スクロールエフェクト</title>
</head>
<body>
    <div class="main">
		<div class="noeffect">
			<p>エフェクトなしです。</p>
		</div>
	</div>
	<div class="first">
		<div class="effect">
		<div>
			要素がふわっと
		</div>
			<p>文章がふわっと</p>
		</div>
	</div>
	<div class="second">
		<div class="effect">
		<div>
			要素がふわっと
		</div>
			<p>文章がふわっと</p>
		</div>
	</div>
	<div class="third">
		<div class="effect">
		<div>
			要素がふわっと
		</div>
			<p>文章がふわっと</p>
		</div>
	</div>
</body>
</html>

一番上の要素(mainのclass=noeffect)はスクロールする前から表示されているので今回は何もエフェクトをかけません。
jqueryのfadeInとfadeOutを使えばスクロール時にスッと消したり、戻った時にフワッと表示可能です。
＊ちゃんとjqueryを忘れずに読み込んでください。

次にCSSを書いていきます。


body {
	margin: 0 auto;
	height: 100%;
}

p {
	margin: 0;
}
/*　これでふわっと現れる　*/
.effect p,
.effect div
{
	margin: 0;
	transition: .8s;
}

/*以下は必要に応じて編集*/
.main {
	background-color: gray;
	margin: 0;
	height: 600px;
}

.first {
	background-color: red;
	margin: 0;
	height: 600px;
}

.second {
	background-color: purple;
	margin: 0;
	height: 600px;
}

.third {
	background-color: orange;
	margin: 0;
	height: 600px;
}

.effect {
	margin: 0;
}

transitionでフワッと表示します。
transition-delayで時間差で表示も可能です。
＊今回は適当にbackgroundとか設定してます。

最後にjqueryを記述。


$(function(){
  //見えないようにしとく
  $('.effect div, .effect p').css("opacity","0");
  // スクロールのファンクション
  $(window).scroll(function (){
    // それぞれのeffectに反映する
    $(".effect").each(function(){
      // effectの位置
      var Position = $(this).offset().top;
      // スクロールの量
      var scroll = $(window).scrollTop();
      // ウィンドウの高さ
      var windowHeight = $(window).height();
      // スクロールして要素が見える時(必要に応じて変更)
      if (scroll > Position - windowHeight + windowHeight/3){
        // 見えるようにする
        $("p, div",this).css("opacity","1" );
        // 追加のエフェクト(先)
        $("p",this).css({
          "プロパティ名": "プロパティの値",
          "プロパティ名": "プロパティの値"
        });
        // スクロールして要素が見えない時は以下
      } else {
        // 見えないようにする
        $("p, div",this).css("opacity","0" );
        $("p",this).css({
          // 追加のエフェクト(後)
          "プロパティ名": "プロパティの値",
          "プロパティ名": "プロパティの値"
        });
      }
    });
  });
});

コメントで色々書いてるので参考がてら見てみてください。
間違ってたらTwitterなどでコメントくださいませ(^_^;)

以上、jqueryとcssでスクロール時にフワッと文字や要素を表示する方法でした。

ちなみに使っているjqueryの参考書はコレ