- ベストアンサー
CSSでここまで出来るんですか！？
下記のサイトを見たら、ウインドウの下の方に女の人が動画アナウンス するオブジェクトがあったのですが、どのようにやるのでしょうか？ http://www.ac-sarong.com/ やりたいことは、「スクロールしてもオブジェが付いてくる」という 所です。 参考URLなどがありましたら、教えて下さい。 よろしくお願いします。 このサイトは衝撃的でした。（商品ではなくて）
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
CSSだけでは、ここまで出来ません。 画面の移動に対してオブジェクトを追従させるにはスクリプトが欠かせません。 javascriptでメニューを追従させる方法を紹介しているページがあったので載せておきます。 http://coliss.com/articles/build-websites/operation/javascript/tutorial-scrollfollow-sidebar.html デモページ(右側のメニューがスクロールに追従します) http://css-tricks.com/examples/ScrollingSidebar/ CSSやjavascript等は下記のページが詳しいので参考にして下さい。 http://www.tohoho-web.com/www.htm
その他の回答 (5)
- metametamu
- ベストアンサー率51% (153/295)
すみません、一部訂正です。 html,body{ margin:0; padding:0; height:100%; overflow:hidden; } #Wrapper { height:100%; overflow:auto; }
- metametamu
- ベストアンサー率51% (153/295)
例えばこんな感じにすると同じような効果を得られます。 Netscapeの古いバージョン(6、7くらい)には未対応です。 <html> <head> <style type="text/css"> html,body{ margin:0; padding:0; height:100%; } #Wrapper { height:100%; } #Wrapper p { position:absolute; bottom:0; } </style> </head> <body> <div id="Wrapper"> <!-- コンテンツ --> <p>下に配置</p> </div> </body> </html>
お礼
metametamu様 タグまで載せて頂き、ありがとうございます。 早速やって見たいと思います。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
position:fixed;を使って下さい。 #actress{ position:fixed; bottom:0; right: 0; width:80px; height:100px; } > 参考URLなどがありましたら、教えて下さい。 「スタイルシート 解説」で検索すれば、たいてい出てきます。 IE6以前ではposition: fixedが実装されていないので、 それにも対応するなら、他の書き方やJavaScriptなどを使う必要があります。
お礼
taloo様 ご回答ありがとうございました。 CSSではやはり、自分が考えているようには出来ないようですね・・・。 Javascriptを使って挑戦してみたいと思います。 ありがとうございました。
- nine999
- ベストアンサー率44% (512/1140)
マウスの動きに何かがついてきたり、クリックに応じて絵が飛び出す仕掛なども原理は同じです。 レイヤーや独立したグラフィックエリアを画面上に作り、画面の大きさに合わせて配置をすることで、定位置にメニューや画像を表示することができます。 Flashを使って全体をHTMLらしく見せている仕掛というのもあります。 http://www.openspc2.org/reibun/javascript/image/029/index.html 例えば↑は画像を中央に表示します。 表示位置は、画面の大きさの１／２から画像の１／２引いた位置になっていますので、画面の大きさから画像の大きさだけを引いた位置に式を書き換えれば右端（下端）に画像が表示されます。 GIFアニメの画像を用意すれば簡単にアニメーションも利用できます。
お礼
nine999様 ご回答ありがとうございます。 このサイトは始めてみました。大変参考になります。 ありがとうございました。
CSSではなくJavaScriptで実装しています。 「ウィンドウをスクロールしても画像や文字(オブジェクト)は動かない(固定)」（http://www.webstudio.jp/web_studio/tech/files/g013/g013.htm）を参考にして下さい。
お礼
i80286様 ご回答ありがとうございます。 こんな機能が欲しかったんです！参考にさせて頂きます。 ありがとうございます。
お礼
kouji_124様 ご回答ありがとうございます。 CSSのfixを使って見たのですが、ブラウザによって変わってしまって・・・。 http://css-tricks.com/examples/ScrollingSidebar/ このようなサイトを求めていました！ありがとうございました。