<div class="main" data-scroll-container>
<div class="header">
<div class="header__left">
<h1 data-scroll data-scroll-direction="horizontal" data-scroll-speed="-10">Our</h1>
</div>
<div class="header__right">
<h1 data-scroll data-scroll-direction="horizontal" data-scroll-speed="10" data-scroll-offset="-100%">Services</h1>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
/*! locomotive-scroll v3.6.1 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */html.has-scroll-smooth{overflow:hidden}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.has-scroll-smooth body{overflow:hidden}.has-scroll-smooth [data-scroll-container]{min-height:200vh}.c-scrollbar{position:absolute;right:0;top:0;width:11px;height:100%;transform-origin:center right;transition:transform .3s,opacity .3s;opacity:0}.c-scrollbar:hover{transform:scaleX(1.45)}.c-scrollbar:hover,.has-scroll-dragging .c-scrollbar,.has-scroll-scrolling .c-scrollbar{opacity:1}.c-scrollbar_thumb{position:absolute;top:0;right:0;z-index:999999;background-color:#000;opacity:.5;width:7px;border-radius:10px;margin:2px;cursor:-webkit-grab;cursor:grab}.has-scroll-dragging .c-scrollbar_thumb{cursor:-webkit-grabbing;cursor:grabbing}
.main {
height: 250vh;
font-family: 'Montserrat', sans-serif;
}
.header {
height: 100%;
padding-top: 20em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 5em;
}
h1 {
font-size: 3em;
}
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true
});
This Pen doesn't use any external CSS resources.