ウェブ

コピペで簡単実装できる!粒子アニメーション生成方法【HTML・CSS・JS】

コピペで簡単実装できる!粒子アニメーション生成方法【HTML・CSS・JS】

WEBサイトのトップページで使える粒子アニメーションの作り方について解説します。ほぼコピペで実装可能で用意するのは画像.pngのみなのでコードに抵抗ある方でも問題なくできます。(スマホ版対応)

▪下記画像を粒子アニメーションで表現できます。

▪粒子アニメーション
Run Penをクリックして動作を確認できます。

※PNG画像の色認識はしていないのでJSでカラーを設定する必要があります。

コピペでOK!!
コピペでOK!!

See the Pen Untitled by pull-design (@design90806871) on CodePen.

PULLDESIGN
PULLDESIGN

See the Pen 粒子アニメーション by pull-design (@design90806871) on CodePen.

See the Pen 粒子アニメーション by pull-design (@design90806871) on CodePen.

画像ファイルを文字変換

まずは、粒子アニメーションをしたいPNG画像を用意します。この記事内ではCSSwidth: 600px;height: 100px;を指定しているので、幅600px×高さ100pxのPNG画像を用意します。

使用したPNG画像
今使用したPNG画像

画像の用意が終わったら、画像を文字列に変更しなければならないので、下記URLのサイトにいきます。

Web Toolbox

▪Web Toolbox 画像Base64 エンコード サイト
https://web-toolbox.dev/tools/base64-encode-image

画像Base64 エンコードエンコードする画像を入力画像ファイルを選択をクリック。

画像Base64 エンコード
画像Base64 エンコード

PNG画像を選択開くをクリック。

PNG画像を選択
PNG画像を選択

BASE64 エンコードをクリック。

BASE64 エンコード
BASE64 エンコード

Base64エンコードデータについて

・Base64データ(Data-URL宣言付き)
先頭にData-URL宣言(例:data:image/png;base64,)が付いたBase64エンコードデータ文字列。

・Base64データ
Base64エンコードデータのみの文字列。

Base64 エンコード結果に2つコードが発行されますが、Base64データ(Data-URL宣言付き)を選択コピーします。

Base64 エンコード結果
Base64 エンコード結果

このコードは後で使用するので、メモ帳などに貼り付けておきます。

HTMLコード

ここからは、HTMLCSSJSのコード追加編です。

HTMLコード
codepenのHTMLコード

CodepenではHTMLコード<head>タグを書かなくても動作しますが、ローカル環境などでは、jquerycssの指定が必要になるので下記コードをコピーペーストします。

↓HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <canvas id="scene"></canvas>
  </div>
</body>
</html>

jqueryのリンク方法について詳しく知りたい方は下記の記事で解説してるのでご確認ください。

slickアイキャッチ画像
Slick/全画面でふわっと切り替えスライドショー【jQuery】スライダープラグイン【slick】を使って全画面スライドショーを実装。「slickの実装方法」と「slickのカスタマイズ」について解説していきます。画像のスライドショーにはいろんな方法がありますが、jQueryベースの【slick】が安定していてカスタマイズもしやすいのでオススメです。コピーペーストで実装可能です。...

CSSコード

・粒子テキストをわかりやすくするため背景色をblack(黒)に設定。

・スマホ対応で600px以下になると幅width: 600px;からwidth: 300px;に高さheight: 100px;からheight: 60px;に変更。

↓CSSコード

body,html {
  background: black;
}
.container {
  text-align: center;
  margin-top: 100px;
}
canvas {
  width: 600px;
  height: 100px;
  cursor: pointer;
}
@media screen and (max-width: 600px) {
  canvas {
    width: 300px;
    height: 60px;
  }
  .container {
  margin-top: 120px;
  }
}

JSコード

window.addEventListener(‘click’, drawScene);でクリックしたら、再動作。
※再動作させたくない場合は‘click’,を削除。

png.src = “ここに画像のエンコードを入力”;の部分に画像のエンコードを貼り付けます。

