ドーモ！ぬま畑です！
今日も引き続き、Webの勉強をしたのでそのメモ(サンプル)を記載します。
前回に同じく『動くWebデザインアイディア帳』から抜粋しています、概要としては目次の「まとめ」にある概要を参照くださいませ。
さて。
昨日に引き続きjQueryとCSSの組み合わせで作るアニメーションです。
下記にある箱をクリックすると・・・
クリックしたら隠れているエリアが表示、そしてボタンが消える
クリックしたら隠れているエリアが表示、そしてボタンが消える
そのままですが、クリック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 rotateXHoverTrigger”>リンクにマウスが乗るとrotateXクラスが付与し、マウスが外れるとrotateXクラスが外れてfadeUpクラスがつく</div>
</div>
CSS
@charset “utf-8”;
.hide_area{
background:#eee;
padding:100px 20px;
}
.btn{
background:#333;
cursor: pointer;
padding: 10px 30px;
color: #fff;
text-align: center;
}
.hide_area{
display: none;
}
.hide_area.fadeUp {
display:block;
}
.btn.disp_none{
display: none;
}
.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);
}
}
Javascript
$(‘.btn’).click(function(){
$(“.hide_area”).addClass(‘fadeUp’);
$(this).addClass(‘disp_none’);})
あとがき
いかがでしたでしょうか？
jQueryとCSSを組み合わせてで結構良いものが出来ますね、ポートフォリオの制作として作品の中に付加しておくといいかもしれません。
まぁポートフォリオなのでデザインとしてこういう動き(アニメーション)をいれるのは完全に自己満の類いなので入れたから点数上がるわけではないのですが、見た目がいいし面白いのでポートフォリオ制作の時間を許す限り、こういうものをいれるのもありかと思います。
さて、今日でjQueryとCSSを組み合わせて動かすは最終回で次回は様々なローディング画面です。
次回：動くWebデザインアイディア帳『ローディングの動き』から抜粋：数字カウントアップ
まとめ
概要(第00回)：『動くWebデザインアイディア帳』のCSSアニメーションの基本から抜粋：WordPressに組み込んでみた
第01回：『jQueryとCSSを組み合わせて動かす』から抜粋：読み込みとスクロール
第02回：『jQueryとCSSを組み合わせて動かす』から抜粋：クリックアクション(クリックで動かす)
第03回：『jQueryとCSSを組み合わせて動かす』から抜粋：マウスオーバーのアニメーション
それでは、最後までお読み頂きありがとうございましたﾉｼ
[template id=”2699″]