In this effect, we will make a set of divisions scroll vertically. When a slide reaches the top of the page, it will be pinned and then disappear by receding into space. This effect can help draw the user’s attention when multiple identical sections follow one another. Shall we take a look? Let’s go!
HTML Structure
The structure here is simple. Each slide consists of a content-wrapper
division and its child content
, which will undergo a 3D transformation.
<section class="mwg_effect031">
<div class="slide">
<div class="content-wrapper">
<div class="content">...</div>
</div>
</div>
<div class="slide">
<div class="content-wrapper">
<div class="content">...</div>
</div>
</div>
...
</section>