質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

199閲覧

Webサイトのアニメーション表現の実現手段について

vanquish

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/02/21 13:59

参考サイトのようなアニメーションを実現する方法を知りたい

下記の参考サイトのようなアニメーション表現を実現する場合の方法について、知識のある方からアドバイスを頂戴したいです。

参考サイト1

https://www.nnn.ed.nico/pages/programming/
ページをスクロールしていくと、写真の部分が横からアニメーションを伴って表示されます。
その際、写真が現れる前に青のボックスがアニメーションしてから写真が現れています。

参考サイト2

https://payke.co.jp/
こちらのページも参考サイト1と同じように、スクロールしていくとアニメーションを伴って表示されるブロックがあります。
青いボックスが横方向にアニメーションしてから、その後ろから写真が現れます。

具体的な質問内容

上記の参考サイトのようなアニメーションを実現する方法として、jQueryでなら私自身同じようなものを作れると思います。
スクロールして画面内に入ったら発火するjQueryプラグインを使用し、画面内に入った段階でアニメーションを
させるのだと思います。その場合HTMLに<span>タグを使用して「青いボックス」の部分のブロックを作成し、CSSでアニメーションの開始と終了の際のwidthを指定して、jQueryでcssのclassの付け外しをする事で実現可能だと思っています。
しかし、spanタグを使用する事が、スマートではないように感じていますし、html内にアニメーションなどを目的としたタグはあまり入れたくないというのが正直なところで、他に方法が無いのかと色々と調べましたが、それらしい情報を見つけることができませんでした。

また、参考サイトのような比較的最近のサイトで、jQueryのアニメーションに頼っているのかどうか、
疑問に感じていて、最新の技術などが使われているのではないかと考えていますが、あくまで想像の範囲です。。。
知識のある方のご意見を頂けないでしょうか。

ソースを確認しましたが、スキル不足によりどのように実現しているのか分からず、質問させて頂きました。

私自身のスキルや立場など

自社の簡単なLPやホームページを制作しているWeb担当(デザイナー)です。
jQueryやJavaScriptの基本的な文法は理解しており、jQueryプラグインの簡単なカスタマイズなどは可能な程度です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

spanタグを使用する事が、スマートではないように感じていますし、html内にアニメーションなどを目的としたタグはあまり入れたくない

実際に編集するHTMLを綺麗に保ちつつ、動的にアニメーション効果をつけるなら、waypoint系のプラグインは必須かと思います。

jQueryにしろreact等のフレームワークにしろJavascriptが必要な事はかわらないので、あとはサービスの開発環境に合わせて適切にプラグインを入れて行くのがいいかなと(ある程度のプログラミングスキルがあれば、処理を自分で作ってしまうのも良いですが)

私の場合はvue.jsをメインで使うので、npmパッケージのVueWaypointというのを使ったことがあります。

投稿2019/02/21 14:47

yu-smc

総合スコア610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

vanquish

2019/02/22 04:00

ご回答ありがとうございます。 やはりプラグインを使用するか自分でjQueryなどのコードを書く方法になるのですね。 react等のフレームワークは習得したいと考えていますが、まだ現時点で知識がないため今後の参考にさせて頂きます。
guest

0

ベストアンサー

コードを拝見したところ、一見同じような動きでも参考サイト1と2とではやり方が違うようです。
簡単に言うと、
参考サイト1の方では背景色が紺色のブロックに後からコンテンツを表示させるやり方
参考サイト2の方はブロックを2つ並べてタイミングをずらしてスライド表示させるやり方
のようです。
どちらもJavaScriptで動かしていることには違いないですが、既存のプラグインを使うのではなく独自にコードを書いていると思われます。
アニメーションの種類にもよりますが、最近ではcssのみである程度動かすことも可能ですし、やり方はいろいろあり、10人開発者がいたら10人とも違った発想で作るかもしれません。
今はjQueryのプラグインのカスタマイズはされているようですが、プラグインに頼らず一度1から独自に書いてみられることをお勧めします。自分で書いてみて繰り返しテストを行ううちに腕も上がるでしょうし、自分の思った通りに動かせるようになればますますこの仕事が面白く感じられるようになると思います。

あと補足ですが「<span>タグを使用して青いボックスの部分のブロックを作成し」とありますが、そこは<div>を使うのがhtmlの文法的には正しいと思います。<span>は主にインライン要素の一部にスタイルを適用したりするときに使うものだとお考えください。

投稿2019/02/21 14:52

cerfweb

総合スコア1899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

vanquish

2019/02/22 03:55

ご回答ありがとうございます! 例えばLPのように長いページ内に同じようなアニメーション表現が何箇所もあるが、少しずつタイミングなどが異なり調整が必要な場合、 それぞれについてアニメーションを調整するのが非効率だなと感じていました。 なのでそれに最適な汎用性のあるプラグイン、もしくは汎用性のある実現方法があるのではと感じたのですが、汎用性を持たせるにしても自分でコードを書くしか無いようですね。
cerfweb

2019/02/22 10:26

そうですね。自分でコードを書くのが一番小回りの効くやり方だと思います。
guest

0

私も自前で書いたほうが理解が深まるかと思います。
私自身も10年近くこの業界にいますがそうやってきましたし、
今でも分からないことは自作で作ったりしています。
また、jqeuryを使わない場合だと以下が参考になるかと思います。
頑張ってください。
https://tympanus.net/Development/BlockRevealers/

投稿2019/02/21 16:04

ga-hi-

総合スコア34

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

vanquish

2019/02/22 03:57

ご回答ありがとうございます! 『Block Reveal Effects』はイメージに近いものでした。 こちらを使えないか試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問