jQueryとCSSを組み合わせて動かす
ドーモ！ぬま畑です！
昨日に引き続きWebの勉強、『動くWebデザインアイディア帳』から抜粋。
概要は前回の記事をご参照いただけると幸いでございます。
動くWebデザインアイディア帳からCSSアニメーションの基本を抜粋：WordPressに組み込んでみた
さて、今日はjQueryとCSSを組み合わせて動かすちょっとしたアニメーションですね。
ここを見た時点で『画面が読み込まれたらふわっと下から出てくる』と記載された濃いグレーの枠が出てきていると思います。
画面が読み込まれたら現れる
画面が読み込まれたらふわっと下から出てくる
上記は前回と同じく画面の更新をしていただくと再度ふわっとでてくるのでお試しください。
これがjQueryとCSSの組み合わせのちょっとしたアニメーション（動き）ですね！
これだけだと何ってことはないのですが、アイディア次第で何かできそうですね・・・
今の所考えられるのは、重要なことを言う時とかに使えそうですね。
やはりそのままテキストがあるだけだと読まれないですが、少しでも動きがあるとそこに目が行ってしまうのでそういう場面で使えそうです。
そして、それだけでは終わらず、この記事をそのままスクロールしていただくと同じような形で『スクロールしたらふわっと下から出てくる』という記載の濃いグレー枠が出てきます。
よろしければスクロールしてみてください。
スクロールすると出てくる
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
スクロールしたらふわっと下から出てくる
こんな形で上と同じように枠が出てきたと思います。
これだけだとなんてことはないのですが、何かと組み合わせることで大いに使えるものだと思うのでWEBプログラマーとかWEBデザインを目指している方は覚えておくと良いかも知れません。
実際のコード
HTML
<!–ヘッダーに記載–>
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
<div class=”wrapper”>
<p>↓画面が読み込まれたら現れる ↓</p>
<div class=”box fadeUpTrigger”>画面が読み込まれたらふわっと下から出てくる</div>
<p>↓スクロールすると出る↓<p>
<div class=”box fadeUpTrigger”>スクロールしたらふわっと下から出てくる</div>
</div>
CSS
.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);
}
}
.fadeUpTrigger{
opacity: 0;
}
Javascript
function fadeAnime(){
$(‘.fadeUpTrigger’).each(function(){
var elemPos = $(this).offset().top-50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos – windowHeight){
$(this).addClass(‘fadeUp’);
}
else{
$(this).removeClass(‘fadeUp’);
}
});
}
$(window).scroll(function (){
fadeAnime();
});
$(window).on(‘load’, function(){
fadeAnime();
});
あとがき
いかがでしたでしょうか？
これだけだとなんてことは無いのですが、アイデア次第で色々使えそうなので今回はWordPressで実装しましたけど、HTMLにそのまま移植することも勿論可能なので使って見るのもありですね。
それでは、最後までお読み頂きありがとうございましたﾉｼ
次回：動くWebデザインアイディア帳『jQueryとCSSを組み合わせて動かす』から抜粋：クリックアクション(クリックで動かす)
[template id=”2699″]
