全画面表示で画面ごとにスクロールするページのエフェクトについて

Question

fullPage.jsを使って画面ごとにスクロールするサイトを作成したいと思っています。

・fullPage.js
https://github.com/alvarotrigo/fullpage.js

画面スクロール時のエフェクトを以下ページのような感じにしたいのですが、
こちらはjQueryなどを使って実装できるのでしょうか？

https://brand.denso.com/ja/

ご教示いただけると幸いです。
よろしくお願いいたします。

Answer 1

使用方法が解らない場合は
「該当のJS名＋使い方」などで検索すると、
使用方法をブログなどで書かれているものがヒットするかと思います。

「fullPage.js 使い方」でぜひ一度調べてみてください。
下記など、解りやすそうなものがあるようです。
http://neromiu.net/demodemo/cording/fullpage-js-bigginer-use/

※fullPage.js自体が用意されたjQuery、JSのライブラリです。
ユーザーは、それを簡単なjQuery（JS）の記述
（動かすためのおまじないは必要です）で
実装しています。

Comments

[tetutetutetu]

早速のご回答ありがとうございます。
オプションでeasingの種類を指定する感じですかね？
頑張って実装してみようと思います。

[yyyy.yyyy]

オプションで結構色々できるみたいですね。
もしちょっと複雑なことがしたい場合は、
「JS名＋やりたい動き」で調べるとうまくいけばヒットするかも？

下記は「JS名＋オプション」で調べてみました。
デモページとかを見ると解りやすいです。
頑張ってください！
http://www.electric-fruits.com/creator-blog/fullpage-js-memo-201507/

[yyyy.yyyy]

追記で…
JSライブラリのDLしたフォルダ内や、
公式ページにサンプル集が用意されていることが多いです。
英語になるかもしれませんが、そちらもぜひご参考ください。

[yyyy.yyyy]

（さらに追記ですみません…！）
やりたい動きのサイトとfullPage.jsを見てみましたが、
結構ハードルが高そうです。
JS部分に追記する必要がありそうですね…。

もしJSが得意でないようでしたら、
下記のように他のライブラリを探すのも一つの方法かと思います。
（ライブラリによって、できることは限られています）
http://liginc.co.jp/web/matome-web/93659

[tetutetutetu]

色々とご丁寧にありがとうございます。
jQueryプラグインのように初心者でも割と簡単に実装できたらと思っていたのですが、そう甘くはないみたいですね^^;
とても勉強になりました。

Answer 2

デンソーのような見栄えのするアニメーションは、とても難しいと思いますが、技術的にはJQuery＋CSS3で実装可能かと思います。

densoはおそらくGreenSock社のアニメーションライブラリを使用しています。

参考
https://greensock.com/

Comments

[tetutetutetu]

ご回答ありがとうございます。
アニメーションライブラリは自分のような初心者にとってはなかなかハードルが高そうですね。
勉強になりました。ありがとうございます。

[unorigino]

greensockは意外と簡単そうではありますがモチベーションの問題ですよね。
いいサイトができるといいですね。