LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Transitioning Gradient Background

CSS
html, body {
  margin: 0;
  padding: 0;
}

.additionalContent { 
  width: 100%;
  top: 40%;
  font-family: Helvetica, sans-serif;
  color: white;
  font-size: 24px;
  text-align: center;
  position: absolute;
  z-index: 3;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: opacity 2.5s ease;
  z-index: 0;
/*   mix-blend-mode: luminosity; */
}

.morning {
  background: linear-gradient(135deg, rgba(232,208,136,1) 0%, rgba(240,166,87,1) 100%);
}

.day {
  background: linear-gradient(135deg, rgba(71,164,180,1) 0%, rgba(90,130,191,1) 100%);
}

.sunset {
  background: linear-gradient(135deg, rgba(224,178,98,1) 0%, rgba(219,123,166,1) 100%);
}

.night {
  background: linear-gradient(135deg, rgba(90,130,191,1) 0%, rgba(120,128,188,1) 58%, rgba(141,127,185,1) 100%);
}
JS
const slides = document.querySelectorAll('.slide');

let active = 0;

function change(){
  active++;
  active = active % slides.length;
  slides.forEach((slide, index) => {
    if (index === active){
      slide.style.zIndex = 0;
      slide.style.opacity = 1;
    } else if (index === active - 1){
      slide.style.zIndex = -1;
      slide.style.opacity = 1;
    } else {
      slide.style.opacity = 0;
      slide.style.zIndex = -2;
    }
  });
}

change();

setInterval(change, 2500);
Host Instantly Drag and Drop Website Builder

 

Description

Using z-index and opacity to give the effect of transitioning for background gradients.
Term
Mon, 11/27/2017 - 22:13

Related Codes

Pen ID
Pen ID
Pen ID