↓JSコード

let canvas = document.getElementById("scene");
let ctx = canvas.getContext("2d");
let particles = [];

function drawScene() {
  particles = [];
  canvas.width = png.width*6;
  canvas.height = png.height*6;

  ctx.drawImage(png, 0, 0);

  const data = ctx.getImageData(0, 0, png.width, png.height);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.fillStyle = "white";
  
  for (let y = 0, y2 = data.height; y < y2; y++) {
    for (let x = 0, x2 = data.width; x < x2; x++) {
      if (data.data[(y * 20 * data.width) + (x * 20) + 3] > 128) {
        const particle = {
          x0: x,
          y0: y,
          x1: png.width / 2,
          y1: png.height / 2,
          speed: Math.random() * 4 + 2
        };
        gsap.to(particle, {
          duration: particle.speed,
          x1: particle.x0,
          y1: particle.y0,
          delay: y / 10,
          ease: Elastic.easeOut
        });
        particles.push(particle);
      }
    }
  }

  requestAnimationFrame(render);
}
const render = function() {
  requestAnimationFrame(render);

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0, j = particles.length; i < j; i++) {
    const particle = particles[i];
    ctx.fillRect(particle.x1 * 30, particle.y1 * 30, 10,10);
  }
};

const png = new Image();
png.onload = () => {
  drawScene();
  window.addEventListener('click', drawScene);
};
png.src = "ここに画像のエンコードを入力";

Base64データ(Data-URL宣言付き)のコード下記画像のように貼り付けます。

画像エンコード
画像エンコード

後は、ページ更新後かクリックで動作すれば実装完了です。

粒子の色変更

粒子の色はctx.fillStyle = “white”;ctx.fillStyle = “#ffff00”;に変更すれば黄色になりHTMLカラー対応です。

See the Pen Untitled by pull-design (@design90806871) on CodePen.

動作に変更を加えたい場合などはJavaScriptの知識が必要になってきます。

しっかりと学びたい方は本で学習することをオススメします。

↓下記本は知識ゼロからJavaScriptがわかる本です。

スラスラわかるJavaScript
スラスラわかるJavaScript

▪スラスラわかるJavaScript
初めてプログラミングを学ぶ人を対象にした“スラスラわかる”シリーズ。JavaScriptの基礎知識や作法、基本構文、基本テクニックなどを無理なく習得し、かつプログラムが自力で作れるようになるところまで。JavaScriptの基礎固めをしっかりしたい方だけでなく、ほかの入門書で挫折した方やプログラミングに苦手意識を持っている方にもおすすめの一冊です。

book
created by Rinker
¥2,530 (2022/10/04 16:20:13時点 楽天市場調べ-詳細)

↓下記本はコピペのみならず、しっかり理解しながら知識が身につくお勧めの本です。

▪動くWebデザインアイディア帳
Webサイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第1歩を踏み出すための「動きの逆引き事典」です。 近年のウェブサイトで使用されている基本的な動きの原理や仕組みをサンプルコードと共に紹介します。

↓下記本は実践編としてさらに踏み込んだ知識が身につくお勧めの本です。

動くWebデザインア帳イディア帳
動くWebデザインア帳イディア帳

▪動くWebデザイン アイディア帳 実践編
好評の「動くWebデザイン アイディア帳」の姉妹本で「サイトを印象付ける基本の動き」+「世界観を作る動き」を集めた現場で使える実践サンプル集!「サイトの印象を決定付ける動き」をこの1冊が丸ごとカバーしています。

book
created by Rinker
¥2,860 (2022/10/04 10:32:31時点 楽天市場調べ-詳細)

↓jQueryについてしっかり理解したい方は下記の本がお勧めです。(古い本になりますが、良本です。)

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る
Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る

▪Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る
jQueryはいま最もウェブデザイナー、ウェブサイト制作者に注目されている技術と言っても過言ではありません。ウェブサイトにアコーディオン・タブ・ツールチップなどを組み込もうと思ったら、まずjQueryを使うのがセオリー。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA