Example
Jonathan_Hill
1 month agoSuper Hero
Are you sure?
Hello! Personally, I've always found confirmation prompts like "Are you sure?" to be a little ominous and creepy.
This week's demo is inspired by the hit horror movie, #Backrooms. This ...
larryvanwave-ff
28 days agoCommunity Member
Amazing, love the branching and flickering text effect. I am not sure how you are able to always come up with these great examples.
- Jonathan_Hill27 days agoSuper Hero
Thanks larryvanwave-ff - here's the Javascript I used to closely define the position of the captions and make them flicker like that:
const mobileView = window.innerWidth < 768 || window.innerHeight < 500; var captionFontSize = 16; // Define positions as percentages of screen/viewport, not story dimensions var boxLeftPct = 25; // % of screen width var boxTopPct = 25; // % of screen height var boxWidthPct = 50; // % of screen width function positionCaptions() { if (mobileView === true) { console.log("Mobile view detected - caption positioning skipped."); return; } const css = ` .caption-container { position: absolute !important; transform: none !important; } .caption { position: absolute !important; left: ${boxLeftPct}% !important; top: ${boxTopPct}% !important; width: ${boxWidthPct}% !important; font-size: ${captionFontSize}pt !important; transform: none !important; z-index: 1000 !important; } @keyframes glitchstutter { 0% { opacity: 0; transform: translate(-10px, 4px) skewX(-8deg); filter: blur(6px); } 8% { opacity: 0.8; transform: translate( 10px, -4px) skewX( 9deg); filter: blur(3px); } 12% { opacity: 0; transform: translate(-8px, 2px) skewX(-6deg); filter: blur(7px); } 18% { opacity: 0.9; transform: translate( 8px, 3px) skewX( 6deg); filter: blur(1px); } 22% { opacity: 0.1; transform: translate(-12px, -2px) skewX(-10deg); filter: blur(5px); } 28% { opacity: 1; transform: translate( 6px, 0px) skewX( 4deg); filter: blur(1px); } 35% { opacity: 0.3; transform: translate(-6px, 4px) skewX(-6deg); filter: blur(3px); } 42% { opacity: 1; transform: translate( 4px, -2px) skewX( 3deg); filter: blur(1px); } 50% { opacity: 0.6; transform: translate(-3px, 1px) skewX(-2deg); filter: blur(1px); } 60% { opacity: 1; transform: translate( 2px, 0px) skewX( 1deg); filter: blur(0px); } 75% { opacity: 0.95; transform: translate(-1px, 0px) skewX( 0deg); filter: blur(0px); } 100% { opacity: 1; transform: translate( 0px, 0px) skewX( 0deg); filter: blur(0px); } } .caption-glitch { animation: glitchstutter 0.6s ease-out forwards !important; } `; let style = document.getElementById('custom-caption-style'); if (!style) { style = document.createElement('style'); style.id = 'custom-caption-style'; document.head.appendChild(style); } style.textContent = css; var capEl = document.querySelector('.caption'); if (capEl) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { capEl.classList.remove('caption-glitch'); void capEl.offsetWidth; capEl.classList.add('caption-glitch'); }); }); observer.observe(capEl, { childList: true, subtree: true, characterData: true }); capEl.classList.add('caption-glitch'); } console.log(`Captions positioned at left:${boxLeftPct}% top:${boxTopPct}% width:${boxWidthPct}%`); } document.addEventListener('DOMContentLoaded', positionCaptions); positionCaptions();This code only kicks in when the demo is viewed on a desktop, as my experience has been that it's far trickier to manipulate the captions on smaller screens.
- larryvanwave-ff27 days agoCommunity Member
I tried your code, and it works wonderfully! I really appreciate you sharing the JavaScript for this. It's a fantastic way to add an interesting effect to closed captioning.😀
