第6回 インタラ会 資料

第6回のテーマ「ロールオーバー ※PC限定」

サンプルファイルはこちら↓↓
github.com

・PC限定とはいえロールオーバーのアニメーションは、気持ちいい悪いがとても目立つ部分
・この目立つ部分がかっこいいかどうかはサイト全体の印象を大きく決める
・逆にここがイケてないとサイト全体のデザインがかっこよくても一気にかっこ悪くなってしまうことも、、
・今回は主に、複数のボタン要素が隣接してるときの気持ちのいいアニメーションについて

sample1 気持ちのいいロールオーバーアニメーション

See the Pen intr6 sample1 by ikeryou (@ikeryou) on CodePen.

sample2 気持ち悪いロールオーバーアニメーション

See the Pen intr6 sample2 by ikeryou (@ikeryou) on CodePen.

・sample1と2の最大の違いはロールアウトした時の強制ロールアウトアニメーションをやめること

・ロールオーバー、アウトのアニメーションが終わった時の処理がコツ
→ オーバーのアニメーション終了時にマウスが離れてたらアウトのアニメーション開始
→ アウトのアニメーション終了時にマウスが乗ってたらオーバーのアニメーション開始

・ロールオーバー、アウト時は
→ ロールオーバー時になにもアニメーションされてなかったらオーバーのアニメーション開始
→ ロールアウト時になにもアニメーションされてなかったらアウトのアニメーション開始

↓↓sampleのロールオーバー管理クラスの一部を抜粋
ロールオーバー時やアニメーション終了時に色々とチェックしてる

// ロールオーバー
HoverMgr.prototype._eRollOver = function() {

  this.isOver = true;
  if(!this.isPlaying) {
    this._startRollOver();
  }

};

// ロールアウト
HoverMgr.prototype._eRollOut = function(e) {

  this.isOver = false;
  if(!this.isPlaying) {
    this._startRollOut();
  }

};

// ロールオーバーのアニメーション
HoverMgr.prototype._startRollOver = function() {

  this.isPlaying = true;
  TweenMax.to(this.tg, 0.6, {
    scaleX:1,
    ease:Expo.easeOut,
    onComplete:this._eCompleteRollOver.bind(this)
  });

};

// ロールアウトのアニメーション
HoverMgr.prototype._startRollOut = function() {

  this.isPlaying = true;
  TweenMax.to(this.tg, 0.5, {
    scaleX:0,
    ease:Expo.easeInOut,
    onComplete:this._eCompleteRollOut.bind(this)
  });

};

// ロールオーバーのアニメーション終わり
HoverMgr.prototype._eCompleteRollOver = function() {

  this.isPlaying = false;
  if(!this.isOver) {
    this._startRollOut();
  }

};

// ロールアウトのアニメーション終わり
HoverMgr.prototype._eCompleteRollOut = function() {

  this.isPlaying = false;
  if(this.isOver) {
    this._startRollOver();
  }

};

sample3 3Dを使ったアニメーション

See the Pen intr6 sample3 by ikeryou (@ikeryou) on CodePen.

sample4 テキストを使ったアニメーション

See the Pen intr6 sample4 by ikeryou (@ikeryou) on CodePen.

sample5 応用

See the Pen intr6 sample5 by ikeryou (@ikeryou) on CodePen.


インタラ会とは?

ikeryou.hatenablog.com