Horizontal Pin Captions
Gallery slides horizontally on scroll
How to use it
- Paste the HTML where the scroll effects should appear. Include the script tags at the top once per page.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Horizontal Pin Captions · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<div class="jouw-container">
<div class="hpc"><div class="hpc-track"><figure class="hpc-card"><span>01</span><b>Westland</b></figure><figure class="hpc-card"><span>02</span><b>Den Haag</b></figure><figure class="hpc-card"><span>03</span><b>Rotterdam</b></figure><figure class="hpc-card"><span>04</span><b>Utrecht</b></figure></div></div>
</div>/* Horizontal Pin Captions · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.hpc{position:absolute;inset:0;background:#0a0a0a;overflow:hidden}
.hpc-track{position:absolute;inset:0;display:flex;align-items:center;gap:3vw;padding:0 6vw;will-change:transform}
.hpc-card{flex:0 0 60%;height:70%;background:#fff;border-radius:12px;margin:0;display:flex;flex-direction:column;justify-content:flex-end;padding:5%;box-sizing:border-box}
.hpc-card span{font:700 14px/1 'JetBrains Mono',monospace;color:#F5480F}.hpc-card b{font:900 clamp(20px,4vw,40px)/1 'Boldonse','Switzer',sans-serif;color:#0a0a0a}// Horizontal Pin Captions · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.hpc')||root;var track=root.querySelector('.hpc-track');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(!window.gsap||!window.ScrollTrigger||reduce)return;var dist=track.scrollWidth-root.clientWidth;gsap.to(track,{x:-dist,ease:'none',scrollTrigger:{trigger:root,start:'top 80%',end:'bottom 20%',scrub:true}});
}
init(document.querySelector('.jouw-container'));More scroll effects
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →