<section class='grid'>
<div></div>
<div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, commodi inventore aliquam odio excepturi eum repellat quas necessitatibus velit reiciendis eaque dolores, voluptatibus ratione. Eos quisquam nesciunt veniam dolores quia.</p>
<p>Accusamus porro accusantium recusandae nulla ea nemo incidunt praesentium facere! Esse atque inventore cumque aperiam provident ad est culpa omnis enim totam? Provident ipsa accusantium fuga ipsam asperiores, officia tempora.</p>
<p>Iure eius asperiores quia? A distinctio officia voluptates necessitatibus, fugiat voluptatum officiis fugit ducimus consequuntur totam error enim quos. Architecto cupiditate nam cumque placeat autem atque sapiente iste facilis consequuntur!</p>
<p>Alias deserunt laudantium, quam accusantium quos nulla consequatur rerum dolorem enim praesentium aut officia quod error eligendi quis assumenda reiciendis quasi? Laudantium quod provident hic dolor alias. Nostrum, provident ex.</p>
<p>Voluptatem, eum? Possimus magni suscipit delectus sed corrupti porro ea neque fuga? In pariatur omnis labore atque hic rem officiis reprehenderit iste nihil, quae accusantium inventore obcaecati corrupti quis eaque.</p>
<p>Et neque excepturi laudantium quisquam est deleniti dolore aliquid nobis placeat impedit ducimus saepe omnis, libero in voluptates debitis unde odio. Rerum illo adipisci deserunt, delectus ratione quam atque alias!</p>
<p>Praesentium fugiat iste dolorem. Reiciendis voluptatum natus vel pariatur consequuntur perspiciatis quaerat dolorem nisi. Dignissimos eaque ipsa commodi amet, corrupti earum eos voluptatibus atque nulla labore aspernatur architecto cumque quaerat.</p>
<p>Molestias earum aliquam accusamus pariatur. Veniam eum, dolorem quaerat totam illo ipsum quibusdam doloribus soluta incidunt odio odit explicabo sunt nostrum, commodi esse ducimus voluptates quam architecto perferendis quia error.</p></div>
</section>
<section class='grid has-pullquote'>
<div>
<blockquote>
Passersby were amazed by the unusually large amounts of blood.
</blockquote>
</div>
<div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, commodi inventore aliquam odio excepturi eum repellat quas necessitatibus velit reiciendis eaque dolores, voluptatibus ratione. Eos quisquam nesciunt veniam dolores quia.</p>
<p>Accusamus porro accusantium recusandae nulla ea nemo incidunt praesentium facere! Esse atque inventore cumque aperiam provident ad est culpa omnis enim totam? Provident ipsa accusantium fuga ipsam asperiores, officia tempora.</p>
<p>Iure eius asperiores quia? A distinctio officia voluptates necessitatibus, fugiat voluptatum officiis fugit ducimus consequuntur totam error enim quos. Architecto cupiditate nam cumque placeat autem atque sapiente iste facilis consequuntur!</p>
<p>Alias deserunt laudantium, quam accusantium quos nulla consequatur rerum dolorem enim praesentium aut officia quod error eligendi quis assumenda reiciendis quasi? Laudantium quod provident hic dolor alias. Nostrum, provident ex.</p>
<p>Voluptatem, eum? Possimus magni suscipit delectus sed corrupti porro ea neque fuga? In pariatur omnis labore atque hic rem officiis reprehenderit iste nihil, quae accusantium inventore obcaecati corrupti quis eaque.</p>
<p>Et neque excepturi laudantium quisquam est deleniti dolore aliquid nobis placeat impedit ducimus saepe omnis, libero in voluptates debitis unde odio. Rerum illo adipisci deserunt, delectus ratione quam atque alias!</p>
<p>Praesentium fugiat iste dolorem. Reiciendis voluptatum natus vel pariatur consequuntur perspiciatis quaerat dolorem nisi. Dignissimos eaque ipsa commodi amet, corrupti earum eos voluptatibus atque nulla labore aspernatur architecto cumque quaerat.</p>
<p>Molestias earum aliquam accusamus pariatur. Veniam eum, dolorem quaerat totam illo ipsum quibusdam doloribus soluta incidunt odio odit explicabo sunt nostrum, commodi esse ducimus voluptates quam architecto perferendis quia error.</p></div>
</section>
<section class='grid'>
<div></div>
<div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, commodi inventore aliquam odio excepturi eum repellat quas necessitatibus velit reiciendis eaque dolores, voluptatibus ratione. Eos quisquam nesciunt veniam dolores quia.</p>
<p>Accusamus porro accusantium recusandae nulla ea nemo incidunt praesentium facere! Esse atque inventore cumque aperiam provident ad est culpa omnis enim totam? Provident ipsa accusantium fuga ipsam asperiores, officia tempora.</p>
<p>Iure eius asperiores quia? A distinctio officia voluptates necessitatibus, fugiat voluptatum officiis fugit ducimus consequuntur totam error enim quos. Architecto cupiditate nam cumque placeat autem atque sapiente iste facilis consequuntur!</p>
<p>Alias deserunt laudantium, quam accusantium quos nulla consequatur rerum dolorem enim praesentium aut officia quod error eligendi quis assumenda reiciendis quasi? Laudantium quod provident hic dolor alias. Nostrum, provident ex.</p>
<p>Voluptatem, eum? Possimus magni suscipit delectus sed corrupti porro ea neque fuga? In pariatur omnis labore atque hic rem officiis reprehenderit iste nihil, quae accusantium inventore obcaecati corrupti quis eaque.</p>
<p>Et neque excepturi laudantium quisquam est deleniti dolore aliquid nobis placeat impedit ducimus saepe omnis, libero in voluptates debitis unde odio. Rerum illo adipisci deserunt, delectus ratione quam atque alias!</p>
<p>Praesentium fugiat iste dolorem. Reiciendis voluptatum natus vel pariatur consequuntur perspiciatis quaerat dolorem nisi. Dignissimos eaque ipsa commodi amet, corrupti earum eos voluptatibus atque nulla labore aspernatur architecto cumque quaerat.</p>
<p>Molestias earum aliquam accusamus pariatur. Veniam eum, dolorem quaerat totam illo ipsum quibusdam doloribus soluta incidunt odio odit explicabo sunt nostrum, commodi esse ducimus voluptates quam architecto perferendis quia error.</p></div>
</section>
@property --blockquoteGradient {
syntax: "<percentage>";
inherits: true;
initial-value: 0%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
html {
font-size: 1.5rem;
line-height: 1.5;
font-family: system-ui;
}
.has-pullquote {
animation: reveal linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
view-timeline: --section-pullquote block;
}
blockquote {
font-size: 1.8rem;
line-height: 1.2;
position: sticky;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(to right, red var(--blockquoteGradient), black var(--blockquoteGradient));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: blockquote linear both;
animation-timeline: --section-pullquote;
}
@keyframes blockquote {
from {
scale: 0.75;
opacity: 0;
--blockquoteGradient: 0%;
}
20% {
opacity: 0;
}
80% {
--blockquoteGradient: 100%;
}
to {
opacity: 1;
scale: 1;
--blockquoteGradient: 100%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.