JavaScript初心者です。よろしくお願い致します。
現在製作中のサイトにて、JavaScriptを使ったアニメーションを作りたいと思います。
アニメーションの動きは下記のとおりです。
Aの背景画像を、ブラウザサイズにより画面いっぱいに表示。
その上にBの画像を配置(位置はAのこの位置…と決められています)。
↓
画面をクリック後、Aの背景、およびBの背景が拡大されてフェードアウトされます。
その拡大方法なのですが、それぞれの中心から拡大するのではなく、
ちょうど建物の前に犬がいるところに近づくような
アニメーションを施したいと思います(※添付画像を参考)。
参考になるサイト、およびjQueryなどありいましたら教えてください。
なにぶん、JavaScriptを使いはじめてまだ間もないので、
参考書を探すのにも苦労している次第です。
よろしくお願い致します。
No.2ベストアンサー
- 回答日時:
#1です。
>サンプルを見つけられずにいます。
『作りたい』というご質問だったので、てっきり作成するのだと思っていましたが。
コピペでご質問のような動作をするものは、内容が少々特殊なので、多分見つからないと思います。
サンプルや原理については、情報が沢山あると思いますので、検索すればいろいろ見つかるはずです。
◆<原理的なもの>(比較的シンプルに書いてある)
http://javascript123.up.seesaa.net/javascript/zo …
http://www5e.biglobe.ne.jp/~komichan/javascpt/ht …
◆<マウスホイールで拡大・縮小>(IE専用の記述法になっているので他のブラウザでは動かないかも)
http://www.sotechsha.co.jp/JS_SB/image/099.html
>昨今、jQueryでアニメーションするというものが主流となっており
jQueryのものは大抵ライブラリ化されてしまっているので、ズーム単体のサンプルは見つからないかも。
というのも、jQueryだとズームそのものは1、2行の記述で済んでしまいますし、ズーム自体がそのスクリプトの目的ではないので、ちょっとしたエフェクトとして使用しているにすぎないからです。
◆<jQueryズームの例>(jQuery解説サイトのサンプル)
http://semooh.jp/jquery/api/effects/animate/para …
◆<少々目的は違いますが、ズームを利用したライブラリの例>
http://www.dfc-e.com/metiers/multimedia/opensour …
http://buildinternet.com/live/elasticthumbs/
http://addyosmani.com/blog/zoomer-gallery-a-jque …
◆<拡大・縮小と移動の組合せという意味では内容的に近いのかも>
(見た目は全然違いますが、処理方法として)
http://demo.tutorialzine.com/2010/07/making-slic …
http://malsup.com/jquery/cycle/
>背景画像を徐々にズームする
え~~っと。 背景画像でないとダメなのでしょうか?
背景画像でもCSS3でサイズ指定が可能になったようですが、対応するブラウザが限られるのと、画像要素をズームするのとは方法が若干異なるので、両方を記述したものを作るよりも、「画像をズームする」スクリプトひとつを使って、二つの画像を拡大・縮小する方が簡単そうに思えますけれど?
http://www.htmq.com/css3/background-size.shtml
検索で探すにしても、求めるものそのものを探すよりは内容を分解して、「背景画像のサイズを指定する方法」、「スクリプトでCSSを制御する方法」、「スクリプトでアニメーションする方法」などのように分けて別々に探す方が適切な情報を得られると思いますし、複合すればするほどそのようなものにマッチする情報が飛躍的に少なくなるはずです。
>画面いっぱいに表示されている背景画像を徐々にズームする
速度に関しては設定しなおせばほぼ自由になるはずです。
画面いっぱいとは値が可変ということを意味するのでしょうか?
その場合は、最初にスクリプトで画面サイズを取得してそれを初期サイズとして記憶しておけばよろしいかと。
単に、「画像が大きい」という意味だけであれば、特に問題はないように思えます。
単純に画像を拡大しただけだと、それに伴ってブラウザの表示サイズも大きく認識されてしまいますので、親の要素でoverflow:hiddenにしておくか、あるいは画像をclipするかなどが必要になるかも知れません。
#1にも書きましたように「どのくらい理解なさっているのかわかりません」が、#1の回答内容がもしも『?』状態でしたら、一気にお求めのものを作ろうとするよりも、
・単純に一つの画像を拡大してみる
・一つの画像を移動してみる
・両方を組合せて、画像中の任意の一点を固定できるようにする
・複数の画像を同時に制御する
などというように、順を追って作っていった方が、結果的には近道かと思います。
その途中で不明な点が出てきたら、そこについて具体的な質問をなさる方が、詳しい回答が得られると思います。
こんなつたない質問文にここまで丁寧に答えていただき、ありがとうございます!!
javaScriptのしっぽすら掴めずにいたような状態だったので
ものすごく助かりました!
感謝します!本当にありがとうございました!
No.1
- 回答日時:
どの程度までを理解なさっているのかわかりませんが、
・画像のズームのアニメーション
・画像の移動のアニメーション
が作成できれば、これを組み合わせることで可能と思われます。
結局のところ、画像の中心を移動しないようにしてズームするのと同じことになります。(固定する位置が異なるだけ)
例えば、画像をズームするのにwidth、heightを指定すると思いますが、固定点が画像の横・縦に対してそれぞれ(p、q)の割合の位置だとすれば、その位置の実際の寸法値は
画像の左から width×p
上から height×q になるはずです。
この位置を、画像表示範囲の(x、y)のところに固定するのであれば、画像の表示位置を
left = x - width×p
top = y - height×q にすればよいのではないでしょうか。
これらをアニメーション処理内で同時に行えば実現できると思います。
この回答への補足
ご回答いただいたのに再度のご質問、申し訳ありません。
参考となるサイトがありましたら、教えていただけないでしょうか?
昨今、jQueryでアニメーションするというものが主流となっており、
希望の動きを実現するjQueryはもとより、画面いっぱいに表示されている背景画像を徐々にズームする…というサンプルを見つけられずにいます。
お手数をおかけしますが、何卒よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 画像編集・動画編集・音楽編集 AfterEffectでのシャターの挙動がおかしい 1 2023/05/07 00:38
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Photoshop(フォトショップ) 【Photoshop】画像拡大時に急激に画面外まで拡大してしまうのを制御したい 1 2023/08/25 03:04
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript Javascriptで出来ること 1 2022/05/16 20:19
- JavaScript ローディングアニメーションのロゴがページを読み込んだ後でも消えません 1 2022/09/20 21:50
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「using Windows」でエラーが出る
-
ImageMagickでgif画像の一部が...
-
【EXCEL VBA】ダブルクリックで...
-
こんなことてしますか??
-
vb.net 画像の透過について
-
生成AI画像について
-
UWSC「画像が無い場合」
-
同じ画像を複数回表示させる
-
Pythonでgif画像が上手く作れない
-
Excel ユーザーフォームで表示...
-
jqueryスライダーを2段でスライ...
-
Jimdoで画像をポップアップ表示...
-
svgクリップパスの応用コーディ...
-
画像ファイルのストリーミング取得
-
画像を表示するには
-
HTMLでサイトの模写をしていま...
-
UWSC 画像判定と条件分岐について
-
VB6での画像のサイズ変更に関して
-
C#で画像を他の画像に貼り付け...
-
MATLABのDICOM画像表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【EXCEL VBA】ダブルクリックで...
-
こんなことてしますか??
-
Pythonでgif画像が上手く作れない
-
Excel ユーザーフォームで表示...
-
VBA シート毎に画像挿入
-
生成AI画像について
-
EXCEL VBA 複数のImageコントロ...
-
HTMLで画像をポップアップで表...
-
UWSCの色判定
-
UWSC 画像判定と条件分岐について
-
jQuery . プログラミング 助け...
-
VBAのユーザーフォームのイメー...
-
jqueryスライダーを2段でスライ...
-
vb.net 画像の透過について
-
【WPF】画像の切り替え
-
背景画像の繰り返しについて
-
「using Windows」でエラーが出る
-
画像処理したBitmapをピクチャ...
-
スマホでサイトの画像を長押し→...
-
UWSC 画像認識で条件分岐
おすすめ情報