<!--
Forum question answer only:
https://www.sitepoint.com/community/t/observe-last-child-by-using-intersection-observer/402042/9
-->
<header>
<h1>Start scrolling. This first background will scroll away.</h1>
</header>
<div class="main">
<div class="section s1" data-src=".BG1">
<div class="text">
<div style="margin-inline: 20px">
<h1>Our Story</h1>
<div class="story-detail">
<p>
We saw a gap between what people need and what banks offer. It
means millions of us aren't getting the banking experience we
deserve for different reasons.
</p>
</div>
</div>
</div>
</div>
<div class="section s2" data-src=".BG2">
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
Traditional banks don’t focus on customers' experience, their
systems may be slow and outdated, they may prioritize a specific
group of people, or perhaps they lack the ability to innovate,
and so on.
</p>
</div>
</div>
</div>
</div>
<div class="section s3" data-src=".BG3">
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
So since we're passionate about solving problems and bridging
gaps, we looked into and identified the challenges and
capabilities we'll need to build a bank here in the Kingdom.
</p>
</div>
</div>
</div>
</div>
<div class="section s4" data-src=".BG4">
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
With the best local and international expertise, we began
building an innovative digital bank designed by and for the
people. We believe that the most effective way to build a bank
for people is to do it with them. This is our philosophy. So, we
started building it with the help of people like you.
</p>
</div>
</div>
</div>
</div>
<div class="section s5" data-src=".BG5">
<div class="text">
<div style="margin-inline: 20px">
<div class="story-description">
<p>
At D360, innovation starts with someone’s passion for improving
financial services. To that person, we say: Never stop offering
solutions to your needs. These solutions will not only benefit
you, but will significantly impact the lives of millions.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="BG BG1"></div>
<div class="BG BG2"></div>
<div class="BG BG3"></div>
<div class="BG BG4"></div>
<div class="BG BG5"></div>
/*
Forum question answer only:
https://www.sitepoint.com/community/t/observe-last-child-by-using-intersection-observer/402042/9
*/
html,
body {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin: 0;
padding: 1rem 0;
}
header {
background: url(https://picsum.photos/id/1018/2000/1000) no-repeat 50% 50%;
background-size: cover;
}
header,
footer,
.main {
min-height: 100vh;
}
.section {
min-height: 100vh;
display: flex;
z-index: 1;
position: relative;
background-size: cover;
}
.text {
margin: auto;
}
.text p {
font-family: "Lato";
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 149%;
color: #263244;
}
.text h1 {
margin-bottom: 20px;
font-family: "Lato";
font-style: normal;
font-weight: 700;
font-size: 50px;
line-height: 0px;
color: #ffffff;
margin-bottom: 50px;
}
.text .story-detail {
max-width: 321px;
border-radius: 20px;
background: radial-gradient(
76.31% 191.89% at 13.43% 22.19%,
rgba(226, 228, 231, 0.8) 0%,
rgba(228, 228, 229, 0.368) 100%
);
-webkit-backdrop-filter: blur(20px); /* ios*/
backdrop-filter: blur(10px);
padding: 23px;
}
.text .story-description {
max-width: 321px;
border-radius: 20px;
background: radial-gradient(
76.31% 191.89% at 13.43% 22.19%,
rgba(226, 228, 231, 0.8) 0%,
rgba(228, 228, 229, 0.368) 100%
);
backdrop-filter: blur(10px);
padding: 23px;
}
.BG1 {
background: url(https://picsum.photos/id/200/2000/1000) no-repeat 50% 50%;
}
.BG2 {
background: url(https://picsum.photos/id/201/2000/1000) no-repeat 50% 50%;
}
.BG3 {
background: url(https://picsum.photos/id/202/2000/1000) no-repeat 50% 50%;
}
.BG4 {
background: url(https://picsum.photos/id/203/2000/1000) no-repeat 50% 50%;
}
.BG5 {
background: url(https://picsum.photos/id/204/2000/1000) no-repeat 50% 50%;
}
.BG {
position: fixed;
z-index: -1;
left: 0;
top: 0;
right: 0;
bottom: -10vh; /* ios bounce*/
background-size: cover;
opacity: 0;
transition: opacity 2s ease;
}
.BG.active {
opacity: 1;
}
/*
Forum question answer only:
https://www.sitepoint.com/community/t/observe-last-child-by-using-intersection-observer/402042/9
*/
(function (d) {
"use strict";
const myBG = d.querySelectorAll("[data-src]");
var imgFixed = "";
let options = {
root: null,
rootMargin: "0px",
threshold: 0.1
};
function calculateVisibleDiv(entries) {
entries.map((entry, index) => {
if (entry.isIntersecting) {
imgFixed = entry.target.dataset.src;
d.querySelector(imgFixed).classList.add("active");
} else {
imgFixed = entry.target.dataset.src;
d.querySelector(imgFixed).classList.remove("active");
}
});
}
let observer = new IntersectionObserver(calculateVisibleDiv, options);
myBG.forEach((entry) => {
observer.observe(entry);
});
})(document);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.