facebooktweetはてブLINEPocketfeedlyおはようございます、hgmです!本日はスクロールに合わせてテキスト等を表示させることができる「rlsmooth.js」をご紹介させていただきます。くじデモ実装方法オプションまとめデモ公式サイトのデモになります。CodePen.darkスクロールしていくと、画面上部とサイドにテキストがそれぞれ違う動きでポップアップで出てきます。実装方法それでは基本の実装からご紹介します。src="js/rlsmooth.js"></script></body></html>jqueryを先に読み込み、そのあとrlsmooth.jsまたはrlsmooth.min.jsを読み込みます。ポップアップするテキストや画像等を記述しておきます。このとき、クラス名は任意のものをつけましょう。効果の終了スピード});});Javascriptのデフォルトの呼び出しでは、スクロールが始まった時点でついてくる動きになります。CSSでは、位置や動きを指定します。こちらは全て任意です。0;}デモと同じポップアップの動きにしたい場合は「smooth-style」のクラス名を指定し、cssに下記を追加しておきましょう。100%;}以上で基本の実装が完了しました。オプションの指定は下記でご紹介します。fadeOut()まとめ基本的にはシンプルな動作ですが、自分でコードを書くよりは時短になるかなと思います。工夫もしやすいため、覚えておくと結構使えるかも?スクロール系は私自身使う機会がよくあるため、おすすめのプラグインがあればぜひシェアしていただきたいです!facebooktweetはてブLINEPocketfeedly関連記事この記事を書いた人hgm農業高校出身フロントエンドエンジニアの社員hgmです。猫センサー搭載済みの愛猫家。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。MAX】2018年10月19日10今話題のLINEのオープンチャットとは?実際に参加してみた2019年09月11。