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;

1. sectionOne will always have a property of position:fixed;
2. 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. :)