<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
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/locomotive-scroll@4.0.6/dist/locomotive-scroll.min.js