フェードインする画像の実装方法について。

AppleのサイトdeMacのページへ入ると、以下の様に
ヘッダーにあるMacBookやMacProがフェードインしていますが
これは読み込むとこのようになっているのですが、どうやったら同じように出来るでしょうか？

ご存じの方ご教授ください。

行動規範の内容に同意します

回答1件

ベストアンサー

ヘッダと言っているのは AppleのMacページの上部の
製品一覧らしい画像群のことでしょうか。
それらが右から左へ fadeinしながら登場する効果について回答すればいいですか？

0.HTMLについてどのくらい理解されているか分からないのですが、
divなどのブロック要素が、position:relative / absokute / fixed などに設定すれば
比較的自由な位置に配置することができます。

製品一覧を含むHTML文書をブロック要素に記載し、開始位置に配置します。
このとき、CSSで、opacity(不透明度) を 0 にして透明にしておきます。
ページのロード時にイベントをとることができます。(onloadなど)
そのイベントからたとえば 1500ms(1.5秒後)、animationを開始します。
opacity を 1に、 left を実際の配置位置まで変化させる animationを
行えば完了です。

Apple社さんは jQueryを使っていませんが、jQueryを使えば比較的簡単にできます。
animateメソッドについて調べてみてくださいね。

投稿2015/05/08 16:25

okayu3

総合スコア200

YuichiKataoka

2015/05/09 14:55

早速の回答、ありがとうございました。 javascriptについては素人なもので、イマイチやり方がわかりませんが教えて頂いた方法を、調べながらjQueryも探してみます。ちなみにjQueryでこのようなもの無いでしょうか？

okayu3

2015/05/09 15:32

うーんと、まず、商品一覧が入った div#products を作ったとしますね。そうすれば、 $(document).ready(function () { var fireAt = 1500, duration = 400; //初期状態の設定 $('#products').css({ top: 20 + 'px', left: $(window).width() + 'px', opacity: 0 }); //fireAt ミリ秒後に移動とfadeIn開始. duration ミリ秒後に完了。 setTimeout(function () { $('#products').animate({ left: ($(window).width() * 0.5 - 300) + 'px', opacity: 1 }, duration); }, fireAt); }); で動きます。pluginは別に要らないかな？

YuichiKataoka

2015/05/09 15:51

このようにやってみたのですが、できません。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href=""> <style type="text/css" media="screen"> #products { position: fixed; opacity:0; } </style> </head> <body> <div id="products"> <img src="gazou1.jpg" width="100"> <img src="gazou2.jpg" width="100"> </div> <script type="text/javascript"> $(document).ready(function () { var fireAt = 1500, duration = 400; //初期状態の設定 $('#products').css({ top: 20 + 'px', left: $(window).width() + 'px', opacity: 0 }); //fireAt ミリ秒後に移動とfadeIn開始. duration ミリ秒後に完了。 setTimeout(function () { $('#products').animate({ left: ($(window).width() * 0.5 - 300) + 'px', opacity: 1 }, duration); }, fireAt); }); </script> </body> </html> どうしたら良いでしょうか？

okayu3

2015/05/09 15:56

私以外にもたくさん回答いただける人がいると思いますので、別に質問を作成された方がいいと思いますが、 1. 私が書いたのは jQueryを使った例なので、もしお使いの場合は jQueryを scriptタグで指定しましょう。 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> のように。 2. あとは position: fixed をやめて、absolute にしてみましょうか。

YuichiKataoka

2015/05/09 16:03

jqueryを読み込んだら、出来ました！！！ありがとうございました。

行動規範の内容に同意します