【jQuery】スクロールに合わせてテキスト等を表示させるrlsmooth.js

javascript

【jQuery】スクロールに合わせてテキスト等を表示させるrlsmooth.js

2019年11月26日 8:00　

【jQuery】スクロールに合わせてテキスト等を表示させるrlsmooth.js

おはようございます、hgmです！

本日はスクロールに合わせてテキスト等を表示させることができる「rlsmooth.js」をご紹介させていただきます。

デモ
実装方法
オプション
まとめ

デモ

公式サイトのデモになります。

See the Pen bGGyEBQ by hgm (@hgm_universe) on CodePen.dark

スクロールしていくと、画面上部とサイドにテキストがそれぞれ違う動きでポップアップで出てきます。

実装方法

それでは基本の実装からご紹介します。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>

	<!-- ポップアップするテキスト -->
	<div class="smooth-style slide-option">表示させるテキストや画像</div>
	<!--  //ポップアップするテキスト -->


  <!-- JS読み込み -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/rlsmooth.js"></script>

</body>
</html>

jqueryを先に読み込み、そのあとrlsmooth.jsまたはrlsmooth.min.jsを読み込みます。

またポップアップするテキストや画像等を記述しておきます。このとき、クラス名は任意のものをつけましょう。

$(function() { 
  //表示がついてくる動き 
  $(".slide-option").rlSmooth(); 

  $(".my-class or #my-id").rlSmooth('slide',{　// ' 'に動きを指定
    y: 0,       // ウィンドウの垂直位置
    on: 500, 	// 効果の開始スピード
    off: 500 	// 効果の終了スピード
  });
});

Javascriptのデフォルトの呼び出しでは、スクロールが始まった時点でついてくる動きになります。

CSSでは、位置や動きを指定します。こちらは全て任意です。

.smooth-style.slide-option {
   position: fixed;
   top: 0;
}

デモと同じポップアップの動きにしたい場合は「smooth-style」のクラス名を指定し、cssに下記を追加しておきましょう。

.smooth-style {
	background-color: #000;
	color: #fff;
	display: none;
	float: left;
	font-size: 2em;
	font-weight: bold;
  filter: alpha(opacity=0.5);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5)";
  opacity: 0.5;
  padding: 2% 0;
	position: fixed;
	text-align: center;
	width: 100%;
}

以上で基本の実装が完了しました。

オプションの指定は下記でご紹介します。

オプション

// オプション      	　　開始効果 	　　	　　　　　終了効果

// 'slide'     		slideDown()  		slideUp()
// 'slideout'  		slideDown()  		fadeOut()
// 'slidehide' 		slideDown()  		hide()

// 'fade'      		fadeIn()     		fadeOut()
// 'fadeup'    		fadeIn()     		slideUp()
// 'fadehide'  		fadeIn()     		hide()

// 'showhide'  		show()       		hide()
// 'showup'    		show()       		slideUp()
// 'showout'   		show()       		fadeOut()