
Particle Js kütüphanesini kullanarak hareketli arka plan yapabilirsiniz. Gerekli kaynak kodlar ve canlı demo aşağıda paylaşılmıştır.
Canlı Demo
Aşağıda verilen kodları txt defterine .html olarak kaydettiğinizde çalışacaktır.
KAYNAK KODLAR
<html> <head> <style> body { margin: 0; } #particles-js { position: absolute; height: 100%; width: 100%; } .text { position: absolute; display: flex; justify-content: center; align-items: center; height: 200px; width: 300px; top: calc(50% - 100px); left: calc(50% - 150px); } .img { display: inline-block; height: 100px; z-index: 100; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script> <div class="text"> </div> <div id="particles-js"> </div> <script type="text/javascript"> /* ---- particles.js config ---- */ particlesJS("particles-js", { particles: { number: { value: 80, density: { enable: true, value_area: 800 } }, color: { value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"] }, shape: { type: ["circle"], stroke: { width: 0, color: "#fff" }, polygon: { nb_sides: 5 }, image: { src: "https://cdn.freebiesupply.com/logos/large/2x/slack-logo-icon.png", width: 100, height: 100 } }, opacity: { value: 1, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } }, size: { value: 8, random: true, anim: { enable: false, speed: 10, size_min: 10, sync: false } }, line_linked: { enable: true, distance: 150, color: "#808080", opacity: 0.4, width: 1 }, move: { enable: true, speed: 5, direction: "none", random: false, straight: false, out_mode: "out", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } } }, interactivity: { detect_on: "canvas", events: { onhover: { enable: true, mode: "grab" }, onclick: { enable: true, mode: "push" }, resize: true }, modes: { grab: { distance: 140, line_linked: { opacity: 1 } }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } } }, retina_detect: true }); </script> </body> </html>