どうんなタイプの動画？なんでしょうか！！

Question

HTMLを勉強しているものです。

以下の様なサイト作成したいのですが
参考サイト　ttp://www.felissimo.co.jp/haco/v32/html/readpage_hc/html/haco32/platinum/?iid=p_hc_120822_32PLUTINUM

リンクが貼ったあるボタンにオーバーマウスした時にキラキラがでるのですが
どんな処理をしてあるでしょうか。

時計の振り子はGIFファイルでアニメーションファイルだとわかるんですが
nextボタンの鳥さんの動きやバックのキラキラもどういう仕組なのかわかりません。

JQueryなのでしょうか？

宜しくお願いします。

ORUKA1951 · Accepted Answer

No.2の回答は、参考にされたサイトを基にしていますから、もっと簡単な例を
h1:hover:after{content:"▲;}
h1:after{content:"△";}
で、h1に△を追加しておき、h1にポインターが乗ると▲に変わります。
・content ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#content )
・:before、:after疑似要素 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#before-after-content )
　詳細度を比較すると、h1:hover:afterは[0012]で、h1:afterは[0,0,0,2]ですから、前者が優先されますね。
・Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )

これを画像にする場合は
content:url();
です。このcontentは、章番号を自動的に振ったりすることに利用することが多いですが、このように画像やテキストを加えることもできます。

挿入される内容の位置は、positionと座標で指定します。
・指定しなければ、そのまま:beforなら前に、:afterなら後
・追加される内容相対配置する場合は、position:relativeで指定してずらします。
・絶対配置する場合は、直近のstatic以外の親になる要素の座標を基準にします。
h1{position:relative;}
h1:after{content:"▽";postion:absolute;top:-100%;left:0;}
h1:hover:after{content:"▼";color:red;}
・配置体系 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#positioning-scheme )

※質問は画像と言う表題でしたが、画像はアニメーションGIFで良いです。
　それを表示するためにはスタイルシートを使用すると良いでしょう。HTMLには何も手を加えなくて良いですしね。

ORUKA1951 · Answer

　いまどき、まったく参考にならないHTMLでありスタイルシートです【はっきり言うと決してまねをしてはならないものです。】・・・これについては最後に説明します。　しかし、同様なことはCSSを使ってとっても簡単にできます。　HTMLが

見出し

記事を書く

Top
Prifile
Contact
Links

Prev Next

だったとします。HTMLにはこのように文書構造しか書きません。またdivやspanはidやclass名を使って、文書構造を補完するためのものです。　→『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』　画像はブリンク(点滅)する星と歩く鳥のGIF画像(アニメーションGIF)と、鳥の静止画像があればよいです。 body{width:100%;height:100%;position:relative;} div.nav ol,div.nav ol li{display:block;list-style:none;margin:0;padding:0;text-align:center;} div.nav ol li{width:15%;display:inline-block;position:relative;margin:0 2%;} div.nav ol li a{display:block;width:100%;height:100%;} div.nav ol li a:hover{content:url([ブリンク画像]);position:absolute;bottom:100%;left:0;} p.link a{display:block;width:100px;height:100px;line-height:100px;position:absolute;top:50%;} p.link a.pre{left:0;} p.link a.next{right:0;} p.link a.pre:after{position:absolute;content:url([左向き鳥]);bottom:100%;left:0;} p.link a.next:after{position:absolute;content:url([右向き鳥]);bottom:100%;right:0;} p.link a.pre:hover:after{position:absolute;content:url([左に歩く鳥]);bottom:100%;left:0;} p.link a.next:hover:after{position:absolute;content:url([右に歩く鳥]);bottom:100%;left:0;} とかになるでしょう。HTMLには文字を書いておいて、スタイルシートで文字色(リンク色)を透明にして背景を置いても良いでしょう。 HTMLをこのように、文書構造だけ書いておけば、スタイルシートを書き換えることでまったく異なるデザインに出来ます。 ★示されたサイトが駄目な理由　Another HTML-lint 5 ( http://www.htmllint.net/en/html-lint/htmllint.html# ) で採点すら出来ない。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから注。 CSSではclass属性が非常に大きな力を持っている。したがって文書作成者は、体裁に殆ど何の関係も無い要素（HTMLだとDIV要素やSPAN要素など）をベースにして、それらにclass属性でスタイル情報を与えれば、独自の構造化言語を設計できると考えられる。しかし、文書の構造要素は広く受け入れられている一般的意味を持つ場合が多いので、こういった使用法は避けるべきである。文書作成者が定めたクラス名では、意味を理解してもらえない場合もある。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#class-html )］より　divの用途が完璧に間違ってますね。私は十数年この世界にいますが、これほど酷いものははじめてみました。

torayoshi · Answer

JQueryも使われてますが、キラキラのエフェクトは、
top_effect.png（トップのキラキラ）とtop_over.png（マウスオーバーのキラキラ）をplatinum_effect.jsで連続的に高速で切り替えてる（上下にずらしてる）ようです。
（top_over.pngを背景として切り替えてる）
マウスオーバーで画像を切り替えるのはCSSでよく使われてる手法と同じです。

nextボタンの鳥さんは分かりませんでした（たぶん同じかなと）
分かったのはここまでです。
全体的にとても複雑でそれ以上は分かりませんでした。
回答でなくて申し訳ないです。

どうんなタイプの動画？なんでしょうか！！

No.2の回答は、参考にされたサイトを基にしていますから、もっと簡単な例を

いまどき、まったく参考にならないHTMLでありスタイルシートです【はっきり言うと決してまねをしてはならないものです。

JQueryも使われてますが、キラキラのエフェクトは、

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　いまどき、まったく参考にならないHTMLでありスタイルシートです【はっきり言うと決してまねをしてはならないものです。