Template Spotlights

Floater - Interactive Popup & Dynamic Particles

Experience the next level of ad creativity with 'Floater', our featured template in this episode of 'Template Spotlight'! Witness the captivating power of interactive popups and dynamic particles in action. Watch as the 'Floater' template effortlessly grabs attention with a popup layer that appears when users scroll, while dynamic particles respond to mouse movements, creating an immersive ad experience.

Watch on YouTube

Floater

Creative template for Google Ad Manager (GAM). This creative template shows a banner in the fixed position over the web page content.

Field Values for This Spotlight

Template & Version	Floater (v1.14.0)
Targeted ad unit	Out-of-page
	Note: Any fields not mentioned in this table were not crucial to the creation of this particular spotlight. They either adhere to their default values, or their adjustment doesn't significantly impact the overall appearance of the spotlight. When recreating this spotlight, you may stick to default settings for any unspecified fields.
Width	300
Height	600
Source Type	Uploaded Image
Image Upload	ad_20230713_300x600px.jpg (300x600px)
Show After (seconds)	0
Show on Exit	NO
Auto Close After	0
Scroll Position	0
Position	50% 50%
Show Background Overlay	YES
Background Overlay Color	#DDFFFFFF
Border	20
Border Color	#ffffff
Position of Close Button	Right/Over
JS callback	tmpl.on('load', function() { const eOverlay = tmpl.eCont.parentNode; if (!eOverlay \|\| eOverlay.style.position !== 'fixed') return; const eCanva = document.createElement('canvas'); eCanva.id = 'canvas'; eCanva.style.position = 'absolute'; eCanva.style.top = '0'; eCanva.style.left = '0'; eCanva.style.width = '100%'; eCanva.style.height = '100%'; eCanva.style.zIndex = '-1'; eOverlay.appendChild(eCanva); const canvas = top.document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let width, height; let particles = []; let mouse = { x: 0, y: 0 }; let isSetup = false; const setupEffect = function() { width = canvas.width = top.window.innerWidth; height = canvas.height = top.window.innerHeight; if (isSetup) return; canvas.addEventListener('mousemove', function(event) { mouse.x = event.clientX; mouse.y = event.clientY; }); for (var i = 0; i < 300; i++) { particles.push(createParticle()); } isSetup = true; }; const createParticle = function() { var x = Math.random() * width; var y = Math.random() * height; var radius = Math.random() * 3 + 1; var color = getRandomColor(); var dx = Math.random() * 2 - 1; var dy = Math.random() * 2 - 1; return { x, y, radius, color, dx, dy }; }; const getRandomColor = function() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; }; const updateEffect = function() { ctx.clearRect(0, 0, width, height); for (var i = 0; i < particles.length; i++) { var particle = particles[i]; ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2); ctx.fillStyle = particle.color; ctx.fill(); particle.x += particle.dx; particle.y += particle.dy; if (particle.x + particle.radius > width \|\| particle.x - particle.radius < 0) { particle.dx = -1; } if (particle.y + particle.radius > height \|\| particle.y - particle.radius < 0) { particle.dy = -1; } var distance = Math.sqrt(Math.pow(particle.x - mouse.x, 2) + Math.pow(particle.y - mouse.y, 2)); if (distance < 100) { ctx.lineWidth = (1 - distance / 100) * 2; ctx.strokeStyle = particle.color; ctx.beginPath(); ctx.moveTo(particle.x, particle.y); ctx.lineTo(mouse.x, mouse.y); ctx.stroke(); } } requestAnimationFrame(updateEffect); }; setupEffect(); updateEffect(); top.window.addEventListener('resize', function() { setupEffect(); }); });