CSSやjQueryでwebページにつけるアニメーションを自分のメモとしてまとめました。
＊いろいろなサイトを参考にさせていただきました。
ページをスクロールするとクラスが追加される。
ページをスクロールしていくとclassNameに”some class!”部分のクラスが追加される。
jQuery
$(function() {
$(window).scroll(function() {
$(".className").each(function() {
var scroll = $(window).scrollTop();
var blockPosition = $(this).offset().top;
var windowHeihgt = $(window).height();
if (scroll > blockPosition - windowHeihgt) {
$(this).addClass("some class!");
}
});
});
});
画面ロード中にアニメーションを表示
画面ロード中に黄色い円が出ます。htmlに.loaderを持つクラスが必要。
cssを変えることでいろいろ表示できる。
最後に紹介しているEpic spinnerのサイトなどでローディングアイコンをコピーしてCSSとHTMLに張り付ければかっこいいのを作れる。
css
.loader {
align-items: center;
background: #fff;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 999;
}
.loader::after {
animation: loader 0.5s linear infinite;
border: 1px solid orange;
border-radius: 50%;
border-right: 5px solid rgba(orange, 0.2);
border-top: 5px solid rgba(orange, 0.2);
content: "";
height: 70px;
width: 70px;
}
@keyframes loader {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
jQuery
$(window).on('load',function(){
$(".loader").fadeOut();
// これだけで
});
ふわふわと揺れる
htmlにfuwafuwaクラスをつけると適用される。backgroundのurlはお好みで
css
//CSS
.fuwafuwa {
animation: fuwa 4s infinite ease-in-out .9s alternate;
background: url(image) no-repeat center center / 60px auto;
display: inline-block;
transition: 1.5s ease-in-out;
}
@keyframes fuwa {
0% {
transform:translate(0, 0) rotate(-7deg);
}
50% {
transform:translate(0, -7px) rotate(0deg);
}
100% {
transform:translate(0, 0) rotate(7deg);
}
}
くるくる回って出現
htmlにkurukuruクラスをつけると適用される。
css
.kurukuru {
background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
width: 50px;
height: 50px;
opacity: 0;
padding-bottom: 40px;
}
.kurukuru.is-animated {
animation: kurukuru 1.4s ease-out;
opacity: 1;
}
@keyframes kurukuru {
0%{
transform: rotateY(0) translateY(40px);
opacity: 0;
}
100%{
transform: rotateY(360deg) translateY(0);
opacity: 1;
}
}
最後に
いろいろ追加していきたいと思います。
便利なサイト
Epic spinner
https://epic-spinners.epicmax.co/#/
↧