縦方向、アニメーションを伴うスライドで文字を遅れて表示させる

Question

###前提・実現したいこと
https://www.nissin-mokkou.co.jp/quality

このサイトのようなスライドを作りたいです。
スライド内のビデオ映像のような動きは入りません。

【再現したいこと】
・縦方向のスライド
・スライド切り替え時のアニメーション
・ページナビゲーションあり
・遅れて文字・グロナビが出てくる
・１枚目はだんだん明るくなる

上記を実現できるようなプラグインはありますでしょうか。

Answer 1

1つで全てを解決できるようなプラグインはないかと思います。
参考にされているサイトのソース表示でどんなプラグインが使われているか、1つずつ「どんな動きのために導入されているプラグインか」を確認されてはいかがでしょうか？私が見る限り、たくさんのプラグインを活用してこの形になっているように見えます。

Comments

[raidomaru]

うまく読み解けるか自信はないですが、やってみます。ありがとうございます。

[masaya_ohashi]

読み解く、ほどソースコードを見る必要は無いと思います。とりあえず<script src="xxx.js">のxxx.jsの部分をGoogleで検索してみればプラグインの公開元が探せるかと思います。たいていの場合公開元に「どんなことができるか」がわかりやすく(ただし英語で)書いてあるので、それを見て個々のプラグインが何をしているかをなんとなく理解するだけでもいいと思います。

Answer 2

質問の意図とは関係ありませんが、まず画像が表示され、次にゆっくりと企業ロゴが表示され、さらにゆっくりとメニューが表示され、実際に操作できるまで 5 秒くらいかかりますね。必要な重いコンテンツをロードしているわけでもないのにこれは最初からイラッとします。

メニューは無駄に英語で、ポイントすれば日本語になるとは言え、万人向けとは言い難いです。
右上をクリックすれば英語のサイトに移りますが、日本語のコンテンツと同じものは提供されず、一部英語化されただけ。
「田舎の社長の都会へのあこがれを表現した作品」と言われればそのような芸術として見られますが、まあダサいです。

必要な情報が瞬時に提供され、するべきことが一目でわかり、スピーディーに操作できるページの方がクールだと思います。
必要なのはまずメニュー。それを瞬時に出して操作可能な状態にしてから空き時間にゆっくりとロゴを表示すればいいのにと感じました。