@-webkit-keyframes reveal { from { transform: translateY(100%) } to { transform: translateY(0) } } @-moz-keyframes reveal { from { transform: translateY(100%) } to { transform: translateY(0) } } @-webkit-keyframes fading { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fading { from { opacity: 0; } to { opacity: 1; } } .homepage-banner-img, .animated-description, .animated-link { opacity: 0; animation: fading ease-in 1.6s; animation-fill-mode: forwards; animation-duration: 1.6s; } .reveal { overflow: hidden; } .reveal-gradient-01 { margin-top: 0; } .reveal-gradient-02 { margin-top: -20px; } @media only screen and (min-width: 1024px) { .reveal-gradient-01 { margin-top: -5px; } .reveal-gradient-02 { margin-top: -45px; } } .reveal__content { transform: translateY(100%); animation: reveal 1.6s cubic-bezier(1, 0, 0.3, 0.9) forwards; } .reveal:nth-child(1) .reveal__content { animation-delay: 0.1s } .reveal:nth-child(2) .reveal__content { animation-delay: 0.6s } .reveal:nth-child(3) .reveal__content { animation-delay: 1.2s; } .reveal:nth-child(4) .reveal__content { animation-delay: 1.8s; } .reveal:nth-child(5) .reveal__content { animation-delay: 2.4s; } .reveal:nth-child(6) .reveal__content { animation-delay: 3.0s; } .homepage-banner-img { animation-delay: 3.0s; } .animated-link, .animated-description { animation-delay: 3.0s; } const randomiseBanner = () => { const elementsToRandomise = [...document.querySelectorAll('.homepage-banner-item')]; elementsToRandomise.map(element => element.style.display = 'none'); elementsToRandomise[Math.floor(Math.random() * elementsToRandomise.length)].style.display = 'block'; } jQuery(function () { randomiseBanner(); });