2023年8月28日

工藤

実際のサンプルでアニメーション解説 [ホームセキュリティ編]【CSS/JS】

マークアップ

facebook
twitter

WEBサイト作成時にこのアニメーションがよくわからない…ということがあると思います。
今回は弊社で作成した、ホームセキュリティサイトのサンプルを使用しながら解説していきます。
初心者向けの記事です。

参考にするサンプルサイトはこちらから

サンプルサイト

1 inview.jsを読み込ませる
2 各要素をフェードインして表示させる
3 マウスホバーでボタンのグラデーションを動かす
4 アコーディオン

inview.jsを読み込ませる

今回は場所によっては『inview.js』というライブラリを読み込ませて、使用しています。
これを使うとスクロールをして表示領域に入った時にイベントを発生させることができます。

<script
	src="//code.jquery.com/jquery-3.6.4.min.js"
	integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
	crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery.inview.min.js"></script>

<script

src="//code.jquery.com/jquery-3.6.4.min.js"

integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="

crossorigin="anonymous"></script>

一緒にjqueryの読み込みもさせてください。
CDNも配布されていますが、3x系のjqueryで動作しないので、使用しているものによってはDLして使用するのが無難です。

あとは読み込ませたすぐ下にこのように記述しておきます。
記述の内容としては、まず『inview』というclassをトリガーにします。
このトリガーが視界に入ったら『is-show』というclassを付与します。これが付与されることでアニメーションイベントを発生させることができます。

$(function () {
  $(".inview").on("inview", function (event, isInView) {
    if (isInView) {
      $(this).stop().addClass("is-show");
    }
  });
});

$(function () {

$(".inview").on("inview", function (event, isInView) {

if (isInView) {

$(this).stop().addClass("is-show");

}

});

おそらく表示するタイミングを調整したいことも多いと思うので、領域内に表示したらクラスを付与する系のjsなどであればinview.jsでなくてもご都合のよいものに差し替えてOKです。

では一つひとつ解説していきましょう。

各要素をフェードインして表示させる

このように各要素をフェードインして表示させる方法のご紹介です。

HTML

<ul class="voiceList">
  <li class="inview fadeInUp">
    <picture>
      <source srcset="images/voice01_sp.png" media="(max-width:480px)" />
      <img src="images/voice01.png" alt="自宅のセキュリティを高めて、安心できる環境に" loading="lazy"/> </picture>
    <h3>自宅のセキュリティを<br>
      高めて、安心できる環境に</h3>
    <p class="lead">近所で不審者情報があり、子どものことも心配なので導入を決意。設置もサポートの方がいつでも相談に乗ってくれたのでカンタンにできました。</p>
  </li>
  <li class="inview fadeInUp td1">
    <picture>
      <source srcset="images/voice02_sp.png" media="(max-width:480px)" />
      <img src="images/voice02.png" alt="けがをしてしまった親の見守りのために導入" loading="lazy"/> </picture>
    <h3>けがをしてしまった親の<br>
      見守りのために導入</h3>
    <p class="lead">親のけがをきっかけに、見守りのために導入しました。その後けがは回復しましたが手頃なお値段で安心できるのでそのまま継続して使用しています。</p>
  </li>
  <li class="inview fadeInUp td1_5">
    <picture>
      <source srcset="images/voice03_sp.png" media="(max-width:480px)" />
      <img src="images/voice03.png" alt="小規模な店舗の防犯のために導入" loading="lazy"/> </picture>
    <h3>小規模な店舗の<br>
      防犯のために導入</h3>
    <p class="lead">つい最近はじめた小さなお店の防犯対策をさがしていました。できれば初期費用を抑えたいけれど機能には妥協したくない。そんな私にぴったりでした。</p>
  </li>
</ul>

<h3>自宅のセキュリティを<br>

高めて、安心できる環境に</h3>

<p class="lead">近所で不審者情報があり、子どものことも心配なので導入を決意。設置もサポートの方がいつでも相談に乗ってくれたのでカンタンにできました。</p>

</li>

<h3>けがをしてしまった親の<br>

見守りのために導入</h3>

<p class="lead">親のけがをきっかけに、見守りのために導入しました。その後けがは回復しましたが手頃なお値段で安心できるのでそのまま継続して使用しています。</p>

</li>

<h3>小規模な店舗の<br>

防犯のために導入</h3>

<p class="lead">つい最近はじめた小さなお店の防犯対策をさがしていました。できれば初期費用を抑えたいけれど機能には妥協したくない。そんな私にぴったりでした。</p>

</li>

</ul>

CSS

.fadeInUp {
  opacity: 0;
  transition: all .6s;
  animation-duration: 0.1s;
  transform: translate(0, 10%);
}
.fadeInUp.is-show {
  opacity: 1;
  transform: translate(0, 0);
}
.td1 {
  transition-duration: 1s;
}
.td1_5 {
  transition-duration: 1.5s;
}

.fadeInUp {

opacity: 0;

transition: all .6s;

animation-duration: 0.1s;

transform: translate(0, 10%);

}

.fadeInUp.is-show {

opacity: 1;

transform: translate(0, 0);

}

.td1 {

transition-duration: 1s;

}

.td1_5 {

transition-duration: 1.5s;

}

根本的な要素の装飾は今回は省略して、アニメーションについてのみ解説します。
まずはli一つひとつに対して.inview をつけましょう。
上記で説明した通り、inviewのトリガーになります。

そして今回登場したした.fadeInUp。
ここでふわっと下から上に表示させるアニメーションの設定を行っています。
.is-show が付与されたらキーフレームで設定したアニメーションさせる、という感じになっています。
以降でも使用するので、共通で使えるようにしておくと便利です。

リストの2個目以降に付与されているtd1 とtd1_5。
こちらはアニメーションの開始のタイミングを最初のものから少しずらしています。
これで一気に表示されることなく、次々と要素が表示されるアニメーションが実現できます。

これで『各要素をフェードインして表示させる』の完成です。

マウスホバーでボタンのグラデーションを動かす

マウスホバーしたときに、背景のグラデーションを動かす方法です。

HTML

<ul class="btnArea inview fadeInUp">
  <li><a class="application modalbtn" target="_blank" rel="noopener">お申込みはこちら</a></li>
  <li><a class="contact modalbtn" target="_blank" rel="noopener">お問い合わせはこちら</a></li>
</ul>

<li><a class="application modalbtn" target="_blank" rel="noopener">お申込みはこちら</a></li>

<li><a class="contact modalbtn" target="_blank" rel="noopener">お問い合わせはこちら</a></li>

</ul>

CSS

#mainVisual .btnArea li a.application{
  background: linear-gradient(270deg, #ff3756 0%, #ff811b 25%, #ff811b 51%, #ff3756 100%);
  background-position: 1% 50%;
  background-size: 200% auto;
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 8%);
}
#mainVisual .btnArea li a.contact{
  background: linear-gradient(270deg, #2b37d0 0%, #1795a8 25%, #1795a8 51%, #2b37d0 100%);
  background-position: 1% 50%;
  background-size: 200% auto;
  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 8%);
}
#mainVisual .btnArea a::after{
  content: '';
  width: 15px;
  height: 15px;
  background: url("images/arrow_w.svg") no-repeat center center / 15px auto;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  transition: all 0.4s ease;
}
#mainVisual .btnArea li a:hover{
  background-position: 99% 50%;
  transform: scale(0.97);
}
#mainVisual .btnArea a:hover::after{
  right: 15px;
}

