Card Stack : Scroll Effect
Accidents are notorious and mischievous by nature, but as they say, Accident is the mother of invention. While working on a project, by a fluke I created something, as you see.
Making it beginner friendly, all you need is your plain old everyone favorite vanilla.js to create this delicious treat. We will start by creating five HTML <section/>
elements.
<section class="item" id="item-1"></section>
<section class="item" id="item-2"></section>
<section class="item" id="item-3"></section>
<section class="item" id="item-4"></section>
<section class="item" id="item-5"></section>
Sprinkle a pinch of CSS over HTML to make it appealing, provide different height
and background-color
to each item .In my case, I am providing constant height
to each section
.item{
width: 100%;
height: 80vh;
}#item-1 {
background-color: #00abc7;
}#item-2 {
background-color: #63aa73;
}#item-3 {
background-color: #fea521;
}#item-4 {
background-color: #f96c66;
}#item-5 {
background-color: #444;
}
Let’s get dirty, create a class named .fixed
with property position: fixed;
- sectionOne will always have a property of
position:fixed;
- sectionTwo will have a
margin-top:80vh;
i.e., the height of sectionOne so it doesn’t overlap, I hope I haven’t lost you yet.
.fixed{
position: fixed;
top: 0;
margin-top: 0px !important; /*to remove previous allotted margin*/
}#item-1{
position: fixed;
top: 0;
}#item-2{
margin-top: 80vh; /*Equal to the height of sectionOne*/
}
Scroll logic is pretty simple in itself. We have certain CheckPoints where we want to add or remove classes as desired, first lets look at this horrifying image representation of your scroll logic.
Explaining nits and bits : If the user is scrolling down and the scrollPosition
is greater than firstCheckpoint
add a class of .fixed
to sectionTwo and provide sectionThree with a margin-top
equal to the height(sectionOne) + height(sectionTwo)
.
But it might be the case where the user is scrolling upward and scrollPosition
is greater than firstCheckpoint
but less than secondCheckPoint
for that we need to remove of class .fixed
from the sectionThree and remove margin-top
from sectionFourth which was added while scrolling down. And this pattern will be followed for rest.
- Start by implementing a scroll event listener to the
window
object
window.addEventListener('scroll',onScroll,false);
- Calculate the height of each
<section/>
using function getComputedStyle()
//Get all the section reference
var sectionOne = document.querySelector('#item-1');
var sectionTwo = document.querySelector('#item-2');
var sectionThree = document.querySelector('#item-3');
var sectionFourth = document.querySelector('#item-4');
var sectionFifth = document.querySelector('#item-5');//Calculate their individual height
var SectionOneHeight = getComputedStyle(sectionOne).height.split('px')[0];
var SectionTwoHeight = getComputedStyle(sectionTwo).height.split('px')[0];
var SectionThreeHeight = getComputedStyle(sectionThree).height.split('px')[0];
var SectionFourthHeight = getComputedStyle(sectionFourth).height.split('px')[0];
var SectionFifthHeight = getComputedStyle(sectionFifth).height.split('px')[0];
- Calculate the checkPoints which are pretty easy to calculate now that we have height of each
<section/>
//calculate the checkpoint where item need to be modified
var checkPointOne = parseFloat(SectionOneHeight);
var checkPointTwo = checkPointOne + parseFloat(SectionTwoHeight);
var checkPointThree = checkPointTwo + parseFloat(SectionThreeHeight);
var checkPointFourth = checkPointThree + parseFloat(SectionFourthHeight);
- All we need now is Hogwarts magical spell
CODEUS DECRYTPTEM
//Scroll logic
function onScroll(){
//get the current scrollbar position
var scrollBarPosition = window.pageYOffset | document.body.scrollTop
if(scrollBarPosition>= 0 && scrollBarPosition< checkPointOne){
removeClass(sectionTwo,sectionThree)
}else if(scrollBarPosition> checkPointOne && scrollBarPosition<=checkPointTwo ){
addClass(sectionTwo,sectionThree,checkPointTwo)
removeClass(sectionThree,sectionFourth)
}else if(scrollBarPosition> checkPointTwo && scrollBarPosition<=checkPointThree ){
addClass(sectionThree,sectionFourth,checkPointThree)
removeClass(sectionFourth,sectionFifth)
}else if(scrollBarPosition> checkPointThree && scrollBarPosition<=checkPointFourth ){
addClass(sectionFourth,sectionFifth,checkPointFourth)
}
}function addClass(elemOne,elemTwo,margin){
elemOne.classList.add('fixed');
elemTwo.style.marginTop = (margin) + 'px';
}function removeClass(elemOne,elemTwo){
elemOne.classList.remove('fixed');
elemTwo.style.marginTop = '0px';
}
It’s my first time ever posting a blog that too in the form of a tutorial, do suggest edits if you find or effect you want to see next, and if you like it then share it. Here the final look of what we have coded together. :)