Back to Snippets

Cinematic Scroll Blur Reveal JS

Create an immersive entrance for your website. As you scroll down, the massive hero text scales up and blurs out gracefully, which seamlessly reveals the main content behind it.

174

#javascript

#css

#cinematic

#scroll

#blur

#reveal

#hero

#landing page

#scale

/HTML *CSS ()JS Output Live Updates

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: #000000;
  color: #ffffff;
}

.cinematic-wrapper {
  position: relative;
  /* Extra height to allow scrolling */
  height: 250vh;
}

.sticky-hero {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 2;
  /* Fallback dark background that will fade */
  background: #000000;
}

.hero-text {
  font-size: clamp(4rem, 15vw, 12rem);
  font-weight: 900;
  letter-spacing: 10px;
  background: linear-gradient(to right, #ffffff, #94a3b8);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  will-change: transform, filter, opacity;
  transform-origin: center center;
}

.content-reveal {
  position: absolute;
  top: 150vh;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  z-index: 1;
}

.content-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 60px 40px;
  border-radius: 24px;
  max-width: 600px;
  text-align: center;
}

.content-card h2 {
  font-size: 2.5rem;
  margin: 0 0 20px 0;
  background: linear-gradient(to right, #3b82f6, #a855f7);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.content-card p {
  font-size: 1.25rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
}

const heroBg = document.getElementById("sticky-hero");
const heroText = document.getElementById("hero-text");

window.addEventListener("scroll", function() {
  const scrollY = window.scrollY;
  const windowHeight = window.innerHeight;
  
  /* Calculate progress strictly between 0 and 1 */
  let progress = scrollY / windowHeight;
  if (progress < 0) progress = 0;
  if (progress > 1) progress = 1;
  
  /* Calculate the cinematic effects based on progress */
  
  /* Scale text enormously so you "fly through" it */
  const scale = 1 + (progress * 15);
  
  /* Blur it significantly as it gets closer */
  const blur = progress * 20;
  
  /* Fade out the text */
  const textOpacity = 1 - (progress * 1.5);
  
  /* Fade out the black background to reveal content beneath */
  const bgOpacity = 1 - progress;
  
  /* Apply changes perfectly via inline styles */
  heroText.style.transform = "scale(" + scale + ")";
  heroText.style.filter = "blur(" + blur + "px)";
  heroText.style.opacity = Math.max(textOpacity, 0);
  
  heroBg.style.backgroundColor = "rgba(0, 0, 0, " + Math.max(bgOpacity, 0) + ")";
});

Cinematic Scroll Blur Reveal JS

Share Code Snippet