HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

200x160

483 Bytes

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Herbatur Cinematic</title>

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

<style>
body {
  margin:0;
  font-family: 'Georgia', serif;
  background:#0a0a0a;
  color:white;
}

/* HERO */
.hero {
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#000;
}
.hero h1 {
  font-size:40px;
}

/* PIN SECTION */
.section {
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
}

/* PRODUCT IMAGE */
.product {
  width:200px;
  opacity:0;
}
</style>
</head>

<body>

<section class="hero">
  <div>
    <h1>HERBATUR</h1>
    <p>The Art of Hair Restoration</p>
  </div>
</section>

<section class="section" id="scene1">
  <img class="product" src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519">
</section>

<section class="section" id="scene2">
  <div>Strength. Nourishment. Shine.</div>
</section>

<section class="section" id="scene3">
  <div>Crafted from Nature</div>
</section>

<script>
gsap.registerPlugin(ScrollTrigger);

/* HERO FADE */
gsap.from(".hero h1", {
  opacity:0,
  y:50,
  duration:1.5
});

/* PIN + ZOOM PRODUCT (APPLE STYLE) */
gsap.to(".product", {
  scrollTrigger: {
    trigger: "#scene1",
    start: "top top",
    end: "+=100%",
    scrub: true,
    pin: true
  },
  scale: 1.5,
  opacity:1
});

/* TEXT SCENE */
gsap.from("#scene2 div", {
  scrollTrigger: {
    trigger: "#scene2",
    start: "top 80%",
    scrub: true
  },
  y:100,
  opacity:0
});

/* FINAL FADE */
gsap.from("#scene3 div", {
  scrollTrigger: {
    trigger: "#scene3",
    start: "top 80%",
    scrub: true
  },
  opacity:0
});
</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

5445KB

Transfer Size

5510KB

Content Size

221.0ms

Dom Content Loaded

288.0ms

First Paint

286.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests