| 1 |
(function () { |
| 2 |
function initTextRevealScroll(appEl) { |
| 3 |
var opts; |
| 4 |
try { opts = JSON.parse(appEl.getAttribute('data-opts') || '{}'); } catch(e){ opts = {}; } |
| 5 |
|
| 6 |
var a = { |
| 7 |
text: opts.text || '', |
| 8 |
subtext: opts.subtext || '', |
| 9 |
tag: opts.tag || 'h2', |
| 10 |
revealUnit: opts.revealUnit || 'word', |
| 11 |
revealAnim: opts.revealAnim || 'slide-up', |
| 12 |
stagger: opts.stagger === undefined ? 60 : opts.stagger, |
| 13 |
duration: opts.duration || 600, |
| 14 |
triggerOffset: opts.triggerOffset === undefined ? 15 : opts.triggerOffset, |
| 15 |
once: opts.once !== false, |
| 16 |
textAlign: opts.textAlign || 'center', |
| 17 |
fontSize: opts.fontSize || 52, |
| 18 |
fontWeight: opts.fontWeight || 800, |
| 19 |
lineHeight: opts.lineHeight || 1.15, |
| 20 |
letterSpacing: opts.letterSpacing === undefined ? -1 : opts.letterSpacing, |
| 21 |
subtextSize: opts.subtextSize || 18, |
| 22 |
paddingTop: opts.paddingTop || 80, |
| 23 |
paddingBottom: opts.paddingBottom || 80, |
| 24 |
maxWidth: opts.maxWidth || 900, |
| 25 |
bgColor: opts.bgColor || '', |
| 26 |
textColor: opts.textColor || '#0f172a', |
| 27 |
subtextColor: opts.subtextColor || '#64748b', |
| 28 |
accentColor: opts.accentColor || '#7c3aed', |
| 29 |
accentWords: opts.accentWords || '', |
| 30 |
useGradient: opts.useGradient || false, |
| 31 |
gradFrom: opts.gradFrom || '#7c3aed', |
| 32 |
gradTo: opts.gradTo || '#ec4899' |
| 33 |
}; |
| 34 |
|
| 35 |
var accentSet = {}; |
| 36 |
a.accentWords.split(',').forEach(function(w){ var t=w.trim().toLowerCase(); if(t) accentSet[t]=true; }); |
| 37 |
|
| 38 |
var animClass = { |
| 39 |
'slide-up': 'bkbg-trs-slide-up', |
| 40 |
'fade': 'bkbg-trs-fade', |
| 41 |
'blur': 'bkbg-trs-blur', |
| 42 |
'clip': 'bkbg-trs-clip', |
| 43 |
'scale': 'bkbg-trs-scale' |
| 44 |
}[a.revealAnim] || 'bkbg-trs-slide-up'; |
| 45 |
|
| 46 |
/* Section */ |
| 47 |
var section = document.createElement('section'); |
| 48 |
section.className = 'bkbg-trs-section'; |
| 49 |
var cs = section.style; |
| 50 |
cs.setProperty('--bkbg-trs-bg', a.bgColor || 'transparent'); |
| 51 |
cs.setProperty('--bkbg-trs-pt', a.paddingTop + 'px'); |
| 52 |
cs.setProperty('--bkbg-trs-pb', a.paddingBottom + 'px'); |
| 53 |
cs.setProperty('--bkbg-trs-align', a.textAlign); |
| 54 |
cs.setProperty('--bkbg-trs-max-width', a.maxWidth + 'px'); |
| 55 |
cs.setProperty('--bkbg-trs-text-color', a.textColor); |
| 56 |
cs.setProperty('--bkbg-trs-accent', a.accentColor); |
| 57 |
cs.setProperty('--bkbg-trs-sub-color', a.subtextColor); |
| 58 |
cs.setProperty('--bkbg-trs-dur', a.duration + 'ms'); |
| 59 |
cs.setProperty('--bkbg-trs-grad-from', a.gradFrom); |
| 60 |
cs.setProperty('--bkbg-trs-grad-to', a.gradTo); |
| 61 |
|
| 62 |
var inner = document.createElement('div'); |
| 63 |
inner.className = 'bkbg-trs-inner'; |
| 64 |
|
| 65 |
/* Build heading with animated units */ |
| 66 |
var heading = document.createElement(a.tag); |
| 67 |
heading.className = 'bkbg-trs-heading'; |
| 68 |
|
| 69 |
var text = a.text || ''; |
| 70 |
var units = a.revealUnit === 'char' ? text.split('') : text.split(/\s+/); |
| 71 |
var unitEls = []; |
| 72 |
|
| 73 |
units.forEach(function(unit, i) { |
| 74 |
var span = document.createElement('span'); |
| 75 |
var isAccent = accentSet[unit.toLowerCase()]; |
| 76 |
span.className = [ |
| 77 |
'bkbg-trs-unit', |
| 78 |
animClass, |
| 79 |
'bkbg-trs-hidden', |
| 80 |
isAccent ? 'bkbg-trs-accent' : '', |
| 81 |
isAccent && a.useGradient ? 'bkbg-trs-gradient' : '' |
| 82 |
].filter(Boolean).join(' '); |
| 83 |
span.style.transitionDelay = (i * a.stagger) + 'ms'; |
| 84 |
if (isAccent && !a.useGradient) { span.style.color = a.accentColor; } |
| 85 |
|
| 86 |
/* Add a non-breaking space after word (except last) */ |
| 87 |
span.textContent = unit; |
| 88 |
heading.appendChild(span); |
| 89 |
|
| 90 |
if (a.revealUnit !== 'char' && i < units.length - 1) { |
| 91 |
heading.appendChild(document.createTextNode('\u00a0')); |
| 92 |
} |
| 93 |
|
| 94 |
unitEls.push(span); |
| 95 |
}); |
| 96 |
|
| 97 |
inner.appendChild(heading); |
| 98 |
|
| 99 |
/* Subtext */ |
| 100 |
var subtextEl = null; |
| 101 |
if (a.subtext) { |
| 102 |
subtextEl = document.createElement('p'); |
| 103 |
subtextEl.className = 'bkbg-trs-subtext'; |
| 104 |
subtextEl.textContent = a.subtext; |
| 105 |
inner.appendChild(subtextEl); |
| 106 |
} |
| 107 |
|
| 108 |
section.appendChild(inner); |
| 109 |
appEl.replaceWith(section); |
| 110 |
|
| 111 |
/* Reveal logic */ |
| 112 |
var revealed = false; |
| 113 |
|
| 114 |
function revealAll() { |
| 115 |
unitEls.forEach(function(u) { |
| 116 |
u.classList.remove('bkbg-trs-hidden'); |
| 117 |
u.classList.add('bkbg-trs-shown'); |
| 118 |
}); |
| 119 |
if (subtextEl) { |
| 120 |
var delay = unitEls.length * a.stagger + 150; |
| 121 |
setTimeout(function(){ subtextEl.classList.add('bkbg-trs-shown'); }, delay); |
| 122 |
} |
| 123 |
if (a.once) revealed = true; |
| 124 |
} |
| 125 |
|
| 126 |
function hideAll() { |
| 127 |
if (a.once && revealed) return; |
| 128 |
unitEls.forEach(function(u) { |
| 129 |
u.classList.remove('bkbg-trs-shown'); |
| 130 |
u.classList.add('bkbg-trs-hidden'); |
| 131 |
}); |
| 132 |
if (subtextEl) subtextEl.classList.remove('bkbg-trs-shown'); |
| 133 |
} |
| 134 |
|
| 135 |
if ('IntersectionObserver' in window) { |
| 136 |
var rootMargin = '-' + (a.triggerOffset || 15) + '% 0px -' + (a.triggerOffset || 15) + '% 0px'; |
| 137 |
var obs = new IntersectionObserver(function(entries) { |
| 138 |
entries.forEach(function(entry) { |
| 139 |
if (entry.isIntersecting) { |
| 140 |
revealAll(); |
| 141 |
} else if (!a.once) { |
| 142 |
hideAll(); |
| 143 |
} |
| 144 |
}); |
| 145 |
}, { rootMargin: rootMargin, threshold: 0.01 }); |
| 146 |
obs.observe(section); |
| 147 |
} else { |
| 148 |
revealAll(); |
| 149 |
} |
| 150 |
} |
| 151 |
|
| 152 |
document.querySelectorAll('.bkbg-trs-app').forEach(initTextRevealScroll); |
| 153 |
})(); |
| 154 |
|
