/* * Hero slider of the school website templates: every slide change uses an effect picked at random * (hero-effects.js sets data-hero-fx on #heroCarousel before the change starts). "slide" is Bootstrap's own * movement and needs no rules. Written against Bootstrap's carousel classes (.carousel-item-next / -prev while * moving, .carousel-item-start / -end once it runs), the id keeps these rules above the design stylesheets. * The "illusion" effects (cube, flip, door, spiral, tunnel) are keyframe animations: the slide that leaves * waits for Bootstrap's own delay (opacity 0s 1s) while the keyframes play for the same second. */ @media (prefers-reduced-motion: no-preference) { /* -- cross-fading effects: the new slide comes in over the old one, which leaves once it is covered -- */ #heroCarousel[data-hero-fx="fade"] .carousel-item, #heroCarousel[data-hero-fx="zoom-in"] .carousel-item, #heroCarousel[data-hero-fx="zoom-out"] .carousel-item, #heroCarousel[data-hero-fx="blur"] .carousel-item { opacity: 0; transform: none; transition: opacity 1s ease-in-out, transform 1s ease-in-out, filter 1s ease-in-out; } #heroCarousel[data-hero-fx="fade"] .carousel-item.active, #heroCarousel[data-hero-fx="fade"] .carousel-item-next.carousel-item-start, #heroCarousel[data-hero-fx="fade"] .carousel-item-prev.carousel-item-end, #heroCarousel[data-hero-fx="zoom-in"] .carousel-item.active, #heroCarousel[data-hero-fx="zoom-in"] .carousel-item-next.carousel-item-start, #heroCarousel[data-hero-fx="zoom-in"] .carousel-item-prev.carousel-item-end, #heroCarousel[data-hero-fx="zoom-out"] .carousel-item.active, #heroCarousel[data-hero-fx="zoom-out"] .carousel-item-next.carousel-item-start, #heroCarousel[data-hero-fx="zoom-out"] .carousel-item-prev.carousel-item-end, #heroCarousel[data-hero-fx="blur"] .carousel-item.active, #heroCarousel[data-hero-fx="blur"] .carousel-item-next.carousel-item-start, #heroCarousel[data-hero-fx="blur"] .carousel-item-prev.carousel-item-end { z-index: 1; opacity: 1; filter: none; } /* the slide that leaves stays put until the new one has covered it (Bootstrap waits for this delay) */ #heroCarousel[data-hero-fx="fade"] .active.carousel-item-start, #heroCarousel[data-hero-fx="fade"] .active.carousel-item-end, #heroCarousel[data-hero-fx="zoom-in"] .active.carousel-item-start, #heroCarousel[data-hero-fx="zoom-in"] .active.carousel-item-end, #heroCarousel[data-hero-fx="zoom-out"] .active.carousel-item-start, #heroCarousel[data-hero-fx="zoom-out"] .active.carousel-item-end, #heroCarousel[data-hero-fx="blur"] .active.carousel-item-start, #heroCarousel[data-hero-fx="blur"] .active.carousel-item-end, #heroCarousel[data-hero-fx="wipe"] .active.carousel-item-start, #heroCarousel[data-hero-fx="wipe"] .active.carousel-item-end { z-index: 0; opacity: 0; transform: none; transition: opacity 0s 1s; } /* zoom in: the new slide settles from a close-up */ #heroCarousel[data-hero-fx="zoom-in"] .carousel-item-next:not(.carousel-item-start), #heroCarousel[data-hero-fx="zoom-in"] .carousel-item-prev:not(.carousel-item-end) { transform: scale(1.15); } /* zoom out: the new slide grows into place */ #heroCarousel[data-hero-fx="zoom-out"] .carousel-item-next:not(.carousel-item-start), #heroCarousel[data-hero-fx="zoom-out"] .carousel-item-prev:not(.carousel-item-end) { transform: scale(.88); } /* blur: the new slide comes into focus */ #heroCarousel[data-hero-fx="blur"] .carousel-item-next:not(.carousel-item-start), #heroCarousel[data-hero-fx="blur"] .carousel-item-prev:not(.carousel-item-end) { filter: blur(14px); } /* -- slide up: Bootstrap's movement turned sideways to vertical (new slide from below, backwards from above) -- */ #heroCarousel[data-hero-fx="slide-up"] .carousel-item-next:not(.carousel-item-start), #heroCarousel[data-hero-fx="slide-up"] .active.carousel-item-end { transform: translateY(100%); } #heroCarousel[data-hero-fx="slide-up"] .carousel-item-prev:not(.carousel-item-end), #heroCarousel[data-hero-fx="slide-up"] .active.carousel-item-start { transform: translateY(-100%); } /* -- wipe: the new slide is uncovered from the side it comes from -- */ #heroCarousel[data-hero-fx="wipe"] .carousel-item { transform: none; transition: clip-path 1s ease-in-out; } #heroCarousel[data-hero-fx="wipe"] .carousel-item-next, #heroCarousel[data-hero-fx="wipe"] .carousel-item-prev { z-index: 1; } #heroCarousel[data-hero-fx="wipe"] .carousel-item-next:not(.carousel-item-start) { clip-path: inset(0 0 0 100%); } #heroCarousel[data-hero-fx="wipe"] .carousel-item-prev:not(.carousel-item-end) { clip-path: inset(0 100% 0 0); } #heroCarousel[data-hero-fx="wipe"] .carousel-item-next.carousel-item-start, #heroCarousel[data-hero-fx="wipe"] .carousel-item-prev.carousel-item-end { clip-path: inset(0); } /* -- illusion effects: 3D turns and optical tricks. Bootstrap's sideways movement is switched off and the keyframes do the work, the same way for a step forward (…-next) and backward (…-prev) -- */ #heroCarousel[data-hero-fx="cube"] .carousel-inner, #heroCarousel[data-hero-fx="flip"] .carousel-inner, #heroCarousel[data-hero-fx="door"] .carousel-inner { perspective: 1800px; } #heroCarousel[data-hero-fx="cube"] .carousel-item, #heroCarousel[data-hero-fx="flip"] .carousel-item, #heroCarousel[data-hero-fx="door"] .carousel-item, #heroCarousel[data-hero-fx="spiral"] .carousel-item, #heroCarousel[data-hero-fx="tunnel"] .carousel-item { transform: none; transition: none; } #heroCarousel[data-hero-fx="cube"] .carousel-item-next, #heroCarousel[data-hero-fx="cube"] .carousel-item-prev, #heroCarousel[data-hero-fx="flip"] .carousel-item-next, #heroCarousel[data-hero-fx="flip"] .carousel-item-prev, #heroCarousel[data-hero-fx="door"] .carousel-item-next, #heroCarousel[data-hero-fx="door"] .carousel-item-prev, #heroCarousel[data-hero-fx="spiral"] .carousel-item-next, #heroCarousel[data-hero-fx="spiral"] .carousel-item-prev, #heroCarousel[data-hero-fx="tunnel"] .carousel-item-next, #heroCarousel[data-hero-fx="tunnel"] .carousel-item-prev { z-index: 1; } #heroCarousel[data-hero-fx="cube"] .active.carousel-item-start, #heroCarousel[data-hero-fx="cube"] .active.carousel-item-end, #heroCarousel[data-hero-fx="flip"] .active.carousel-item-start, #heroCarousel[data-hero-fx="flip"] .active.carousel-item-end, #heroCarousel[data-hero-fx="door"] .active.carousel-item-start, #heroCarousel[data-hero-fx="door"] .active.carousel-item-end, #heroCarousel[data-hero-fx="spiral"] .active.carousel-item-start, #heroCarousel[data-hero-fx="spiral"] .active.carousel-item-end, #heroCarousel[data-hero-fx="tunnel"] .active.carousel-item-start, #heroCarousel[data-hero-fx="tunnel"] .active.carousel-item-end { z-index: 0; opacity: 0; transition: opacity 0s 1s; } /* cube: both slides turn as the faces of a cube, the new one comes in from the side it is reached from */ #heroCarousel[data-hero-fx="cube"] .carousel-item-next { animation: hero-cube-in-next 1s ease-in-out both; } #heroCarousel[data-hero-fx="cube"] .carousel-item-prev { animation: hero-cube-in-prev 1s ease-in-out both; } #heroCarousel[data-hero-fx="cube"] .active.carousel-item-start { animation: hero-cube-out-next 1s ease-in-out both; } #heroCarousel[data-hero-fx="cube"] .active.carousel-item-end { animation: hero-cube-out-prev 1s ease-in-out both; } /* flip: the old slide turns edge-on, the new one turns out of the edge */ #heroCarousel[data-hero-fx="flip"] .carousel-item-next { animation: hero-flip-in-next 1s ease-in-out both; } #heroCarousel[data-hero-fx="flip"] .carousel-item-prev { animation: hero-flip-in-prev 1s ease-in-out both; } #heroCarousel[data-hero-fx="flip"] .active.carousel-item-start { animation: hero-flip-out-next 1s ease-in-out both; } #heroCarousel[data-hero-fx="flip"] .active.carousel-item-end { animation: hero-flip-out-prev 1s ease-in-out both; } /* door: the old slide swings open on a hinge and shows the new one behind it */ #heroCarousel[data-hero-fx="door"] .carousel-item-next, #heroCarousel[data-hero-fx="door"] .carousel-item-prev { animation: hero-door-in 1s ease-out both; } #heroCarousel[data-hero-fx="door"] .active.carousel-item-start { z-index: 2; transform-origin: 0 50%; animation: hero-door-out-next 1s ease-in-out both; } #heroCarousel[data-hero-fx="door"] .active.carousel-item-end { z-index: 2; transform-origin: 100% 50%; animation: hero-door-out-prev 1s ease-in-out both; } /* spiral: the old slide spins away and grows, the new one spins in from small */ #heroCarousel[data-hero-fx="spiral"] .carousel-item-next { animation: hero-spiral-in-next 1s ease-in-out both; } #heroCarousel[data-hero-fx="spiral"] .carousel-item-prev { animation: hero-spiral-in-prev 1s ease-in-out both; } #heroCarousel[data-hero-fx="spiral"] .active.carousel-item-start { animation: hero-spiral-out-next 1s ease-in-out both; } #heroCarousel[data-hero-fx="spiral"] .active.carousel-item-end { animation: hero-spiral-out-prev 1s ease-in-out both; } /* tunnel: flying through the old slide into the new one */ #heroCarousel[data-hero-fx="tunnel"] .carousel-item-next, #heroCarousel[data-hero-fx="tunnel"] .carousel-item-prev { animation: hero-tunnel-in 1s ease-in-out both; } #heroCarousel[data-hero-fx="tunnel"] .active.carousel-item-start, #heroCarousel[data-hero-fx="tunnel"] .active.carousel-item-end { animation: hero-tunnel-out 1s ease-in-out both; } @keyframes hero-cube-in-next { from { transform: translateX(100%) rotateY(90deg); } to { transform: none; } } @keyframes hero-cube-in-prev { from { transform: translateX(-100%) rotateY(-90deg); } to { transform: none; } } @keyframes hero-cube-out-next { from { transform: none; } to { transform: translateX(-100%) rotateY(-90deg); } } @keyframes hero-cube-out-prev { from { transform: none; } to { transform: translateX(100%) rotateY(90deg); } } @keyframes hero-flip-out-next { 0% { transform: none; opacity: 1; } 49.9% { transform: rotateY(-90deg); opacity: 1; } 50%, 100% { transform: rotateY(-90deg); opacity: 0; } } @keyframes hero-flip-out-prev { 0% { transform: none; opacity: 1; } 49.9% { transform: rotateY(90deg); opacity: 1; } 50%, 100% { transform: rotateY(90deg); opacity: 0; } } @keyframes hero-flip-in-next { 0%, 49.9% { transform: rotateY(90deg); opacity: 0; } 50% { transform: rotateY(90deg); opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes hero-flip-in-prev { 0%, 49.9% { transform: rotateY(-90deg); opacity: 0; } 50% { transform: rotateY(-90deg); opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes hero-door-out-next { from { transform: none; opacity: 1; } 75% { opacity: 1; } to { transform: rotateY(-105deg); opacity: 0; } } @keyframes hero-door-out-prev { from { transform: none; opacity: 1; } 75% { opacity: 1; } to { transform: rotateY(105deg); opacity: 0; } } @keyframes hero-door-in { from { transform: scale(.9); opacity: .4; } to { transform: none; opacity: 1; } } @keyframes hero-spiral-in-next { from { transform: rotate(-14deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes hero-spiral-in-prev { from { transform: rotate(14deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes hero-spiral-out-next { from { transform: none; opacity: 1; } to { transform: rotate(14deg) scale(1.7); opacity: 0; } } @keyframes hero-spiral-out-prev { from { transform: none; opacity: 1; } to { transform: rotate(-14deg) scale(1.7); opacity: 0; } } @keyframes hero-tunnel-in { from { transform: scale(.45); opacity: 0; filter: blur(8px); } to { transform: none; opacity: 1; filter: none; } } @keyframes hero-tunnel-out { from { transform: none; opacity: 1; filter: none; } to { transform: scale(2.6); opacity: 0; filter: blur(8px); } } }