CSSでここまで出来るんですか！？

解決済

質問者：hamu1985
質問日時：2010/03/22 16:05
回答数：6件

下記のサイトを見たら、ウインドウの下の方に女の人が動画アナウンス
するオブジェクトがあったのですが、どのようにやるのでしょうか？

http://www.ac-sarong.com/

やりたいことは、「スクロールしてもオブジェが付いてくる」という
所です。

参考URLなどがありましたら、教えて下さい。

よろしくお願いします。

このサイトは衝撃的でした。（商品ではなくて）

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

No.1

回答者： noname#111181
回答日時：2010/03/22 16:24

CSSではなくJavaScriptで実装しています。

「ウィンドウをスクロールしても画像や文字(オブジェクト)は動かない(固定)」（http://www.webstudio.jp/web_studio/tech/files/g0 …）を参考にして下さい。

- 0
- 件

通報する

この回答へのお礼

i80286様

ご回答ありがとうございます。

こんな機能が欲しかったんです！参考にさせて頂きます。

ありがとうございます。

通報する

お礼日時：2010/03/22 22:18

No.2

回答者： nine999
回答日時：2010/03/22 16:25

マウスの動きに何かがついてきたり、クリックに応じて絵が飛び出す仕掛なども原理は同じです。

レイヤーや独立したグラフィックエリアを画面上に作り、画面の大きさに合わせて配置をすることで、定位置にメニューや画像を表示することができます。
Flashを使って全体をHTMLらしく見せている仕掛というのもあります。

http://www.openspc2.org/reibun/javascript/image/ …
例えば↑は画像を中央に表示します。
表示位置は、画面の大きさの１／２から画像の１／２引いた位置になっていますので、画面の大きさから画像の大きさだけを引いた位置に式を書き換えれば右端（下端）に画像が表示されます。
GIFアニメの画像を用意すれば簡単にアニメーションも利用できます。

- 0
- 件

通報する

この回答へのお礼

nine999様

ご回答ありがとうございます。

このサイトは始めてみました。大変参考になります。

ありがとうございました。

通報する

お礼日時：2010/03/22 22:20

No.3ベストアンサー

回答者： kouji_124
回答日時：2010/03/22 16:27

CSSだけでは、ここまで出来ません。

画面の移動に対してオブジェクトを追従させるにはスクリプトが欠かせません。
javascriptでメニューを追従させる方法を紹介しているページがあったので載せておきます。

http://coliss.com/articles/build-websites/operat …

デモページ(右側のメニューがスクロールに追従します)
http://css-tricks.com/examples/ScrollingSidebar/

CSSやjavascript等は下記のページが詳しいので参考にして下さい。

http://www.tohoho-web.com/www.htm

- 0
- 件

通報する

この回答へのお礼

kouji_124様

ご回答ありがとうございます。

CSSのfixを使って見たのですが、ブラウザによって変わってしまって・・・。

http://css-tricks.com/examples/ScrollingSidebar/

このようなサイトを求めていました！ありがとうございました。

通報する

お礼日時：2010/03/22 22:22

No.4

回答者： taloo
回答日時：2010/03/22 18:29

position:fixed;を使って下さい。

#actress{
position:fixed;
bottom:0;
right: 0;
width:80px;
height:100px;
}

> 参考URLなどがありましたら、教えて下さい。
「スタイルシート　解説」で検索すれば、たいてい出てきます。

IE6以前ではposition: fixedが実装されていないので、
それにも対応するなら、他の書き方やJavaScriptなどを使う必要があります。

- 0
- 件

通報する

この回答へのお礼

taloo様

ご回答ありがとうございました。

CSSではやはり、自分が考えているようには出来ないようですね・・・。

Javascriptを使って挑戦してみたいと思います。

ありがとうございました。

通報する

お礼日時：2010/03/22 22:23

No.5

回答者： metametamu
回答日時：2010/03/23 08:11

例えばこんな感じにすると同じような効果を得られます。

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>