-
ID:8r.px2 さんの質問

下記ページの社員さんの写真のように、マウスオーバーしたときに他の画像に切り替えつつ拡大⇒元のサイズ というエフェクトをかけたいのですが、どのようにすれば良いでしょうか。
www.dnp-digi.com/recruit/2014/work/staff/index.html
ソースを見たところ、staff_filter.jsで行っているのではないかと思うのですが、かなり作りこまれているようで、なかなか理解できそうにありません。。
jsやjQueryは引用程度しか使用経験がなく、どういった処理の流れで実装されているのか教えていただけましたら嬉しいです。

みんなの回答 1 件

ID:9azNyr さんの回答

1.マウスが画像に乗っているかを判定
2.対象の画像の上に来たらロールオーバーで画像を切り替える&classをつける
3.setTimeoutかsetIntervalで徐々に画像を拡大させる
4.指定した画像サイズになったら今度は縮小させる
5.元の大きさに戻ったら終了
6.マウスが画像から離れたら画像を元に戻す&classを削除
(classはz-indexで拡大した際に隣接する画像より上に出す必要があるため必要です)

1.2.6はただのロールオーバー
徐々に変化させる方法は他にフェードイン/アウトで使われるので拡大縮小から
見つからなければこちらで調べてみてください。
この2つを合体させれば目的のものができると思います。

ブラウザが多少限定されますが同じ効果を再現するだけなら
:hoverを使ってcss3のtransitionで拡大縮小しても同様のものが作れそうですね。

ID:PVCNeg
  1. マウスオーバー判定
  2. z-index切替で画像入替
  3. (1)拡大(2)縮小の2回のanimate関数
  4. マウスアウトでz-index戻す
最終更新日:2013-02-28 (4,338 views)

関連するトピックス

ページ上部に戻る