- ベストアンサー
webページ GIFを傾ける ソースはどうしたら？
webページを作っているのですが、 http://www.godeater.jp/ ここのページのようにGIFを傾けたり、背景もGIFで画像が変わっていく感じにしたいのですが。 ソースやCSSはどのようにしたらよいでしょうか？ ここ何日も挑戦しているのですが全然出来ません・・・。 Javascriptでやってます。 自分でやれとかそういう回答はやめてください。 例でいいので各種類、ソースを作ってもらえませんか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
暇が取れたので、簡単なものを ★ただし、IEは対応していない。firefox,Opera,safari,google ChromeなどではOK IE用にtransform,rotationを使う方法は自分で調べてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.nav{width:80%;margin:0 auto; -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); } div.nav ul,div.nav ul li,div.nav ul li a,div.nav ul li a img{disoaly:block;list-style:none;margin:0;padding:0;} div.nav ul li{width:33%;float:left;postition:relative;} div.nav ul li a img{width:100%;height:auto;position:relative;opacity:0.5;} div.nav ul li a:hover img{width:120%;top:-10%;left:-10%;z-index:100;opacity:1.0; -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div class="nav"> ＿＿<ul> ＿＿＿<li><a href=""><img src="./images/1.jpg" width="640" height="480" alt="メニュー1"></a></li> ＿＿＿<li><a href=""><img src="./images/2.jpg" width="640" height="480" alt="メニュー1"></a></li> ＿＿＿<li><a href=""><img src="./images/3.jpg" width="640" height="480" alt="メニュー1"></a></li> ＿＿</ul> ＿</div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
でも自分でするしかない。 firefox+fireBugで、HTML,CSS,javascriptをまず確認してください。 とってもたくさんのjavscriptやCSSを読み込んでいることがわかると思います。それを、すべて説明するのは勘弁してください。読み解くだけで半日かかるでしょう。 それはさておき、基本的にはGIFではなくfrashです。フラッシュを作成するソフトで作成したら出来ます。 CSS3を使えば、ある程度までは似たものが作れますが対応ブラウザが限られるでしょう。 アニメーション CSS Animations Module Level 3 ( http://www.w3.org/TR/css3-animations/ ) 回転 CSS 2D Transforms ( http://www.w3.org/TR/css3-2d-transforms/ ) 時間的変化 CSS Transitions Module Level 3 ( http://www.w3.org/TR/css3-transitions/ ) これらのプロパティと動的な擬似クラス(:hover)を使うと、相当程度期待される動作は可能です。 とてもじゃないけど、ここで解説可能なレベルをはるかに超えます。
お礼
どうもありがとうございます。 これを参考に頑張ってみたいと思います。