株式会社Sunny.のWebサイトが公開されました。
僕はフロント実装を担当しております。
シンプルながらも、細かい演出の効いたWebサイトになっております。
ぜひPC、スマートフォンの両端末でご覧ください。
株式会社Sunny.のWebサイトが公開されました。
僕はフロント実装を担当しております。
シンプルながらも、細かい演出の効いたWebサイトになっております。
ぜひPC、スマートフォンの両端末でご覧ください。
ポカリガチダンスFES特設サイトが公開されました。
僕はTOPページのフロント実装を担当しております。
デザインやイラストから連想される、ポップさ、元気、ガチっぽさ。
このあたりの雰囲気がユーザーに伝わるようにサイトのモーションを実装しました。
また、スマートフォン版では操作性の最適化をしつつ、同様のモーションを実装しております。
ぜひPC、スマートフォンの両端末でご覧ください。
サンプルファイルはこちら↓↓
github.com
・PC限定とはいえロールオーバーのアニメーションは、気持ちいい悪いがとても目立つ部分
・この目立つ部分がかっこいいかどうかはサイト全体の印象を大きく決める
・逆にここがイケてないとサイト全体のデザインがかっこよくても一気にかっこ悪くなってしまうことも、、
・今回は主に、複数のボタン要素が隣接してるときの気持ちのいいアニメーションについて
See the Pen intr6 sample1 by ikeryou (@ikeryou) on CodePen.
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(); } };
See the Pen intr6 sample3 by ikeryou (@ikeryou) on CodePen.
See the Pen intr6 sample4 by ikeryou (@ikeryou) on CodePen.
See the Pen intr6 sample5 by ikeryou (@ikeryou) on CodePen.
最近、比率をキープしつつずっと可変していく実装をいくつかやって、
例えば、ブラウザ幅1900pxのときに文字サイズ32px、要素間のマージン100pxになるように、ブラウザ幅を基準に比率がずっとキープされるやつ。
文字サイズはvwが便利で使ってて、マージンとか幅サイズとかは計算めんどい%(親要素基準になるし、なんかFireFoxでうまくできんとか)でやってたんだけど、あるときvwってマージンとか幅にも使えるよな??って気づいて使ってみたら可変レイアウトの実装がだいぶ楽になった、、
(ちなみにvwは親要素関係なくブラウザ幅にあわせて設定できる単位)
vwの使い方は、例えば幅1900pxのpsdもらったならこんな感じ。
.hoge { // (100 / psdの幅) * (psd上のフォントの高さpx) // psdの幅が1900pxで、対象文字のフォントサイズが32pxなら // 100 / 1900 * 32 font-size:1.684210526vw; // 要素間のマージンが↑のpsdで46pxだったら // 100 / 1900 * 46 margin-top:2.421052632vw; // こういうプロパティでもOK // ↑のpsdで36pxだったら // 100 / 1900 * 36 border-radius:1.894736842vw; }
もっとはやく気づいてれば、、、
・こちらを参照
ikeryou.hatenablog.com
・サンプルファイルはこちら
github.com
・0~1のスクロール進捗率を計算して、それを使ってオブジェクトを動かしていく
・スクロールしたときの気持ち良さがキモ
// ステージサイズ var sw = window.innerWidth; var sh = window.innerHeight; // スクロール位置 var scroll = $(window).scrollTop(); // スクロール進捗率 0 ~ 1 // このスクロール進捗率を使ってオブジェクトを動かしていく var scrollP = scroll / ($(document).height() - sh);
See the Pen intr5 sample1 by ikeryou (@ikeryou) on CodePen.
See the Pen intr5 sample2 by ikeryou (@ikeryou) on CodePen.
See the Pen intr5 sample3 by ikeryou (@ikeryou) on CodePen.
See the Pen intr5 sample4 by ikeryou (@ikeryou) on CodePen.