株式会社NextCode
2021/08/12
HP制作ツール「elevator_scroll.js」を開発
JavaScriptを使ったライブラリ「elevator_scroll」を開発、公開致しました。
スクロールアニメーションを使用したデザイン性の高いWebサイトの制作にお役立てできるかと思います。
こちらからダウンロードを行ってご利用ください。
https://github.com/nextcode-sys/elevator_scroll.js
どのようなWebサイトができるのか
elevator_scrollは画面を左右で2分割し、左のスクリーンと右のスクリーンで表示します。
下へスクロールする際は左右のスクリーンが非対称にスクロールしていく
スタイリッシュなアニメーションで移動します。
各セクションを移動する際にスクロールアニメーションが実行されるイメージです。
このelevator_scrollはより多くのレイアウトやデザインに対応できるよう設計されています。
例えば、
各セクションのコンテンツ量を把握し、
画面に収まりきらない場合はそのセクションの最初か最後までスクロールしない限り
スクロールアニメーションを実行させないことによりコンテンツの全ての内容を表示してくれます。
または左右2分割ではなくフルスクリーンでの表示や、
左右にスクロールするスライダーも使えますし、
もちろんレスポンシブにも対応できます。
各セクションのコンテンツ量や魅せ方に縛りがないといった点も魅力のひとつです。
デモサイトも併せて公開してますので下記リンクにてご確認いただけます。
https://elevator-scroll.next-code.jp/
導入方法
- githubにてZIPダウンロード
- ダウンロードした物を解凍
- elevator_scroll.jsとelevator_scroll.cssの2つのファイルを任意のディレクトリに配置
- 終わり
使用方法
elevator_scrollにはあらかじめ用意されているclass名があり、
決められたHTMLの構造にしたがって構成し、初期設定を行うことで使用できます。
- 配置したファイルを読み込む
1 2 | <link rel="stylesheet" type="text/css" href="elevator_scroll.css"><script type="text/javascript" src="elevator_scroll.js"></script> |
2. HTMLの構成
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="elevator_scroll"> <div class="es-left"> <div class="es-section"><p>セクション1_left</p></div> <div class="es-section"><p>セクション2_left</p></div> <div class="es-section"><p>セクション3_left</p></div> </div> <div class="es-right"> <div class="es-section"><p>セクション1_right</p></div> <div class="es-section"><p>セクション2_right</p></div> <div class="es-section"><p>セクション3_right</p></div> </div></div> |
3. <script>内にて初期設定を記述
1 2 3 4 5 | <script> var obj = new elevator_scroll('#elevator_scroll', { sectionsName: ['section1', 'section2', 'section3']});</script> |
4. 終わり
各種オプションも用意してあります。
オプションの内容や設定方法等はgithubにて記載してあるのでそちらをご参考ください。
以上になります。
実際にお客様のHP制作にもこのelevator_scrollは使用しており、
スライダープラグインの「swiper.js」と両方を使用した実績があります。
下記リンクにてご確認ください。
elevator_scroll導入実績サイト( LEVELS DENTAL TEAM )
導入や変更等の難しい点がありましたら、ご依頼として承ります。
その際は、お電話またはお問い合わせページからお問い合わせ下さい。
