Using serious items will make your website different and your website will last longer in the minds of your website visitors. In this post, instead of vertical scrolling, which is used everywhere, horizontal scrolling has been used. This also reduces the vertical space on the website and does not lengthen the length of the website.
HTML
<!-- This script got from www.devanswer.com -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='http://www.devanswer.com/codes/files/skn8ash.css'/>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css'>
<script src='http://www.devanswer.com/codes/files/ScrollTrigger.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js'></script>
<div class="container">
<section data-bgcolor="#bcb8ad" data-textcolor="#032f35">
<div>
<h1 data-scroll data-scroll-speed="1"><span>Horizontal</span> <span>scroll</span> <span>section</span></h1>
<p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">with GSAP ScrollTrigger & Locomotive Scroll</p>
</div>
</section>
<section id="sectionPin">
<div class="pin-wrap">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>
<img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt="">
<img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt="">
<img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt="">
</div>
</section>
<section data-bgcolor="#e3857a" data-textcolor="#f1dba7">
<img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<h2 data-scroll data-scroll-speed="1" class="credit"><a>Developers Answer</a></h2>
</section>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
:root {
--text-color: #111;
--bg-color: #b9b3a9;
}
body {
font-family: termina, sans-serif!important;
color: var(--text-color);
background: var(--bg-color);
transition: 0.3s ease-out;
overflow-x: hidden;
max-width: 100%;
width: 100%;
overscroll-behavior: none;
}
section:not(#sectionPin) {
min-height: 100vh;
width: 100%;
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 2rem;
padding: 50px 10vw;
margin: auto;
place-items: center;
}
img {
height: 80vh;
width: auto;
object-fit: cover;
}
h1 {
font-size: 5rem!important;
line-height: 1;
font-weight: 800!important;
margin-bottom: 1rem;
position: absolute;
top: 10vw;
left: 10vw;
z-index: 4;
overflow-wrap: break-word;
hyphens: auto;
}
@media (max-width: 768px) {
h1 {
font-size: 16vw;
}
}
h1 span {
display: block;
}
h2 {
font-size: 2rem;
max-width: 400px;
}
.credit {
font-family: Termina, sans-serif;
}
.credit a {
color: var(--text-color);
}
* {
box-sizing: border-box;
}
#sectionPin {
height: 100vh;
overflow: hidden;
display: flex;
left: 0;
background: var(--text-color);
color: var(--bg-color);
}
.pin-wrap {
height: 100vh;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 50px 10vw;
}
.pin-wrap>* {
min-width: 60vw;
padding: 0 5vw;
}
p {
position: absolute;
bottom: 10vw;
right: 10vw;
width: 200px;
line-height: 1.5;
}Javascript
gsap.registerPlugin(ScrollTrigger);
const pageContainer = document.querySelector(".container");
/* SMOOTH SCROLL */
const scroller = new LocomotiveScroll({
el: pageContainer,
smooth: true
});
scroller.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy(pageContainer, {
scrollTop(value) {
return arguments.length
? scroller.scrollTo(value, 0, 0)
: scroller.scroll.instance.scroll.y;
},
getBoundingClientRect() {
return {
left: 0,
top: 0,
width: window.innerWidth,
height: window.innerHeight
};
},
pinType: pageContainer.style.transform ? "transform" : "fixed"
});
////////////////////////////////////
////////////////////////////////////
window.addEventListener("load", function () {
let pinBoxes = document.querySelectorAll(".pin-wrap > *");
let pinWrap = document.querySelector(".pin-wrap");
let pinWrapWidth = pinWrap.offsetWidth;
let horizontalScrollLength = pinWrapWidth - window.innerWidth;
// Pinning and horizontal scrolling
gsap.to(".pin-wrap", {
scrollTrigger: {
scroller: pageContainer, //locomotive-scroll
scrub: true,
trigger: "#sectionPin",
pin: true,
// anticipatePin: 1,
start: "top top",
end: pinWrapWidth
},
x: -horizontalScrollLength,
ease: "none"
});
ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll
ScrollTrigger.refresh();
});
