JavaScript

【コピペOK】JavaScriptで背景にオシャレなアニメーションを実装する方法

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

ウェブサイトをもうちょっとオシャレにしたいけどどうしたらいいのかな

JavaScriptを使ってアニメーションを実装してみたいなあ

本日は上記のような疑問、要望ににお答えする記事となっています。

記事の信頼性

プロフィール

本記事は現在フロントエンドエンジニアとしてウェブサイトを作成しているしのが執筆しております。

コピペでもすぐに使えるようになっていますので、是非ご覧ください。

実装イメージ

では早速ですが実装イメージです。以下のCopePenをご利用ください。

See the Pen by shino (@rytym0720) on CodePen.

解説

では実装について見ていきましょう。

HTML

  <div id="particles-js"></div>

上記のdivで囲まれた範囲内に幾何学模様の背景が適用されるようになります。

<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

<script src="main.js"></script>

上記のCDNコードをbodyの閉じタグの上に記載しましょう。

1つ目のコードでparticle.jsのコードを読み込み、2つ目のコードはローカルのJSファイルを読み込んでいます。

CSS

*{
  margin:0 ;
}

html{
  height: 100%;
}

#wrapper{
  position: relative;
  z-index: 1;
  width:100%;
  height: 100%;
}

#particles-js{ 
  position:fixed;
  z-index:-1;
  width: 100%;
  height: 100%;
  background-color:#000;
}

以下の記述では、では、#wrapperに対して、position:fiexdとし、z-index:-1とすることで、メインの要素の背景にアニメーションが位置するようにしています。

#particles-js{ 
  position:fixed;
  z-index:-1;
  width: 100%;
  height: 100%;
  background-color:#000;
}

position:fixedとすることでアニメーションを固定することも出来ます。

JavaSript

particlesJS("particles-js",{
  "particles":{
    "number":{
      "value":70,
      "density":{
        "enable":true,
        "value_area":800
      }
    },
    "color":{
      "value":"#ddd"
    },
    "shape":{
      "type":"polygon",
      "stroke":{
        "width":0,
      },
  "polygon":{
    "nb_sides":6
  },
  "image":{
    "width":190,
    "height":100
  }
  },
    "opacity":{
    "value":0.664994832269074,
    "random":false,
    "anim":{
      "enable":true,
      "speed":2.2722661797524872,
      "opacity_min":0.08115236356258881,
      "sync":false
    }
    },
    "size":{
      "value":3,
      "random":true,
      "anim":{
        "enable":false,
        "speed":40,
        "size_min":0.1,
        "sync":false
      }
    },
    "line_linked":{
      "enable":true,
      "distance":150,
      "color":"#ffffff",
      "opacity":0.6,
      "width":1
    },
    "move":{
      "enable":true,
      "speed":2,
      "direction":"none",
      "random":false,
      "straight":false,
      "out_mode":"out",
      "bounce":false,
      "attract":{
        "enable":false,
        "rotateX":600,
        "rotateY":961.4383117143238
      }
    }
  },
  "interactivity":{
    "detect_on":"canvas",
    "events":{
      "onhover":{
        "enable":false,
        "mode":"repulse"
      },
  "onclick":{
    "enable":false
  },
  "resize":true
    }
  },
  "retina_detect":true
});

jsはかなり複雑なので一つ一つの説明は割愛しますが、

    "move":{
      "enable":true,
      "speed":2,
      "direction":"none",
      "random":false,
      "straight":false,
      "out_mode":"out",
      "bounce":false,
      "attract":{
        "enable":false,
        "rotateX":600,
        "rotateY":961.4383117143238
      }

こちらの値をいろいろ変えてみると面白いですよ。

例えば、"bounce"の値をtrueに変えてみると、幾何学模様がページのサイドに当たった時に跳ね返るアニメーションとなったり、"out_mode"を"in"に変えると幾何学模様が外に行かずページ内だけで移動したりします。

この辺りも是非いろいろ試してみてください。

それではまた次の記事でお会いしましょう。

  • この記事を書いた人
  • 最新記事

しの

はじめまして、しのです。 WEBデザインやプログラミング、SEO、ブログ術に関する記事を主に書いています。 ブログの月間PVは約40000PV、月間収益は5桁です。 SEOで検索上位1位を約50件獲得(2024年6月時点)。

-JavaScript
-