pocoloco
pocolocoはダイナミックなアニメーション背景を生成するジェネレーターです。
メッシュ、グラデーション、ラインの3タイプが用意されており、それぞれ実装するためのコードが発行されます。
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> .background--custom { background-color: #FFFFFF; width: 100vw; height: 100vh; position: absolute; overflow: hidden; z-index: -2; top: 0; left: 0; } canvas#canvas { z-index: -1; position: absolute; width: 100%; height: 60%; transform: rotate(-12deg) scale(2) translateY(-56%); --gradient-color-1: #0e1d37; --gradient-color-2: #bfbd7f; --gradient-color-3: #00c347; --gradient-color-4: #b024a1; --gradient-speed: 0.000006; } </style> </head> <body> <div class="background--custom"> <canvas id="canvas" /> </div> <script src="https://cdn.jsdelivr.net/gh/greentfrapp/pocoloco@minigl/minigl.js"></script> <script> var gradient = new Gradient(); gradient.initGradient("#canvas"); </script> </body></html> |
ご覧のようにCDNが含まれるので、場合によっては利用シーンは限られそうです。
基本的には自動生成ですが、微調整等も可能です。サイドプロジェクト何かに使いたいですね。
