Efek bintang atas gambar untuk Elementor

Dapatkan Efek bintang ber terbangan atas gambar dalam page Elementor anda. Cuma add code ni atas sekali (HTML Element) dalam page anda.

Contoh real : IklanCyber.com

<!-- ================== STARS OVER IMAGE (for Elementor) ================== --></p> <style> /* Pastikan wrapper bertindak sebagai anchor overlay */ .star-on{ position:relative !important; display:inline-block !important; }</p> <p>/* Pastikan img block-level supaya overlay align tepat */ .star-on img{ display:block; width:100%; height:auto; }</p> <p>/* Canvas & dim overlay – disuntik oleh JS */ .ic-star-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:2; opacity:.5; pointer-events:none; } .ic-star-dim{ position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.45)); } </style> <p><script> (function(){ const CFG = { densityBase: 8000, minR: 1.2, maxR: 3.0, minSpeed: 0.02, maxSpeed: 0.08, twinkleMin: .35, twinkleMax: .95, twinkleRate: .004, pulseAmp: .18, pulseRateMin: .003, pulseRateMax: .009, opacity: .5, dprMax: 2 }; const rand=(a,b)=>a+Math.random()*(b-a);</p> <p> // DAPATKAN SASARAN: // - <img.star-on> // - .star-on (wrapper) yg mengandungi <img> / <picture><img> function findTargets(){ const nodes = new Set();</p> <p> document.querySelectorAll('img.star-on').forEach(img=>nodes.add(img));</p> <p> document.querySelectorAll('.star-on').forEach(w=>{ // Jika ini IMG, sudah ditambah di atas if (w.tagName && w.tagName.toLowerCase()==='img') return; // Cari img di dalam wrapper (Elementor biasanya figure > img atau picture > img) const inner = w.querySelector('img'); if (inner) nodes.add(inner); }); return Array.from(nodes); }</p> <p> function prepare(){ findTargets().forEach(img=>{ const wrap = img.closest('.star-on') || img.parentElement; if (!wrap) return;</p> <p> // Elak duplicate (canvas sudah ada) if (wrap.querySelector(':scope > .ic-star-canvas')) return;</p> <p> // Pastikan wrap adalah anchor absolute const cs = getComputedStyle(wrap); if (cs.position==='static') wrap.style.position='relative';</p> <p> // Inject canvas + dim sebagai children direct di dalam wrap const canvas = document.createElement('canvas'); canvas.className='ic-star-canvas'; canvas.setAttribute('aria-hidden','true'); wrap.appendChild(canvas);</p> <p> const dim = document.createElement('div'); dim.className='ic-star-dim'; wrap.appendChild(dim);</p> <p> makeEngine(wrap, canvas, img); }); }</p> <p> function makeEngine(wrap, canvas, img){ const ctx = canvas.getContext('2d',{alpha:true}); let w=0,h=0,dpr=1,stars=[],rafId=null;</p> <p> function syncSize(){ const r = wrap.getBoundingClientRect(); w=r.width; h=r.height; dpr=Math.min(window.devicePixelRatio||1, CFG.dprMax); canvas.width=Math.max(1, w*dpr|0); canvas.height=Math.max(1, h*dpr|0); canvas.style.opacity=CFG.opacity; ctx.setTransform(dpr,0,0,dpr,0,0); } function init(){ const n=Math.max(6, Math.floor((w*h)/CFG.densityBase));</p> <p> const colors=[ 'rgba(255,255,255,0.9)', // putih 'rgba(255,255,200,0.85)', // kuning lembut 'rgba(255,230,120,0.9)', // kuning terang 'rgba(180,200,255,0.9)' // biru lembut ];</p> <p> stars=new Array(n).fill(0).map(()=>({ x:Math.random()*w, y:Math.random()*h, rBase:rand(CFG.minR,CFG.maxR), r:0, vx:rand(CFG.minSpeed,CFG.maxSpeed)*(Math.random()<.5?-1:1), vy:rand(CFG.minSpeed,CFG.maxSpeed)*(Math.random()<.5?-1:1), alpha:rand(CFG.twinkleMin,CFG.twinkleMax), twPhase:Math.random()*Math.PI*2, twSpeed:rand(.5,1.5)*CFG.twinkleRate, twDir:Math.random()<.5?-1:1, pulsePhase:Math.random()*Math.PI*2, pulseSpeed:rand(CFG.pulseRateMin,CFG.pulseRateMax), color:colors[(Math.random()*colors.length)|0] })); } function draw(s){ ctx.beginPath(); ctx.globalAlpha=s.alpha; ctx.fillStyle=s.color; ctx.arc(s.x,s.y,s.r,0,Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.globalAlpha=s.alpha*0.35; ctx.fillStyle=s.color; ctx.arc(s.x,s.y,s.r*2.3,0,Math.PI*2); ctx.fill(); } function step(){ rafId=requestAnimationFrame(step); ctx.clearRect(0,0,w,h); for(const s of stars){ s.x+=s.vx; s.y+=s.vy; if(s.x<-5)s.x=w+5; if(s.x>w+5)s.x=-5; if(s.y<-5)s.y=h+5; if(s.y>h+5)s.y=-5;</p> <p> s.twPhase+=s.twSpeed*s.twDir; if(Math.random()<.001) s.twDir*=-1; const t=(Math.sin(s.twPhase)+1)/2; s.alpha=CFG.twinkleMin+t*(CFG.twinkleMax-CFG.twinkleMin); s.pulsePhase+=s.pulseSpeed; const p=(Math.sin(s.pulsePhase)+1)/2; s.r=s.rBase*(1+CFG.pulseAmp*(p*2-1)); draw(s); } } function start(){ stop(); syncSize(); init(); rafId=requestAnimationFrame(step); } function stop(){ if(rafId){ cancelAnimationFrame(rafId); rafId=null; } } const io=new IntersectionObserver(es=>{ es.forEach(e=>{ if(e.isIntersecting) start(); else stop(); }); },{threshold:.1}); io.observe(wrap);</p> <p> const ro=new ResizeObserver(()=>start()); ro.observe(wrap);</p> <p> if(!img.complete) img.addEventListener('load', start, {once:true}); }</p> <p> function ready(fn){ if(document.readyState!=='loading') fn(); else document.addEventListener('DOMContentLoaded',fn); } ready(prepare); window.addEventListener('load', ()=> setTimeout(prepare, 600)); // Elementor lazy load })(); </script><br />