動くWebデザインアイディア帳『jQueryとCSSを組み合わせて動かす』から抜粋:クリックアクション(クリックで動かす)

動くWebデザインアイディア帳『jQueryとCSSを組み合わせて動かす』から抜粋:クリックアクション(クリックで動かす)

ドーモ!ぬま畑です!

今日も前回に引き続き、Webの勉強をしたのでそのメモ(サンプル)を記載します。

同じく『動くWebデザインアイディア帳』から抜粋。

概要は第1回目の記事をご参照いただけると幸いでございます。m(_ _)m

 

動くWebデザインアイディア帳からCSSアニメーションの基本を抜粋:WordPressに組み込んでみた

 

さてさてさーて。

昨日に引き続きjQueryとCSSの組み合わせで作るアニメーションでいきます。

下記になんの変哲もないグレーの枠で『クリック(もしくはタップ)したら~』という記述があるんですが、そこをクリックすると・・・

クリック(orタップ)で1回だけぶわっ!ぽんっ!

クリック・タップで1回だけぶわっ!ぽんっ!(ズームイン)

ってな感じで枠が一瞬縮小してぶわっと広がり元に戻ります。
(・・・これ結構気持ちいいですよね笑)

この項目は1回しか適用されてないようにあえてしてるのですが、次の項目はクリックもしくはタップしたら無限に『ぶわっぽんっ』ができるので永遠と気持ちいいです(笑)

クリック(orタップ)で無限にぶわ!ぽんっ!

クリック・タップで無限にぶわ!ぽんっ!(ズームイン)

上記をクリックorタップして『気持ちぃい~』ってなってくださいな(笑)

実際のコード

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 zoomInClickTrigger”>クリックで1回だけぶわっ!ぽんっ!(ズームイン)</div>

<div class=”box zoomInClickTriggerTimes”>クリックで無限にぶわ!ぽんっ!(ズームイン)</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;
}

.zoomIn{
animation-name: zoomInAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
from {
transform: scale(0.6);
}

to {
transform: scale(1);
}
}

Javascript

$(‘.zoomInClickTrigger’).on(‘click’, function() {$(this).addClass(‘zoomIn’);})

$(‘.zoomInClickTriggerTimes’).on(‘click’, function() {$(this).addClass(‘zoomIn’);
$(“.zoomIn”).on(‘animationend’, function(){$(this).removeClass(‘zoomIn’);
});
});

あとがき

はい、いかがでしたでしょうか?

ふわっぽんの回・・・じゃない、クリックアクション(クリックで動かす)の回でした。

どこで使うとかはアイデア次第なので特に言及はできないんですけど、無限にできるのは気持ちいいのでどっかに置いて、読者さんのための箸休めって言うのでもいいかもしれませんね^^;
※もっとあるだろ

次回:動くWebデザインアイディア帳『jQueryとCSSを組み合わせて動かす』から抜粋:マウスオーバーのアニメーション

それでは、最後までお読み頂きありがとうございましたノシ

[template id=”2699″]