【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()

 

まとめ

基本的にはシンプルな動作ですが、自分でコードを書くよりは時短になるかなと思います。

工夫もしやすいため、覚えておくと結構使えるかも?

スクロール系は私自身使う機会がよくあるため、おすすめのプラグインがあればぜひシェアしていただきたいです!

関連記事

この記事を書いた人

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!