Scrollstack

First Card

Your single scroll site that strategically communicates your worth to attract more customers. Not more, not less. Your single scroll site that strategically communicates your worth to attract more customers. Not more, not less. Your single scroll site that strategically communicates your worth to attract more customers.

Second Card

Third Card

Fourth Card

Documentation

Copy the module

CSS

.scrollstack__card {
    position: sticky;
    top: 5em;
    transition: transform 0.3s;
}
.scrollstack__card:nth-child(1) { transform: translateY(1em); }
.scrollstack__card:nth-child(2) { transform: translateY(2em);  }
.scrollstack__card:nth-child(3) { transform: translateY(3em);  }
.scrollstack__card:nth-child(4) { transform: translateY(4em);  }
.scrollstack__card:nth-child(5) { transform: translateY(5em);  }

.scrollstack__card.stacked{
	position: relative;
	transform: scale(0.9);
}