Zenn
🌟

【CSS／JS】ポワンポワンさせたり、フワッとさせたり

2023/01/20に公開
CSS
HTML
PHP
tech

球体がポワンポワンする動きを作る

実際の動画

/* 丸い玉をポワンポワンさせる */
p.icon {
	position: relative;
}
p.icon:after {
	animation: zoomFadeOutBlue 1s infinite linear;
}
p.icon:before, p.icon:after {
	position: absolute;
	top: -55px;
	left: 50%;
	transform: translateX(-50%);
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-image: linear-gradient(90deg, #e86c6c, #e02f2f);
}
@keyframes zoomFadeOutBlue {
	0% {
		transform:translateX(-50%) scale(0);
		opacity:0 
	}
	50% {
		transform:translateX(-50%) scale(1.5);
		opacity:.5
    }
	100% {
		transform:translateX(-50%) scale(3);
		opacity:0
	}
}

 

スクロールで文字がフワッと表示させる

実際のスクロール動画
【準備】
headタグに以下の記述をする。
Google jQuery 3.x の場合

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 
ちなみに他の記述もあるそうです。

jQuery公式
jQuery 3.x
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

jQuery 2.x
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Google
jQuery 3.x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jQuery 2.x
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

 
あと、あらかじめ表示させたい文字にクラスanimationを指定しておく。
使うときは環境に合わせて他のIDやクラス名に変更してください。

【JS】

<script>
$('.animation').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('.animation').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow > targetPosition - windowHeight + 100){
   $(this).addClass("fadeInDown");
  }
 });
});
</script>

ちなみにJSはWordpressのフッターに埋め込みました。
１．Wordpress→外観→テーマファイルエディターを開く
２．編集するテーマを選択して、［選択］をクリック
３．フッター（footer.php）を選択して、上記コードをコピペ。
※親テーマのfooter.phpを直接修正せずに、
子テーマで編集できるようにしてから行いましょう。

【CSS】

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

以下のサイトを参考にさせていただきました。ありがとうございます。
https://theorthodoxworks.com/web-design/scrollanimation/

Discussion