[sc name="The Digi Advert"][/sc]
/**
* TheDigiAdert - All Animations & 3D Effects
* STEP 4: Paste in Appearance > Theme File Editor
* OR use WPCode plugin > Add Snippet > JavaScript
* Load location: "Footer" (before )
*/
(function() {
'use strict';
// ── WAIT FOR DOM ──
document.addEventListener('DOMContentLoaded', function() {
// ── 1. CUSTOM CURSOR ──
var dot = document.getElementById('tda-dot');
var ring = document.getElementById('tda-ring');
if (dot && ring) {
var mx = 0, my = 0, rx = 0, ry = 0;
document.addEventListener('mousemove', function(e) {
mx = e.clientX; my = e.clientY;
});
(function tickCursor() {
rx += (mx - rx) * 0.13;
ry += (my - ry) * 0.13;
dot.style.left = mx + 'px'; dot.style.top = my + 'px';
ring.style.left = rx + 'px'; ring.style.top = ry + 'px';
requestAnimationFrame(tickCursor);
})();
// Expand ring on hover
var hoverEls = document.querySelectorAll('a, button, .tda-srv, .tda-tcard, .tda-wcard, .tda-pill');
hoverEls.forEach(function(el) {
el.addEventListener('mouseenter', function() {
ring.style.width = '64px'; ring.style.height = '64px';
ring.style.borderColor = 'rgba(56,189,248,.8)';
});
el.addEventListener('mouseleave', function() {
ring.style.width = '42px'; ring.style.height = '42px';
ring.style.borderColor = 'rgba(56,189,248,.55)';
});
});
}
// ── 2. NAV SCROLL EFFECT ──
var nav = document.getElementById('tda-nav');
if (nav) {
window.addEventListener('scroll', function() {
if (window.scrollY > 60) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
});
}
// ── 3. SERVICE CARD MOUSE GLOW ──
window.tdaGlow = function(el, e) {
var r = el.getBoundingClientRect();
el.style.setProperty('--gx', ((e.clientX - r.left) / r.width * 100) + '%');
el.style.setProperty('--gy', ((e.clientY - r.top) / r.height * 100) + '%');
};
// ── 4. SCROLL REVEAL ──
var revealEls = document.querySelectorAll('.tda-reveal');
if ('IntersectionObserver' in window) {
var revObs = new IntersectionObserver(function(entries) {
entries.forEach(function(e) {
if (e.isIntersecting) e.target.classList.add('visible');
});
}, { threshold: 0.1 });
revealEls.forEach(function(el) { revObs.observe(el); });
} else {
// Fallback for old browsers
revealEls.forEach(function(el) { el.classList.add('visible'); });
}
// ── 5. COUNTER ANIMATION ──
var statEls = document.querySelectorAll('.tda-stat');
var cntObs = new IntersectionObserver(function(entries) {
entries.forEach(function(e) {
if (e.isIntersecting) {
var numEl = e.target.querySelector('[data-count]');
if (numEl && !numEl.dataset.ran) {
numEl.dataset.ran = '1';
var target = parseInt(numEl.dataset.count);
var suffix = target === 4 ? '×' : target === 98 ? '%' : '+';
var current = 0;
var step = target / 65;
var timer = setInterval(function() {
current += step;
if (current >= target) { current = target; clearInterval(timer); }
numEl.textContent = Math.floor(current) + suffix;
}, 28);
}
cntObs.unobserve(e.target);
}
});
}, { threshold: 0.5 });
statEls.forEach(function(el) { cntObs.observe(el); });
// ── 6. HERO PARALLAX ──
var hwrap = document.querySelector('.tda-hwrap');
window.addEventListener('scroll', function() {
if (hwrap) hwrap.style.transform = 'translateY(' + (window.scrollY * 0.1) + 'px)';
});
// ── 7. THREE.JS PARTICLE FIELD ──
if (typeof THREE !== 'undefined') {
var sceneCanvas = document.getElementById('tda-scene');
if (sceneCanvas) {
var renderer = new THREE.WebGLRenderer({ canvas: sceneCanvas, alpha: true, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
var scene3 = new THREE.Scene();
var camera3 = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera3.position.z = 80;
var setSize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera3.aspect = window.innerWidth / window.innerHeight;
camera3.updateProjectionMatrix();
};
setSize();
window.addEventListener('resize', setSize);
// Particles
var N = 1800;
var pos = new Float32Array(N * 3);
var col = new Float32Array(N * 3);
var PAL = [[0.1, 0.34, 0.86], [0.01, 0.52, 0.78], [0.22, 0.74, 0.98], [0.4, 0.91, 0.97]];
for (var i = 0; i < N; i++) {
pos[i*3] = (Math.random() - 0.5) * 200;
pos[i*3+1] = (Math.random() - 0.5) * 200;
pos[i*3+2] = (Math.random() - 0.5) * 120;
var c = PAL[Math.floor(Math.random() * PAL.length)];
col[i*3] = c[0]; col[i*3+1] = c[1]; col[i*3+2] = c[2];
}
var geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
var ptMat = new THREE.PointsMaterial({ size: 0.45, vertexColors: true, transparent: true, opacity: 0.68 });
var particles = new THREE.Points(geo, ptMat);
scene3.add(particles);
var tx3 = 0, ty3 = 0, t3 = 0;
document.addEventListener('mousemove', function(e) {
tx3 = (e.clientX / window.innerWidth - 0.5) * 10;
ty3 = (e.clientY / window.innerHeight - 0.5) * -10;
});
(function animate3() {
requestAnimationFrame(animate3);
t3 += 0.0007;
particles.rotation.y = t3 * 0.35 + tx3 * 0.04;
particles.rotation.x = t3 * 0.12 + ty3 * 0.04;
renderer.render(scene3, camera3);
})();
}
}
// ── 8. HERO 3D TORUS ──
var hCanvas = document.getElementById('tda-hero-canvas');
if (hCanvas) {
var hctx = hCanvas.getContext('2d');
var angle = 0;
var CX = 240, CY = 240, R = 140, r = 52, LAT = 18, LON = 28;
var COLS = ['#1A56DB', '#0284C7', '#38BDF8', '#67E8F9', '#0EA5E9'];
function hexToRgb(hex) {
return [parseInt(hex.slice(1,3),16), parseInt(hex.slice(3,5),16), parseInt(hex.slice(5,7),16)];
}
function drawTorus() {
hctx.clearRect(0, 0, 480, 480);
angle += 0.007;
var cA = Math.cos(angle), sA = Math.sin(angle);
var cB = Math.cos(angle * 0.38), sB = Math.sin(angle * 0.38);
var pts = [];
for (var i = 0; i <= LAT; i++) {
var phi = (i / LAT) * Math.PI * 2;
for (var j = 0; j <= LON; j++) {
var theta = (j / LON) * Math.PI * 2;
var x = (R + r * Math.cos(phi)) * Math.cos(theta);
var y = (R + r * Math.cos(phi)) * Math.sin(theta);
var z = r * Math.sin(phi);
var x1 = x * cA - z * sA, z1 = x * sA + z * cA;
var y2 = y * cB - z1 * sB, z2 = y * sB + z1 * cB;
var sc = 500 / (500 + z2);
pts.push({ px: CX + x1*sc, py: CY + y2*sc, z: z2, ci: Math.floor((i / LAT) * COLS.length) % COLS.length });
}
}
pts.sort(function(a, b) { return a.z - b.z; });
pts.forEach(function(p) {
var br = (p.z + 180) / 360;
var al = Math.max(0.04, Math.min(0.95, br));
var rgb = hexToRgb(COLS[p.ci]);
hctx.beginPath();
hctx.arc(p.px, p.py, 2.2, 0, Math.PI * 2);
hctx.fillStyle = 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + al + ')';
hctx.fill();
});
requestAnimationFrame(drawTorus);
}
drawTorus();
}
}); // end DOMContentLoaded
})();// Scroll reveal
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('visible');
}
});
}, { threshold: 0.15 });
reveals.forEach(el => observer.observe(el));
// Counter animation
function animateCount(el) {
const target = parseInt(el.dataset.count);
let current = 0;
const step = target / 50;
const timer = setInterval(() => {
current += step;
if (current >= target) {
current = target;
clearInterval(timer);
}
el.textContent = Math.floor(current);
}, 30);
}
document.querySelectorAll('[data-count]').forEach(el => {
animateCount(el);
});
// Simple hover effect
document.querySelectorAll('a, button').forEach(el => {
el.addEventListener('mouseenter', () => {
el.style.transform = "scale(1.05)";
});
el.addEventListener('mouseleave', () => {
el.style.transform = "scale(1)";
});
});
/**
* TheDigiAdert - All Animations & 3D Effects
* STEP 4: Paste in Appearance > Theme File Editor
* OR use WPCode plugin > Add Snippet > JavaScript
* Load location: "Footer" (before 
)
*/
(function() {
'use strict';
// ── WAIT FOR DOM ──
document.addEventListener('DOMContentLoaded', function() {
// ── 1. CUSTOM CURSOR ──
var dot = document.getElementById('tda-dot');
var ring = document.getElementById('tda-ring');
if (dot && ring) {
var mx = 0, my = 0, rx = 0, ry = 0;
document.addEventListener('mousemove', function(e) {
mx = e.clientX; my = e.clientY;
});
(function tickCursor() {
rx += (mx - rx) * 0.13;
ry += (my - ry) * 0.13;
dot.style.left = mx + 'px'; dot.style.top = my + 'px';
ring.style.left = rx + 'px'; ring.style.top = ry + 'px';
requestAnimationFrame(tickCursor);
})();
// Expand ring on hover
var hoverEls = document.querySelectorAll('a, button, .tda-srv, .tda-tcard, .tda-wcard, .tda-pill');
hoverEls.forEach(function(el) {
el.addEventListener('mouseenter', function() {
ring.style.width = '64px'; ring.style.height = '64px';
ring.style.borderColor = 'rgba(56,189,248,.8)';
});
el.addEventListener('mouseleave', function() {
ring.style.width = '42px'; ring.style.height = '42px';
ring.style.borderColor = 'rgba(56,189,248,.55)';
});
});
}
// ── 2. NAV SCROLL EFFECT ──
var nav = document.getElementById('tda-nav');
if (nav) {
window.addEventListener('scroll', function() {
if (window.scrollY > 60) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
});
}
// ── 3. SERVICE CARD MOUSE GLOW ──
window.tdaGlow = function(el, e) {
var r = el.getBoundingClientRect();
el.style.setProperty('--gx', ((e.clientX - r.left) / r.width * 100) + '%');
el.style.setProperty('--gy', ((e.clientY - r.top) / r.height * 100) + '%');
};
// ── 4. SCROLL REVEAL ──
var revealEls = document.querySelectorAll('.tda-reveal');
if ('IntersectionObserver' in window) {
var revObs = new IntersectionObserver(function(entries) {
entries.forEach(function(e) {
if (e.isIntersecting) e.target.classList.add('visible');
});
}, { threshold: 0.1 });
revealEls.forEach(function(el) { revObs.observe(el); });
} else {
// Fallback for old browsers
revealEls.forEach(function(el) { el.classList.add('visible'); });
}
// ── 5. COUNTER ANIMATION ──
var statEls = document.querySelectorAll('.tda-stat');
var cntObs = new IntersectionObserver(function(entries) {
entries.forEach(function(e) {
if (e.isIntersecting) {
var numEl = e.target.querySelector('[data-count]');
if (numEl && !numEl.dataset.ran) {
numEl.dataset.ran = '1';
var target = parseInt(numEl.dataset.count);
var suffix = target === 4 ? '×' : target === 98 ? '%' : '+';
var current = 0;
var step = target / 65;
var timer = setInterval(function() {
current += step;
if (current >= target) { current = target; clearInterval(timer); }
numEl.textContent = Math.floor(current) + suffix;
}, 28);
}
cntObs.unobserve(e.target);
}
});
}, { threshold: 0.5 });
statEls.forEach(function(el) { cntObs.observe(el); });
// ── 6. HERO PARALLAX ──
var hwrap = document.querySelector('.tda-hwrap');
window.addEventListener('scroll', function() {
if (hwrap) hwrap.style.transform = 'translateY(' + (window.scrollY * 0.1) + 'px)';
});
// ── 7. THREE.JS PARTICLE FIELD ──
if (typeof THREE !== 'undefined') {
var sceneCanvas = document.getElementById('tda-scene');
if (sceneCanvas) {
var renderer = new THREE.WebGLRenderer({ canvas: sceneCanvas, alpha: true, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
var scene3 = new THREE.Scene();
var camera3 = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera3.position.z = 80;
var setSize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera3.aspect = window.innerWidth / window.innerHeight;
camera3.updateProjectionMatrix();
};
setSize();
window.addEventListener('resize', setSize);
// Particles
var N = 1800;
var pos = new Float32Array(N * 3);
var col = new Float32Array(N * 3);
var PAL = [[0.1, 0.34, 0.86], [0.01, 0.52, 0.78], [0.22, 0.74, 0.98], [0.4, 0.91, 0.97]];
for (var i = 0; i < N; i++) {
pos[i*3] = (Math.random() - 0.5) * 200;
pos[i*3+1] = (Math.random() - 0.5) * 200;
pos[i*3+2] = (Math.random() - 0.5) * 120;
var c = PAL[Math.floor(Math.random() * PAL.length)];
col[i*3] = c[0]; col[i*3+1] = c[1]; col[i*3+2] = c[2];
}
var geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
var ptMat = new THREE.PointsMaterial({ size: 0.45, vertexColors: true, transparent: true, opacity: 0.68 });
var particles = new THREE.Points(geo, ptMat);
scene3.add(particles);
var tx3 = 0, ty3 = 0, t3 = 0;
document.addEventListener('mousemove', function(e) {
tx3 = (e.clientX / window.innerWidth - 0.5) * 10;
ty3 = (e.clientY / window.innerHeight - 0.5) * -10;
});
(function animate3() {
requestAnimationFrame(animate3);
t3 += 0.0007;
particles.rotation.y = t3 * 0.35 + tx3 * 0.04;
particles.rotation.x = t3 * 0.12 + ty3 * 0.04;
renderer.render(scene3, camera3);
})();
}
}
// ── 8. HERO 3D TORUS ──
var hCanvas = document.getElementById('tda-hero-canvas');
if (hCanvas) {
var hctx = hCanvas.getContext('2d');
var angle = 0;
var CX = 240, CY = 240, R = 140, r = 52, LAT = 18, LON = 28;
var COLS = ['#1A56DB', '#0284C7', '#38BDF8', '#67E8F9', '#0EA5E9'];
function hexToRgb(hex) {
return [parseInt(hex.slice(1,3),16), parseInt(hex.slice(3,5),16), parseInt(hex.slice(5,7),16)];
}
function drawTorus() {
hctx.clearRect(0, 0, 480, 480);
angle += 0.007;
var cA = Math.cos(angle), sA = Math.sin(angle);
var cB = Math.cos(angle * 0.38), sB = Math.sin(angle * 0.38);
var pts = [];
for (var i = 0; i <= LAT; i++) {
var phi = (i / LAT) * Math.PI * 2;
for (var j = 0; j <= LON; j++) {
var theta = (j / LON) * Math.PI * 2;
var x = (R + r * Math.cos(phi)) * Math.cos(theta);
var y = (R + r * Math.cos(phi)) * Math.sin(theta);
var z = r * Math.sin(phi);
var x1 = x * cA - z * sA, z1 = x * sA + z * cA;
var y2 = y * cB - z1 * sB, z2 = y * sB + z1 * cB;
var sc = 500 / (500 + z2);
pts.push({ px: CX + x1*sc, py: CY + y2*sc, z: z2, ci: Math.floor((i / LAT) * COLS.length) % COLS.length });
}
}
pts.sort(function(a, b) { return a.z - b.z; });
pts.forEach(function(p) {
var br = (p.z + 180) / 360;
var al = Math.max(0.04, Math.min(0.95, br));
var rgb = hexToRgb(COLS[p.ci]);
hctx.beginPath();
hctx.arc(p.px, p.py, 2.2, 0, Math.PI * 2);
hctx.fillStyle = 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',' + al + ')';
hctx.fill();
});
requestAnimationFrame(drawTorus);
}
drawTorus();
}
}); // end DOMContentLoaded
})();