【 jQuery 】animateメソッドで要素を上下に動かす

はじめに

ポートフォリオサイトを少しでも見栄えのあるものにするためにjQueryのanimateメソッドを使ってみました。
挙動としてはサイトを開いてからループで要素を動かすというものです。

実装イメージ↓

目次

1.htmlの記述
2.cssの記述
3.jQueryの記述

1. htmlの記述

index.html

<div class="arrow-1", id="arrow_1"></div>
<div class="arrow-2", id="arrow_2"></div>
<div class="arrow-3", id="arrow_3"></div>
<div class="arrow-4", id="arrow_4"></div>
<div class="arrow-5", id="arrow_5"></div>

空のdivタグにclassとidを付与します。
「jsで操作するしますよ」という意図を込めてidは付与しています。
cssだけでも大丈夫です。

2. cssの記述

style.css

.arrow-1 {
  position: absolute;
  right:50vw;
  bottom: 120px;
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-45deg);  
 }
 .arrow-2 {
  position: absolute;
  right:50vw;
  bottom: 100px;
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-45deg); 
 }
 .arrow-3 {
  position: absolute;
  right: 50vw;
  bottom: 80px;
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-45deg); 
 }
 .arrow-4 {
  position: absolute;
  right: 50vw;
  bottom: 60px;
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-45deg); 
 }
 .arrow-5 {
  position: absolute;
  right: 50vw;
  bottom: 40px;
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-45deg); 
 }

position:absolute;で5つの矢印の位置を調整しています。ここはお好みです。

border-colorプロパティは上下左右のborderの色を指定出来ます。
border-color: 上　右　下　左が指定する順番です。
transparentは透明色です。つまり、この場合は上と右が白色で下と左が透明になります。

transform: rotate(-45deg)で角度を45度回転させます。
こうることで擬似的に下矢印を作れます。

3. jQueryの記述

index.js

$(function() {
  // 矢印を動かす
  setInterval(function() {

    $("#arrow_1").animate({
      bottom: "-=55px"}, 1000);
    $("#arrow_1").animate({
      bottom: "+=55px"}, 1000);

    $("#arrow_2").animate({
      bottom: "-=45px"}, 1000);
    $("#arrow_2").animate({
      bottom: "+=45px"}, 1000);

    $("#arrow_3").animate({
      bottom: "-=35px"}, 1000);
    $("#arrow_3").animate({
      bottom: "+=35px"}, 1000);

    $("#arrow_4").animate({
      bottom: "-=25px"}, 1000);
    $("#arrow_4").animate({
      bottom: "+=25px"}, 1000);

    $("#arrow_5").animate({
      bottom: "-=15px"}, 1000);
    $("#arrow_5").animate({
      bottom: "+=15px"}, 1000);
  
  },1000);
});

今回のように同じ処理を一定時間または、ループさせたいときはsetInterval関数を用います。
詳しい説明はこの記事が参考になります

setInterval関数の中身について最初の矢印の#arrow_1を例に見ていきます。
まず$("#arrow_1")で要素をとってきます。

最初は矢印を現在の位置から下に55pxぶん１秒かけて移動させます。
$("#arrow_1").animate({bottom: "-=55px"}, 1000);
animateメソッドは.animate(cssプロパティ, duration, easing, 関数)を引数にとります
今回はcssプロパティとdurationを使いました。
ちなみにdurationはミリ秒で指定するようになっており、アニメーションが完了するまでの時間を設定できます。

次は矢印をもとの位置に1秒かけて戻します（55pxぶん上に移動させる）
$("#arrow_1").animate({bottom: "+=55px"}, 1000);

あとは同じ処理を5つ分記述していきます。
pxは少しずつ値が異なるので注意してください。

おわりに

実装は以上です！最後まで読んでいただきありがとうございました！
お疲れさまでした。。。