#mainVisual .btnArea li a.application{

background: linear-gradient(270deg, #ff3756 0%, #ff811b 25%, #ff811b 51%, #ff3756 100%);

background-position: 1% 50%;

background-size: 200% auto;

box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 8%);

}

#mainVisual .btnArea li a.contact{

background: linear-gradient(270deg, #2b37d0 0%, #1795a8 25%, #1795a8 51%, #2b37d0 100%);

background-position: 1% 50%;

background-size: 200% auto;

box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 8%);

}

#mainVisual .btnArea a::after{

content: '';

width: 15px;

height: 15px;

background: url("images/arrow_w.svg") no-repeat center center / 15px auto;

position: absolute;

right: 20px;

top: 0;

bottom: 0;

margin: auto 0;

transition: all 0.4s ease;

}

#mainVisual .btnArea li a:hover{

background-position: 99% 50%;

transform: scale(0.97);

}

#mainVisual .btnArea a:hover::after{

right: 15px;

}

ここではinviewはボタン全体を表示するのに使用しているだけで、ホバー時のアニメーションには使用していません。

アニメーションの仕組みですが、背景のグラデーションのbackground-sizeを最初大きめに取っておいて、background-positionをずらして再現しています。
図解すると以下のような感じです。

矢印のアニメーションやscaleなどはお好みで調整してください。
また、以前のブログでも解説をしているのでそちらもチェックしてみてください。

これで『マウスホバーでボタンのグラデーションを動かす』の完成です。

アコーディオン

次にアコーディオンの要素です。
こちらはJSを使用します。

HTML

<ul class="voiceList">
  <li class="inview fadeInUp">
    <h3 class="q-open"><span>初期費用は無料ですか？</span></h3>
    <p class="ans">はい、初期費用は無料です。<br>
      初期費用以外には月額2,890円(税抜)と、任意でオプションの追加で月額が変わります。<br>
      オプションなどの詳細については<a  target="_blank" class="modalbtn" rel="noopener">こちら</a>をご覧ください。</p>
  </li>
  <li class="inview fadeInUp td1">
    <h3 class="q-open"><span>設置のサポートはありますか？</span></h3>
    <p class="ans">有料オプションにて対応可能です。<br>
      プランについては10,000円（税抜）～ご用意しております。詳細については<a class="modalbtn" target="_blank" rel="noopener">こちら</a>をご覧ください。</p>
  </li>
  <li class="inview fadeInUp td1">
    <h3 class="q-open"><span>決済方法について教えてください</span></h3>
    <p class="ans">決済方法については銀行振込決済、クレジットカード決済、PayPal決済を使用することができます。</p>
  </li>
</ul>

<h3 class="q-open"><span>初期費用は無料ですか？</span></h3>

<p class="ans">はい、初期費用は無料です。<br>

初期費用以外には月額2,890円(税抜)と、任意でオプションの追加で月額が変わります。<br>

オプションなどの詳細については<a target="_blank" class="modalbtn" rel="noopener">こちら</a>をご覧ください。</p>

</li>

<h3 class="q-open"><span>設置のサポートはありますか？</span></h3>

<p class="ans">有料オプションにて対応可能です。<br>

プランについては10,000円（税抜）～ご用意しております。詳細については<a class="modalbtn" target="_blank" rel="noopener">こちら</a>をご覧ください。</p>

</li>

<h3 class="q-open"><span>決済方法について教えてください</span></h3>

<p class="ans">決済方法については銀行振込決済、クレジットカード決済、PayPal決済を使用することができます。</p>

</li>

</ul>

CSS

#qa .voiceList li {
  background: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(2, 16, 48, 0.05);
  border-radius: 8px;
  margin-bottom: 20px;
  position: relative;
}
#qa .voiceList li::after {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 100px;
  background-color: #eff6fa;
  background-image: url("images/plus.svg");
  background-size: 15px auto;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  top: 30px;
  right: 30px;
  transition: all 0.3s ease;
}
#qa .voiceList li.active::after {
 background-image: url("images/minus.svg");
}
#qa .voiceList li h3 {
  padding: 25px 30px 25px 30px;
  color: #192f60;
  font-size: 1.25rem;
  font-weight: 800;
  transition: all 0.3s ease;
}
#qa .voiceList li h3:hover {
  cursor: pointer;
  opacity: 0.7;
}
#qa .voiceList li h3 span{
  display: inline-block;
  background: url("images/icon_q.png") no-repeat left top;
}
#qa .voiceList li .ans{
  padding: 0 30px 30px 30px;
  line-height: 2.2;
  display: none;
}

#qa .voiceList li {

background: #ffffff;

box-shadow: 0px 0px 20px 0px rgba(2, 16, 48, 0.05);

border-radius: 8px;

margin-bottom: 20px;

position: relative;

}

#qa .voiceList li::after {

content: '';

width: 28px;

height: 28px;

border-radius: 100px;

background-color: #eff6fa;

background-image: url("images/plus.svg");

background-size: 15px auto;

background-repeat: no-repeat;

background-position: center center;

position: absolute;

top: 30px;

right: 30px;

transition: all 0.3s ease;

}

#qa .voiceList li.active::after {

background-image: url("images/minus.svg");

}

#qa .voiceList li h3 {

padding: 25px 30px 25px 30px;

color: #192f60;

font-size: 1.25rem;

font-weight: 800;

transition: all 0.3s ease;

}

#qa .voiceList li h3:hover {

cursor: pointer;

opacity: 0.7;

}

#qa .voiceList li h3 span{

display: inline-block;

background: url("images/icon_q.png") no-repeat left top;

}

#qa .voiceList li .ans{

padding: 0 30px 30px 30px;

line-height: 2.2;

display: none;

}

<script>
	$(function(){
		$('.q-open').click(function(){
			$(this).parent('li').toggleClass('active');
			$(this).next('.ans').slideToggle();
		});
	});
</script>

$(function(){

$('.q-open').click(function(){

$(this).parent('li').toggleClass('active');

$(this).next('.ans').slideToggle();

});

</script>

JSで.q-open というclassが付与されれいる要素をクリックすると、そのすぐ隣にある.ans が開くようになっています。

また、.q-openの親要素のliに対して.active が付くようにしています。
これで、CSSの指定でクリックされたら右側にあるプラスのアイコンがマイナス（閉じるボタン）に変化します。そのほか必要に応じてactive 時の装飾もできます。

これで『アコーディオン』の完成です。

—
ぜひ参考にしていろいろ試してみてください！

サンプルサイト

 弊社のLP制作について

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

実際のサンプルでアニメーション解説 [ホームセキュリティ編]【CSS/JS】

inview.jsを読み込ませる

各要素をフェードインして表示させる

マウスホバーでボタンのグラデーションを動かす

アコーディオン

関連記事

【phpdotenv】PHPで環境変数を取り扱うお話

【CAPTCHA系】reCAPTCHAの代替サービスを紹介するお話

Webアクセシビリティの基本を学ぼう！