『jQueryとCSSを組み合わせて動かす』から抜粋：マウスオーバーのアニメーション
ドーモ！ぬま畑です！
今日も引き続き、Webの勉強をしたのでそのメモ(サンプル)を記載します。
同じく『動くWebデザインアイディア帳』から抜粋。
概要は第1回目の記事をご参照いただけると幸いでございます。m(_ _)m
動くWebデザインアイディア帳からCSSアニメーションの基本を抜粋：WordPressに組み込んでみた
さて。
昨日に引き続きjQueryとCSSの組み合わせで作るアニメーションです。
下記にある箱にマウスを乗せると・・・
※ただ、今回PCの方限定かもです。そもそもスマートフォンはマウスや、ましてマウスオーバーの概念というものがないのでどういう動きになるかはちょっとわかりません^^;
※追記
スマホでも動作確認できました、一瞬タップすると下からフワ長押しタップでくるくる回転し、指を離すと下からふわっと出てくる動き、結局の所マウスオーバーの動きもスマホで可能、面白いですね。
箱にマウスを乗せると下からふわっと(一瞬だけ)、箱にマウスを乗せておくと回転しだす。
箱にマウスを乗せると下からふわっと(一瞬だけ)、箱にマウスを乗せておくと回転しだす。
という感じでマウスを乗せるとくるくる回転してマウスを一瞬だけ乗せる(すぐに箱からマウスをどかす)ということすると下からふわっと出てくるという合わせ技。
これ自体はWebサイトを彩るものであり、どうにかできるものではないですけど、何回も言いますが結局はアイデア勝負なので、これを使用する場面が今後出てくる可能性を視野に入れて制作するとふとした瞬間に役立つかもしれませんね。
実際のコード
HTML
<!-header部に記載->
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
<div class=”wrapper”>
<div class=”box rotateXHoverTrigger”>リンクにマウスが乗るとrotateXクラスが付与し、マウスが外れるとrotateXクラスが外れてfadeUpクラスがつく</div>
</div>
CSS
@charset “utf-8”;
.wrapper{
overflow: hidden;
}
.flex{
display:flex;
flex-wrap: wrap;
}
.box{
width: 220px;
padding: 20px;
margin:0 20px 20px 0;
background: #666;
color: #fff;
box-sizing:border-box;
cursor: pointer;
}
.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.rotateX{
animation-name: rotateXAnime;
animation-duration:1s;
animation-fill-mode:forwards;
}
@keyframes rotateXAnime{
from{
transform: rotateX(0);
opacity: 0;
}
to{
transform: rotateX(-360deg);
opacity: 1;
}
}
Javascript
$(‘.rotateXHoverTrigger’).on(‘mouseenter touchstart’, function () {
$(this).addClass(‘rotateX’);
$(this).removeClass(‘fadeUp’);
})
$(‘.rotateXHoverTrigger’).on(‘mouseleave touchend’, function () {
$(this).removeClass(‘rotateX’);
$(this).addClass(‘fadeUp’);
})
あとがき
いかがでしたでしょうか？
動くWebデザインをWordPressへ移植するシリーズですけど、WordPressのカスタムCSSやカスタムJSが便利すぎて良い意味でヤバいですね。
『エンジニアはWordPressっていう楽をしちゃうわけだ』と少し思いました。
次回：動くWebデザインアイディア帳『jQueryとCSSを組み合わせて動かす』から抜粋：クリックで別の要素アニメーション
それでは、最後までお読み頂きありがとうございましたﾉｼ
[template id=”2699″]