Search

Search our shop

    This section doesn’t currently include any content. Add content to this section using the sidebar.

    Image caption appears here

    Add your deal, information or promotional text

    Slider

    @import url('https://fonts.googleapis.com/css?family=Playfair+Display:700|IBM+Plex+Sans:500&display=swap'); :root { --color-primary: #6B7A8F; --color-secondary: #101118; --color-accent: #1D1F2F; --color-focus: #6D64F7; --base-duration: 600ms; --base-ease: cubic-bezier(0.25, 0.46, 0.45, 0.84); } // ========================= // Global // ========================= *, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; } body { font-family: 'IBM Plex Sans', sans-serif; background-color: var(--color-secondary); } #app { align-items: center; display: flex; height: 100%; justify-content: center; overflow-x: hidden; width: 100%; } h1, h2, h3 { font-family: 'Playfair Display', serif; } .visuallyhidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; white-space: nowrap; width: 1px; } // ========================= // Icons // ========================= .icon { fill: var(--color-primary); width: 100%; } // ========================= // Buttons // ========================= .btn { background-color: var(--color-primary); border: none; border-radius: 0.125rem; color: white; cursor: pointer; font-family: inherit; font-size: inherit; padding: 1rem 2.5rem 1.125rem; &:focus { outline-color: var(--color-focus); outline-offset: 2px; outline-style: solid; outline-width: 3px; } &:active { transform: translateY(1px); } } // ========================= // Slider controls // ========================= .slider__controls { display: flex; justify-content: center; position: absolute; top: calc(100% + 1rem); width: 100%; .btn { --size: 3rem; align-items: center; background-color: transparent; border: 3px solid transparent; border-radius: 100%; display: flex; height: var(--size); padding: 0; width: var(--size); &:focus { border-color: var(--color-focus); outline: none; } &--previous > * { transform: rotate(180deg); } } } // ========================= // Slider // ========================= .slider { --slide-size: 70vmin; --slide-margin: 4vmin; height: var(--slide-size); margin: 0 auto; position: relative; width: var(--slide-size); } .slider__wrapper { display: flex; margin: 0 calc(var(--slide-margin) * -1); position: absolute; transition: transform var(--base-duration) cubic-bezier(0.25, 1, 0.35, 1); } // ========================= // Slide // ========================= .slide { align-items: center; color: white; display: flex; flex: 1; flex-direction: column; height: var(--slide-size); justify-content: center; margin: 0 var(--slide-margin); opacity: 0.25; position: relative; text-align: center; transition: opacity calc(var(--base-duration) / 2) var(--base-ease), transform calc(var(--base-duration) / 2) var(--base-ease); width: var(--slide-size); z-index: 1; &--previous, &--next { &:hover { opacity: 0.5; } } &--previous { cursor: w-resize; &:hover { transform: translateX(2%); } } &--next { cursor: e-resize; &:hover { transform: translateX(-2%); } } } .slide--current { --x: 0; --y: 0; --d: 50; opacity: 1; pointer-events: auto; user-select: auto; @media (hover: hover) { &:hover .slide__image-wrapper { transform: scale(1.025) translate( calc(var(--x) / var(--d) * 1px), calc(var(--y) / var(--d) * 1px) ); } } } .slide__image-wrapper { background-color: var(--color-accent); border-radius: 1%; height: 100%; left: 0%; overflow: hidden; position: absolute; top: 0%; transition: transform calc(var(--base-duration) / 4) var(--base-ease); width: 100%; } .slide__image { --d: 20; height: 110%; left: -5%; object-fit: cover; opacity: 0; pointer-events: none; position: absolute; top: -5%; transition: opacity var(--base-duration) var(--base-ease), transform var(--base-duration) var(--base-ease); user-select: none; width: 110%; @media (hover: hover) { .slide--current & { transform: translate( calc(var(--x) / var(--d) * 1px), calc(var(--y) / var(--d) * 1px) ); } } } .slide__headline { font-size: 8vmin; font-weight: 600; position: relative; } .slide__content { --d: 60; opacity: 0; padding: 4vmin; position: relative; transition: transform var(--base-duration) var(--base-ease); visibility: hidden; .slide--current & { animation: fade-in calc(var(--base-duration) / 2) var(--base-ease) forwards; visibility: visible; @media (hover: hover) { transform: translate( calc(var(--x) / var(--d) * -1px), calc(var(--y) / var(--d) * -1px) ); } } > * + * { margin-top: 2rem; } } // ========================= // Animations // ========================= @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }