<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section>
<img id="bg" src="https://lethal-wilderness.surge.sh/parallax-images/bg.jpg" />
<h2 id="text">Mountains</h2>
<img id="man" src="https://lethal-wilderness.surge.sh/parallax-images/man.png" />
<img id="clouds_1" src="https://lethal-wilderness.surge.sh/parallax-images/clouds_1.png" />
<img id="clouds_2" src="https://lethal-wilderness.surge.sh/parallax-images/clouds_2.png" />
<img id="mountain_left" src="https://lethal-wilderness.surge.sh/parallax-images/mountain_left.png" />
<img id="mountain_right" src="https://lethal-wilderness.surge.sh/parallax-images/mountain_right.png" />
</section>
<div class="sec">
<h2>ScrollTrigger</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam, impedit veritatis. Iste maxime nihil enim esse eum sint molestiae quam
doloribus ea ipsa consectetur corporis harum nemo, quia explicabo, tenetur ipsum atque? Minima necessitatibus nam earum, maxime iure
quod pariatur tenetur animi quos ut nesciunt ea adipisci non reprehenderit distinctio, obcaecati in blanditiis totam voluptatem,
veniam explicabo ad odio itaque quae. Velit, debitis praesentium obcaecati similique quo, aspernatur eum consequuntur, repellendus
distinctio officiis enim minima suscipit quisquam unde. Aut maiores dolorum ab provident molestias beatae, autem neque totam impedit
voluptatum, perspiciatis optio nisi quae eaque, temporibus incidunt veniam saepe obcaecati id. Corrupti suscipit eveniet facere
laboriosam, veritatis est omnis iste placeat consectetur, eaque soluta assumenda dicta ea possimus incidunt consequatur ullam, et
nulla unde? Excepturi et impedit ut laborum labore harum, dicta nam fugit, earum deserunt eaque quidem. Dolorem beatae magnam commodi,
laborum dignissimos tenetur dolor eaque id nihil officiis impedit aspernatur a error iure! Aspernatur doloribus qui aut assumenda
fugiat dolorem aliquid sapiente harum hic deserunt. Corrupti esse consequuntur dolorum eos cum sunt? Nemo facere ipsum hic id
consequatur soluta facilis! Consectetur minus odio dolor numquam eos ex. Aliquam distinctio velit minima incidunt facilis, ratione
amet neque vero sed maxime hic accusamus! Sed earum dolore quia consequatur debitis architecto nihil quod incidunt ad, quos accusamus
libero eaque, inventore officia iusto porro saepe sit enim. Totam incidunt excepturi repudiandae nostrum optio dignissimos expedita!
Necessitatibus, quae tempora saepe assumenda aspernatur autem maiores exercitationem accusamus a quaerat corporis illo modi veritatis
veniam distinctio et ducimus quas! Nesciunt, non voluptatem aspernatur quae quaerat nostrum porro ipsa aperiam id, culpa illum? Veniam
asperiores dolore dolorem velit alias recusandae minus neque aut aspernatur minima nam numquam est ducimus dignissimos possimus magnam
fuga beatae quam quaerat illo dolorum non, iste mollitia! Perspiciatis animi a iure in.
<br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eum quas nam ab cum alias. Repellendus officia voluptatibus
reiciendis quidem recusandae quasi et aspernatur cum. Maxime tenetur nulla voluptatem, consequuntur eaque reiciendis, accusamus rerum
commodi delectus expedita nostrum quaerat in, ducimus minima tempora. Tempore minima ex quis, odit sit eos laudantium, vero
consequuntur, accusantium nisi iste culpa aliquid aperiam? Eaque nulla tempora quisquam quae, aliquam id inventore dolores iure eos
sit, veritatis reiciendis provident beatae quo, recusandae excepturi quis? Eligendi, vel impedit, fugiat natus voluptatibus qui
sapiente corporis illo et aperiam dolorem adipisci nihil quasi quisquam commodi officiis excepturi eos mollitia vitae, ex quidem quo
magnam? Eos aut esse, veritatis recusandae quos dolor, praesentium aliquam distinctio earum aperiam delectus nulla! Aut magnam enim
quod dolorem nostrum laudantium alias vel cumque, debitis aliquam numquam quo quidem? Animi est voluptatibus rerum culpa obcaecati a
voluptate molestiae id, dolore eaque tempore, aut delectus fugiat officiis eos aliquam repellendus inventore tenetur quidem iste
laboriosam placeat minima? Omnis qui culpa eum. Nesciunt voluptate cumque quae, eum facere maiores fugiat porro iusto a corrupti quia
sit labore totam ipsam! Nihil quod facere expedita autem, perspiciatis vero impedit. Obcaecati magni nihil ipsam sit maiores harum,
eligendi aspernatur quod laboriosam incidunt nulla, tempore aliquid atque quaerat facilis voluptatibus numquam nobis! Deserunt eaque
enim cupiditate excepturi molestias expedita minus! Quod tempora eaque quo, aspernatur soluta est! Reiciendis id neque officiis
inventore illo. Modi aut excepturi porro quo dicta obcaecati veniam, optio non, officiis expedita facilis neque nisi aliquid provident
placeat quibusdam vitae unde asperiores. Expedita, reiciendis molestias necessitatibus beatae qui id consequatur odio quo dolores
corporis! Quibusdam possimus exercitationem eaque doloremque eum quae dolorem. Officia debitis, necessitatibus aut assumenda quod
quaerat a animi consequuntur, ipsa minus dicta voluptas vel! Magnam sapiente dolor assumenda, expedita ab incidunt blanditiis maiores
consectetur. <br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eum quas nam ab cum alias. Repellendus officia voluptatibus
reiciendis quidem recusandae quasi et aspernatur cum. Maxime tenetur nulla voluptatem, consequuntur eaque reiciendis, accusamus rerum
commodi delectus expedita nostrum quaerat in, ducimus minima tempora. Tempore minima ex quis, odit sit eos laudantium, vero
consequuntur, accusantium nisi iste culpa aliquid aperiam? Eaque nulla tempora quisquam quae, aliquam id inventore dolores iure eos
sit, veritatis reiciendis provident beatae quo, recusandae excepturi quis? Eligendi, vel impedit, fugiat natus voluptatibus qui
sapiente corporis illo et aperiam dolorem adipisci nihil quasi quisquam commodi officiis excepturi eos mollitia vitae, ex quidem quo
magnam? Eos aut esse, veritatis recusandae quos dolor, praesentium aliquam distinctio earum aperiam delectus nulla! Aut magnam enim
quod dolorem nostrum laudantium alias vel cumque, debitis aliquam numquam quo quidem? Animi est voluptatibus rerum culpa obcaecati a
voluptate molestiae id, dolore eaque tempore, aut delectus fugiat officiis eos aliquam repellendus inventore tenetur quidem iste
laboriosam placeat minima? Omnis qui culpa eum. Nesciunt voluptate cumque quae, eum facere maiores fugiat porro iusto a corrupti quia
sit labore totam ipsam! Nihil quod facere expedita autem, perspiciatis vero impedit. Obcaecati magni nihil ipsam sit maiores harum,
eligendi aspernatur quod laboriosam incidunt nulla, tempore aliquid atque quaerat facilis voluptatibus numquam nobis! Deserunt eaque
enim cupiditate excepturi molestias expedita minus! Quod tempora eaque quo, aspernatur soluta est! Reiciendis id neque officiis
inventore illo. Modi aut excepturi porro quo dicta obcaecati veniam, optio non, officiis expedita facilis neque nisi aliquid provident
placeat quibusdam vitae unde asperiores. Expedita, reiciendis molestias necessitatibus beatae qui id consequatur odio quo dolores
corporis! Quibusdam possimus exercitationem eaque doloremque eum quae dolorem. Officia debitis, necessitatibus aut assumenda quod
quaerat a animi consequuntur, ipsa minus dicta voluptas vel! Magnam sapiente dolor assumenda, expedita ab incidunt blanditiis maiores
consectetur. <br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eum quas nam ab cum alias. Repellendus officia voluptatibus
reiciendis quidem recusandae quasi et aspernatur cum. Maxime tenetur nulla voluptatem, consequuntur eaque reiciendis, accusamus rerum
commodi delectus expedita nostrum quaerat in, ducimus minima tempora. Tempore minima ex quis, odit sit eos laudantium, vero
consequuntur, accusantium nisi iste culpa aliquid aperiam? Eaque nulla tempora quisquam quae, aliquam id inventore dolores iure eos
sit, veritatis reiciendis provident beatae quo, recusandae excepturi quis? Eligendi, vel impedit, fugiat natus voluptatibus qui
sapiente corporis illo et aperiam dolorem adipisci nihil quasi quisquam commodi officiis excepturi eos mollitia vitae, ex quidem quo
magnam? Eos aut esse, veritatis recusandae quos dolor, praesentium aliquam distinctio earum aperiam delectus nulla! Aut magnam enim
quod dolorem nostrum laudantium alias vel cumque, debitis aliquam numquam quo quidem? Animi est voluptatibus rerum culpa obcaecati a
voluptate molestiae id, dolore eaque tempore, aut delectus fugiat officiis eos aliquam repellendus inventore tenetur quidem iste
laboriosam placeat minima? Omnis qui culpa eum. Nesciunt voluptate cumque quae, eum facere maiores fugiat porro iusto a corrupti quia
sit labore totam ipsam! Nihil quod facere expedita autem, perspiciatis vero impedit. Obcaecati magni nihil ipsam sit maiores harum,
eligendi aspernatur quod laboriosam incidunt nulla, tempore aliquid atque quaerat facilis voluptatibus numquam nobis! Deserunt eaque
enim cupiditate excepturi molestias expedita minus! Quod tempora eaque quo, aspernatur soluta est! Reiciendis id neque officiis
inventore illo. Modi aut excepturi porro quo dicta obcaecati veniam, optio non, officiis expedita facilis neque nisi aliquid provident
placeat quibusdam vitae unde asperiores. Expedita, reiciendis molestias necessitatibus beatae qui id consequatur odio quo dolores
corporis! Quibusdam possimus exercitationem eaque doloremque eum quae dolorem. Officia debitis, necessitatibus aut assumenda quod
quaerat a animi consequuntur, ipsa minus dicta voluptas vel! Magnam sapiente dolor assumenda, expedita ab incidunt blanditiis maiores
consectetur. <br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eum quas nam ab cum alias. Repellendus officia voluptatibus
reiciendis quidem recusandae quasi et aspernatur cum. Maxime tenetur nulla voluptatem, consequuntur eaque reiciendis, accusamus rerum
commodi delectus expedita nostrum quaerat in, ducimus minima tempora. Tempore minima ex quis, odit sit eos laudantium, vero
consequuntur, accusantium nisi iste culpa aliquid aperiam? Eaque nulla tempora quisquam quae, aliquam id inventore dolores iure eos
sit, veritatis reiciendis provident beatae quo, recusandae excepturi quis? Eligendi, vel impedit, fugiat natus voluptatibus qui
sapiente corporis illo et aperiam dolorem adipisci nihil quasi quisquam commodi officiis excepturi eos mollitia vitae, ex quidem quo
magnam? Eos aut esse, veritatis recusandae quos dolor, praesentium aliquam distinctio earum aperiam delectus nulla! Aut magnam enim
quod dolorem nostrum laudantium alias vel cumque, debitis aliquam numquam quo quidem? Animi est voluptatibus rerum culpa obcaecati a
voluptate molestiae id, dolore eaque tempore, aut delectus fugiat officiis eos aliquam repellendus inventore tenetur quidem iste
laboriosam placeat minima? Omnis qui culpa eum. Nesciunt voluptate cumque quae, eum facere maiores fugiat porro iusto a corrupti quia
sit labore totam ipsam! Nihil quod facere expedita autem, perspiciatis vero impedit. Obcaecati magni nihil ipsam sit maiores harum,
eligendi aspernatur quod laboriosam incidunt nulla, tempore aliquid atque quaerat facilis voluptatibus numquam nobis! Deserunt eaque
enim cupiditate excepturi molestias expedita minus! Quod tempora eaque quo, aspernatur soluta est! Reiciendis id neque officiis
inventore illo. Modi aut excepturi porro quo dicta obcaecati veniam, optio non, officiis expedita facilis neque nisi aliquid provident
placeat quibusdam vitae unde asperiores. Expedita, reiciendis molestias necessitatibus beatae qui id consequatur odio quo dolores
corporis! Quibusdam possimus exercitationem eaque doloremque eum quae dolorem. Officia debitis, necessitatibus aut assumenda quod
quaerat a animi consequuntur, ipsa minus dicta voluptas vel! Magnam sapiente dolor assumenda, expedita ab incidunt blanditiis maiores
consectetur. <br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eum quas nam ab cum alias. Repellendus officia voluptatibus
reiciendis quidem recusandae quasi et aspernatur cum. Maxime tenetur nulla voluptatem, consequuntur eaque reiciendis, accusamus rerum
commodi delectus expedita nostrum quaerat in, ducimus minima tempora. Tempore minima ex quis, odit sit eos laudantium, vero
consequuntur, accusantium nisi iste culpa aliquid aperiam? Eaque nulla tempora quisquam quae, aliquam id inventore dolores iure eos
sit, veritatis reiciendis provident beatae quo, recusandae excepturi quis? Eligendi, vel impedit, fugiat natus voluptatibus qui
sapiente corporis illo et aperiam dolorem adipisci nihil quasi quisquam commodi officiis excepturi eos mollitia vitae, ex quidem quo
magnam? Eos aut esse, veritatis recusandae quos dolor, praesentium aliquam distinctio earum aperiam delectus nulla! Aut magnam enim
quod dolorem nostrum laudantium alias vel cumque, debitis aliquam numquam quo quidem? Animi est voluptatibus rerum culpa obcaecati a
voluptate molestiae id, dolore eaque tempore, aut delectus fugiat officiis eos aliquam repellendus inventore tenetur quidem iste
laboriosam placeat minima? Omnis qui culpa eum. Nesciunt voluptate cumque quae, eum facere maiores fugiat porro iusto a corrupti quia
sit labore totam ipsam! Nihil quod facere expedita autem, perspiciatis vero impedit. Obcaecati magni nihil ipsam sit maiores harum,
eligendi aspernatur quod laboriosam incidunt nulla, tempore aliquid atque quaerat facilis voluptatibus numquam nobis! Deserunt eaque
enim cupiditate excepturi molestias expedita minus! Quod tempora eaque quo, aspernatur soluta est! Reiciendis id neque officiis
inventore illo. Modi aut excepturi porro quo dicta obcaecati veniam, optio non, officiis expedita facilis neque nisi aliquid provident
placeat quibusdam vitae unde asperiores. Expedita, reiciendis molestias necessitatibus beatae qui id consequatur odio quo dolores
corporis! Quibusdam possimus exercitationem eaque doloremque eum quae dolorem. Officia debitis, necessitatibus aut assumenda quod
quaerat a animi consequuntur, ipsa minus dicta voluptas vel! Magnam sapiente dolor assumenda, expedita ab incidunt blanditiis maiores
consectetur.
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
<script>
gsap.to("#bg", {
scrollTrigger: {
scrub: 1,
},
scale: 1.5,
})
gsap.to("#man", {
scrollTrigger: {
scrub: 1,
},
scale: 0.5,
})
gsap.to("#mountain_left", {
scrollTrigger: {
scrub: 1,
},
x: -500,
})
gsap.to("#mountain_right", {
scrollTrigger: {
scrub: 1,
},
x: 500,
})
gsap.to("#clouds_1", {
scrollTrigger: {
scrub: 1,
},
x: 200,
})
gsap.to("#clouds_2", {
scrollTrigger: {
scrub: 1,
},
x: -200,
})
gsap.to("#text", {
scrollTrigger: {
scrub: 1,
},
y: 500,
})
</script>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
section {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background: linear-gradient(to top, #fff, transparent);
z-index: 2;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section img#man {
transform-origin: bottom;
}
#text {
position: relative;
color: #fff;
font-size: 10vw;
}
.sec {
position: relative;
padding: 100px;
}
.sec h2 {
font-size: 3.5em;
margin-bottom: 10px;
color: #333;
}
.sec p {
font-size: 1.2em;
color: #333;
}
