Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
: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;
}
</style>
</head>
<body>
<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>
<script>
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();
});
</script>
</body>
</html>
