not good but great

プログラミング、アート、映画・本の感想について書きます。

Coineyさんの採用ページがかっこよかったので、エフェクトを真似してみた

デモ


電子決済サービスを行っているCoineyさんの採用ページがかっこよかったです。特に社員紹介のところの、マウスホバーエフェクトが目に留まりました。早速参考にして実装することにしました。


・参考
採用情報 | Coiney

水色のメニューが現れる

div{
   display:none;
}

div:hover{
   display:inline;
}

上のようにしたかったのですが、なぜか効かず。結局opacityで透明度を0から1にすることにしました。

水色の透明度は一定にしたかったので、rgbaで色と透明度を設定しました。

background:rgba(128,247,253,0.6);

16進数からRGBに変換する方法がわからなかったので、下記のページを参考にしました。がんばればSCSSで関数を書けたかもしれませんが、めんどくさかったです。

・16進数からRGBに変換する
16進数形式をRGB,RGBAに変換するだけ - jsdo.it - Share JavaScript, HTML5 and CSS

ホバーエフェクト後、アニメーション

img{
    width:$size;
    height:$size;
    @include css3(transform,scale(1.5));
    @include css3(transition,0.2s ease-out);
}

#menu:hover > p{
    opacity:0;
    @include css3(animation,anime 0.3s ease 0.2s);
    @include css3(animation-fill-mode,forwards);/*アニメーション終了時の状態を維持*/
}

ホバーした後、水色のメニューが現れて、それから文字が現れるようにしました。ホバーして0.2s後にアニメーションがスタートします。

今考えると、すべてアニメーションにして、半分時間が経ったら文字を出すみたいにしたほうが良かったかもしれません・・・・。あまり賢くない方法だと思います。