Sticky Card Stack

by pphheerroonn

HTML

<div class="wrapper">
<div class="sticky"><div class="card red one">Powerful Products <br /> <br /> <span style="opacity: 0.5;">I will stick to the screen when you reach my scroll position.</span></div></div>
<div class="sticky"><div class="card green two">Planning and Consultation<br /> <br /> <span style="opacity: 0.5;">I will stick to the screen when you reach my scroll position.</span></div></div>
<div class="sticky"><div class="card blue three">Affordable Financing<br /> <br /> <span style="opacity: 0.5;">I will stick to the screen when you reach my scroll position.</span></div></div>
<div class="sticky"><div class="card red four">Sustainable Learning and Training<br /> <br /> <span style="opacity: 0.5;">I will stick to the screen when you reach my scroll position.</span></div></div>
<div class="sticky"><div class="card green five">Support. On site and Online<br /> <br /> <span style="opacity: 0.5;">I will stick to the screen when you reach my scroll position.</span></div></div>
<div class="sticky"><div class="card blue six">Set up and Safety<br /> <br /> <span style="opacity: 0.5;">I will stick to the screen when you reach my scroll position. </span></div></div>
<div class="sticky"><div class="card yellow seven">Life Cycle Management<br /> <br /> <span style="opacity: 0.5;">I will stick to the screen when you reach my scroll position.</span></div></div>
<div class="sticky"><div class="card yellow eight">Compu b Education<br /> <br /> <span style="opacity: 0.5;">I will stick to the screen when you reach my scroll position.</span></div></div>


</div>

CSS

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
  height: 200px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: white;
  border: 1px rgba(255, 0, 0, 0) solid;
  font-size: 30px;
  max-width: 600px;
  padding-bottom: 50px;
  margin: auto;
}

div.card {
  padding: 50px;
  height: 100%;
  border-radius: 24px;
  -webkit-box-shadow: 0 10px 30px rgba(0,0,0,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.red{background-image: linear-gradient( 292.9deg,  rgba(254,105,241,1) 28.8%, rgba(182,44,248,1) 70.4% ); }
.green{background-image: linear-gradient( 109.6deg,  rgba(102,203,149,1) 11.2%, rgba(39,210,175,1) 98.7% ); }
.blue{background-image: linear-gradient( 109.5deg,  rgba(76,221,242,1) 11.2%, rgba(92,121,255,1) 91.1% ); margin-top:200px;}
.yellow{background-image: radial-gradient( circle 534px at 7.8% 17.6%,  rgba(254,253,112,1) 1.7%, rgba(248,143,111,1) 91.8% );color: black; margin-top:300px;}

.one{margin-top:0;}
.two{margin-top:100px;}
.three{margin-top:200px;}
.four{margin-top:300px;}
.five{margin-top:400px;}
.six{margin-top:500px;}
.seven{margin-top:600px;}
.eight{margin-top:700px;opacity: 0; padding-bottom: 2000px;}

.wrapper{
  box-sizing: border-box;
}