|
|
| Line 2: |
Line 2: |
| | <html> | | <html> |
| | <style type="text/css"> | | <style type="text/css"> |
| − | :root {
| |
| − | --z-distance: 8.519vw;
| |
| − | --from-left: 1;
| |
| − | --mobile-bkp: 650px;
| |
| − | }
| |
| − |
| |
| − | *, *::before, *::after {
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| | body { | | body { |
| − | min-height: 100vh;
| + | background: #000; |
| − | margin: 0;
| + | overflow: hidden; |
| − | padding: 0;
| + | } |
| − | overflow: hidden;
| + | |
| − | font-family: arial, serif;
| + | |
| − | font-size: calc(14px + .3vw);
| + | |
| − | }
| + | |
| | | | |
| − | .slider {
| + | #showcase { |
| − | width: 100vw;
| + | display: flex; |
| − | height: 100vh;
| + | justify-content: center; |
| − | display: -webkit-box;
| + | align-items: center; |
| − | display: -ms-flexbox;
| + | margin: 0 auto; |
| − | display: flex;
| + | width: 1000px; |
| − | -webkit-perspective: 1000px;
| + | height: 700px; |
| − | perspective: 1000px;
| + | } |
| − | -webkit-transform-style: preserve-3d;
| + | |
| − | transform-style: preserve-3d;
| + | |
| − | }
| + | |
| − | .slider::before, .slider::after {
| + | |
| − | content: '';
| + | |
| − | left: -1vw;
| + | |
| − | top: -1vh;
| + | |
| − | display: block;
| + | |
| − | position: absolute;
| + | |
| − | width: 102vw;
| + | |
| − | height: 102vh;
| + | |
| − | background-position: center;
| + | |
| − | background-size: cover;
| + | |
| − | will-change: opacity;
| + | |
| − | z-index: -1;
| + | |
| − | box-shadow: 0 0 0 50vmax rgba(0, 0, 0, 0.7) inset;
| + | |
| − | }
| + | |
| − | .slider::before {
| + | |
| − | background-image: var(--img-prev);
| + | |
| − | }
| + | |
| − | .slider::after {
| + | |
| − | -webkit-transition: opacity 0.7s;
| + | |
| − | transition: opacity 0.7s;
| + | |
| − | opacity: 0;
| + | |
| − | background-image: var(--img-next);
| + | |
| − | }
| + | |
| − | .slider--bg-next::after {
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | .slider__content {
| + | |
| − | margin: auto;
| + | |
| − | width: 65vw;
| + | |
| − | height: 32.5vw;
| + | |
| − | max-height: 60vh;
| + | |
| − | will-change: transform;
| + | |
| − | -webkit-transform-style: preserve-3d;
| + | |
| − | transform-style: preserve-3d;
| + | |
| − | pointer-events: none;
| + | |
| − | -webkit-transform: translateZ(var(--z-distance));
| + | |
| − | transform: translateZ(var(--z-distance));
| + | |
| − | }
| + | |
| − | .slider__images {
| + | |
| − | overflow: hidden;
| + | |
| − | position: absolute;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | z-index: 0;
| + | |
| − | box-shadow: 0 0 5em #000;
| + | |
| − | }
| + | |
| − | .slider__images-item {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | will-change: transform;
| + | |
| − | -webkit-transition-timing-function: ease-in;
| + | |
| − | transition-timing-function: ease-in;
| + | |
| − | visibility: hidden;
| + | |
| − | }
| + | |
| − | .slider__images-item img {
| + | |
| − | display: block;
| + | |
| − | position: relative;
| + | |
| − | left: -1em;
| + | |
| − | top: -1em;
| + | |
| − | width: calc(100% + 1em * 2);
| + | |
| − | height: calc(100% + 1em * 2);
| + | |
| − | -o-object-fit: cover;
| + | |
| − | object-fit: cover;
| + | |
| − | will-change: transform;
| + | |
| − | }
| + | |
| − | .slider__images-item--active {
| + | |
| − | z-index: 20;
| + | |
| − | visibility: visible;
| + | |
| − | }
| + | |
| − | .slider__images-item--subactive {
| + | |
| − | z-index: 15;
| + | |
| − | visibility: visible;
| + | |
| − | }
| + | |
| − | .slider__images-item--next {
| + | |
| − | -webkit-transform: translateX(100%);
| + | |
| − | transform: translateX(100%);
| + | |
| − | }
| + | |
| − | .slider__images-item--prev {
| + | |
| − | -webkit-transform: translateX(-100%);
| + | |
| − | transform: translateX(-100%);
| + | |
| − | }
| + | |
| − | .slider__images-item--transit {
| + | |
| − | -webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
| + | |
| − | transition: opacity 0.7s, -webkit-transform 0.7s;
| + | |
| − | transition: transform 0.7s, opacity 0.7s;
| + | |
| − | transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s;
| + | |
| − | }
| + | |
| − | .slider__text {
| + | |
| − | position: relative;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | .slider__text-item {
| + | |
| − | position: absolute;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | padding: 0.5em;
| + | |
| − | -webkit-perspective: 1000px;
| + | |
| − | perspective: 1000px;
| + | |
| − | -webkit-transform-style: preserve-3d;
| + | |
| − | transform-style: preserve-3d;
| + | |
| − | }
| + | |
| − | .slider__text-item > * {
| + | |
| − | overflow: hidden;
| + | |
| − | position: absolute;
| + | |
| − | }
| + | |
| − | .slider__text-item h3, .slider__text-item p {
| + | |
| − | -webkit-transition: -webkit-transform 0.35s ease-out;
| + | |
| − | transition: -webkit-transform 0.35s ease-out;
| + | |
| − | transition: transform 0.35s ease-out;
| + | |
| − | transition: transform 0.35s ease-out, -webkit-transform 0.35s ease-out;
| + | |
| − | line-height: 1.5;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | .slider__text-item h3 {
| + | |
| − | background-color: rgba(255, 255, 255, 0.5);
| + | |
| − | }
| + | |
| − | .slider__text-item p {
| + | |
| − | font-family: 'Open Sans', sans-serif;
| + | |
| − | padding: 1em;
| + | |
| − | color: white;
| + | |
| − | text-align: center;
| + | |
| − | background-color: rgba(0, 0, 0, 0.5);
| + | |
| − | }
| + | |
| − | .slider__text-item h3::before, .slider__text-item p::before {
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | transform: translateX(0);
| + | |
| − | -webkit-transition: -webkit-transform 0.35s ease-out 0.28s;
| + | |
| − | transition: -webkit-transform 0.35s ease-out 0.28s;
| + | |
| − | transition: transform 0.35s ease-out 0.28s;
| + | |
| − | transition: transform 0.35s ease-out 0.28s, -webkit-transform 0.35s ease-out 0.28s;
| + | |
| − | }
| + | |
| − | .slider__text-item h3::before {
| + | |
| − | background-color: #000;
| + | |
| − | }
| + | |
| − | .slider__text-item p::before {
| + | |
| − | background-color: #fff;
| + | |
| − | }
| + | |
| − | .slider__text-item h3 {
| + | |
| − | margin: 0;
| + | |
| − | font-size: 3.5em;
| + | |
| − | padding: 0 .3em;
| + | |
| − | position: relative;
| + | |
| − | font-weight: 700;
| + | |
| − | -webkit-transform: translateX(-100%);
| + | |
| − | transform: translateX(-100%);
| + | |
| − | }
| + | |
| − | .slider__text-item p {
| + | |
| − | margin: 0;
| + | |
| − | -webkit-transform: translateX(100%);
| + | |
| − | transform: translateX(100%);
| + | |
| − | }
| + | |
| − | .slider__text-item-head {
| + | |
| − | top: -0.5em;
| + | |
| − | -webkit-transform: translateZ(3em);
| + | |
| − | transform: translateZ(3em);
| + | |
| − | -webkit-clip-path: polygon(0 0, 0.5em 100%, 100% 100%, calc(100% - .3em) 0.3em);
| + | |
| − | clip-path: polygon(0 0, 0.5em 100%, 100% 100%, calc(100% - .3em) 0.3em);
| + | |
| − | }
| + | |
| − | .slider__text-item-info {
| + | |
| − | bottom: 0;
| + | |
| − | right: 0;
| + | |
| − | max-width: 75%;
| + | |
| − | min-width: -webkit-min-content;
| + | |
| − | min-width: -moz-min-content;
| + | |
| − | min-width: min-content;
| + | |
| − | -webkit-transform: translateZ(2em);
| + | |
| − | transform: translateZ(2em);
| + | |
| − | -webkit-clip-path: polygon(0.5em 0, 100% 0%, calc(100% - .5em) 100%, 0 calc(100% - .5em));
| + | |
| − | clip-path: polygon(0.5em 0, 100% 0%, calc(100% - .5em) 100%, 0 calc(100% - .5em));
| + | |
| − | }
| + | |
| − | .slider__text-item--active h3, .slider__text-item--active p {
| + | |
| − | -webkit-transform: translateX(0);
| + | |
| − | transform: translateX(0);
| + | |
| − | }
| + | |
| − | .slider__text-item--active h3::before {
| + | |
| − | -webkit-transform: translateX(100%);
| + | |
| − | transform: translateX(100%);
| + | |
| − | }
| + | |
| − | .slider__text-item--active p::before {
| + | |
| − | -webkit-transform: translateX(-100%);
| + | |
| − | transform: translateX(-100%);
| + | |
| − | }
| + | |
| − | .slider__text-item--backwards h3::before, .slider__text-item--backwards p::before {
| + | |
| − | -webkit-transition: -webkit-transform 0.35s ease-in;
| + | |
| − | transition: -webkit-transform 0.35s ease-in;
| + | |
| − | transition: transform 0.35s ease-in;
| + | |
| − | transition: transform 0.35s ease-in, -webkit-transform 0.35s ease-in;
| + | |
| − | }
| + | |
| − | .slider__text-item--backwards h3, .slider__text-item--backwards p {
| + | |
| − | -webkit-transition: -webkit-transform 0.35s ease-in 0.35s;
| + | |
| − | transition: -webkit-transform 0.35s ease-in 0.35s;
| + | |
| − | transition: transform 0.35s ease-in 0.35s;
| + | |
| − | transition: transform 0.35s ease-in 0.35s, -webkit-transform 0.35s ease-in 0.35s;
| + | |
| − | }
| + | |
| − | .slider__nav {
| + | |
| − | position: absolute;
| + | |
| − | left: 0;
| + | |
| − | top: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .slider__nav-arrows {
| + | |
| − | display: -webkit-box;
| + | |
| − | display: -ms-flexbox;
| + | |
| − | display: flex;
| + | |
| − | -webkit-box-pack: justify;
| + | |
| − | -ms-flex-pack: justify;
| + | |
| − | justify-content: space-between;
| + | |
| − | width: 100%;
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − | .slider__nav-arrow {
| + | |
| − | height: 100vh;
| + | |
| − | width: 50vw;
| + | |
| − | text-indent: -9999px;
| + | |
| − | white-space: nowrap;
| + | |
| − | }
| + | |
| − | .slider__nav-arrow--left {
| + | |
| − | --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 4 4'%3E %3Cpolyline points='3 1 1 2 3 3' stroke='white' stroke-width='.3' stroke-opacity='.5' fill='none'%3E%3C/polyline%3E %3C/svg%3E");
| + | |
| − | cursor: var(--arrow) 40 40, auto;
| + | |
| − | }
| + | |
| − | .slider__nav-arrow--right {
| + | |
| − | --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 4 4'%3E %3Cpolyline points='1 1 3 2 1 3' stroke='white' stroke-width='.3' stroke-opacity='.5' fill='none'%3E%3C/polyline%3E %3C/svg%3E");
| + | |
| − | cursor: var(--arrow) 40 40, auto;
| + | |
| − | }
| + | |
| − | .slider__nav-dots {
| + | |
| − | margin-top: 88vh;
| + | |
| − | display: -webkit-inline-box;
| + | |
| − | display: -ms-inline-flexbox;
| + | |
| − | display: inline-flex;
| + | |
| − | position: relative;
| + | |
| − | padding: 1em;
| + | |
| − | pointer-events: none;
| + | |
| − | }
| + | |
| − | .slider__nav-dots::before {
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | left: calc(1em + 1em + 2px);
| + | |
| − | top: calc(1em + 2px);
| + | |
| − | width: calc(1em - 2px * 2);
| + | |
| − | height: calc(1em / 2 - 2px * 2);
| + | |
| − | background-color: rgba(255, 255, 255, 0.9);
| + | |
| − | -webkit-transition: -webkit-transform 0.7s ease-out;
| + | |
| − | transition: -webkit-transform 0.7s ease-out;
| + | |
| − | transition: transform 0.7s ease-out;
| + | |
| − | transition: transform 0.7s ease-out, -webkit-transform 0.7s ease-out;
| + | |
| − | -webkit-transform: translateX(calc((1em + 1em * 2) * (var(--from-left) - 1)));
| + | |
| − | transform: translateX(calc((1em + 1em * 2) * (var(--from-left) - 1)));
| + | |
| − | }
| + | |
| − | .slider__nav-dot {
| + | |
| − | margin: 0 1em;
| + | |
| − | width: 1em;
| + | |
| − | height: 0.5em;
| + | |
| − | border: 2px solid rgba(255, 255, 255, 0.5);
| + | |
| − | /*
| + | |
| − | The cursor is not the default one because of a weird bug
| + | |
| − | related to custom cursors above
| + | |
| − | */
| + | |
| − | cursor: crosshair;
| + | |
| − | pointer-events: all;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | .slider__nav-dot:hover {
| + | |
| − | border-color: rgba(255, 255, 255, 0.7);
| + | |
| − | }
| + | |
| − | .slider__nav-dot:active {
| + | |
| − | border-color: rgba(255, 255, 255, 0.5);
| + | |
| − | }
| + | |
| | | | |
| − | @media only screen and (max-width: 650px) {
| + | section { |
| − | .slider::before,
| + | display: inline-block; |
| − | .slider::after {
| + | position: relative; |
| − | display: none;
| + | width: 25%; |
| − | }
| + | height: 100%; |
| | + | background-size: cover; |
| | + | } |
| | + | section:after { |
| | + | content: ''; |
| | + | position: absolute; |
| | + | top: 0; |
| | + | width: 100%; |
| | + | height: 100%; |
| | + | -moz-transition: all 0.5s; |
| | + | -o-transition: all 0.5s; |
| | + | -webkit-transition: all 0.5s; |
| | + | transition: all 0.5s; |
| | + | } |
| | | | |
| − | .slider__content {
| + | section:nth-child(1) { |
| − | width: 100vw;
| + | -moz-animation: section-1 8s both infinite; |
| − | height: 100vh;
| + | -webkit-animation: section-1 8s both infinite; |
| − | max-height: 100vh;
| + | animation: section-1 8s both infinite; |
| − | }
| + | } |
| | | | |
| − | .slider__text-item-info {
| + | @-moz-keyframes section-1 { |
| − | bottom: 50%;
| + | 0%, 20%, 100% { |
| − | left: 50%;
| + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| − | -webkit-transform: translate(-50%, 50%);
| + | -webkit-clip-path: polygon(23% 18%, 95% 13%, 100% 91%, 55% 87%); |
| − | transform: translate(-50%, 50%);
| + | } |
| − | }
| + | 25%, 45% { |
| − | .slider__text-item-info p {
| + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| − | padding: 1em .8em;
| + | -webkit-clip-path: polygon(95% 10%, 100% 80%, 62% 77%, 45% 12%); |
| − | }
| + | } |
| | + | 50%, 70% { |
| | + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| | + | -webkit-clip-path: polygon(100% 67%, 48% 63%, 28% 9%, 95% 3%); |
| | + | } |
| | + | 75%, 95% { |
| | + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| | + | -webkit-clip-path: polygon(78% 72%, 58% 34%, 95% 27%, 100% 73%); |
| | + | } |
| | + | } |
| | + | @-webkit-keyframes section-1 { |
| | + | 0%, 20%, 100% { |
| | + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| | + | -webkit-clip-path: polygon(23% 18%, 95% 13%, 100% 91%, 55% 87%); |
| | + | } |
| | + | 25%, 45% { |
| | + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| | + | -webkit-clip-path: polygon(95% 10%, 100% 80%, 62% 77%, 45% 12%); |
| | + | } |
| | + | 50%, 70% { |
| | + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| | + | -webkit-clip-path: polygon(100% 67%, 48% 63%, 28% 9%, 95% 3%); |
| | + | } |
| | + | 75%, 95% { |
| | + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| | + | -webkit-clip-path: polygon(78% 72%, 58% 34%, 95% 27%, 100% 73%); |
| | + | } |
| | + | } |
| | + | @keyframes section-1 { |
| | + | 0%, 20%, 100% { |
| | + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| | + | -webkit-clip-path: polygon(23% 18%, 95% 13%, 100% 91%, 55% 87%); |
| | + | } |
| | + | 25%, 45% { |
| | + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| | + | -webkit-clip-path: polygon(95% 10%, 100% 80%, 62% 77%, 45% 12%); |
| | + | } |
| | + | 50%, 70% { |
| | + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| | + | -webkit-clip-path: polygon(100% 67%, 48% 63%, 28% 9%, 95% 3%); |
| | + | } |
| | + | 75%, 95% { |
| | + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 0% 0%; |
| | + | -webkit-clip-path: polygon(78% 72%, 58% 34%, 95% 27%, 100% 73%); |
| | + | } |
| | + | } |
| | + | section:nth-child(2) { |
| | + | -moz-animation: section-2 8s both infinite; |
| | + | -webkit-animation: section-2 8s both infinite; |
| | + | animation: section-2 8s both infinite; |
| | + | } |
| | | | |
| − | .slider__text-item-head {
| + | @-moz-keyframes section-2 { |
| − | top: 5vh;
| + | 0%, 20%, 100% { |
| − | left: 10vw;
| + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| − | -webkit-transform: translateZ(0);
| + | -webkit-clip-path: polygon(0% 7%, 100% 9%, 95% 93%, 5% 95%); |
| − | transform: translateZ(0);
| + | } |
| − | }
| + | 25%, 45% { |
| − | .slider__text-item-head h3 {
| + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| − | font-size: 2.5em;
| + | -webkit-clip-path: polygon(100% 3%, 95% 95%, 5% 90%, 0% 5%); |
| − | }
| + | } |
| − | | + | 50%, 70% { |
| − | .slider__nav-dots {
| + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| − | background-color: rgba(0, 0, 0, 0.3);
| + | -webkit-clip-path: polygon(95% 83%, 5% 78%, 0% 6%, 100% 11%); |
| − | }
| + | } |
| | + | 75%, 95% { |
| | + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| | + | -webkit-clip-path: polygon(5% 79%, 0% 21%, 100% 16%, 95% 83%); |
| | + | } |
| | + | } |
| | + | @-webkit-keyframes section-2 { |
| | + | 0%, 20%, 100% { |
| | + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| | + | -webkit-clip-path: polygon(0% 7%, 100% 9%, 95% 93%, 5% 95%); |
| | + | } |
| | + | 25%, 45% { |
| | + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| | + | -webkit-clip-path: polygon(100% 3%, 95% 95%, 5% 90%, 0% 5%); |
| | + | } |
| | + | 50%, 70% { |
| | + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| | + | -webkit-clip-path: polygon(95% 83%, 5% 78%, 0% 6%, 100% 11%); |
| | + | } |
| | + | 75%, 95% { |
| | + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| | + | -webkit-clip-path: polygon(5% 79%, 0% 21%, 100% 16%, 95% 83%); |
| | + | } |
| | + | } |
| | + | @keyframes section-2 { |
| | + | 0%, 20%, 100% { |
| | + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| | + | -webkit-clip-path: polygon(0% 7%, 100% 9%, 95% 93%, 5% 95%); |
| | + | } |
| | + | 25%, 45% { |
| | + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| | + | -webkit-clip-path: polygon(100% 3%, 95% 95%, 5% 90%, 0% 5%); |
| | + | } |
| | + | 50%, 70% { |
| | + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| | + | -webkit-clip-path: polygon(95% 83%, 5% 78%, 0% 6%, 100% 11%); |
| | + | } |
| | + | 75%, 95% { |
| | + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 33.33333% 0%; |
| | + | -webkit-clip-path: polygon(5% 79%, 0% 21%, 100% 16%, 95% 83%); |
| | + | } |
| | + | } |
| | + | section:nth-child(3) { |
| | + | -moz-animation: section-3 8s both infinite; |
| | + | -webkit-animation: section-3 8s both infinite; |
| | + | animation: section-3 8s both infinite; |
| | + | } |
| | | | |
| − | .slider__nav-arrow {
| + | @-moz-keyframes section-3 { |
| − | width: 10vw;
| + | 0%, 20%, 100% { |
| − | position: relative;
| + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | cursor: auto;
| + | -webkit-clip-path: polygon(5% 11%, 100% 14%, 95% 88%, 0% 91%); |
| − | }
| + | } |
| − | .slider__nav-arrow:active {
| + | 25%, 45% { |
| − | -webkit-filter: brightness(0.5);
| + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | filter: brightness(0.5);
| + | -webkit-clip-path: polygon(100% 14%, 95% 84%, 0% 91%, 5% 7%); |
| − | }
| + | } |
| − | .slider__nav-arrow::before {
| + | 50%, 70% { |
| − | content: '';
| + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | background-image: var(--arrow);
| + | -webkit-clip-path: polygon(95% 79%, 0% 86%, 5% 7%, 100% 3%); |
| − | background-size: cover;
| + | } |
| − | width: 8vw;
| + | 75%, 95% { |
| − | height: 8vw;
| + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | position: absolute;
| + | -webkit-clip-path: polygon(0% 85%, 5% 14%, 100% 3%, 95% 95%); |
| − | top: 50%;
| + | } |
| − | left: 50%;
| + | } |
| − | -webkit-transform: translate(-50%, -50%);
| + | @-webkit-keyframes section-3 { |
| − | transform: translate(-50%, -50%);
| + | 0%, 20%, 100% { |
| − | }
| + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | .slider__nav-arrow--left {
| + | -webkit-clip-path: polygon(5% 11%, 100% 14%, 95% 88%, 0% 91%); |
| − | background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.7) 0, transparent 100%);
| + | } |
| − | background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0, transparent 100%);
| + | 25%, 45% { |
| − | }
| + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | .slider__nav-arrow--left:active {
| + | -webkit-clip-path: polygon(100% 14%, 95% 84%, 0% 91%, 5% 7%); |
| − | background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.9) 0, transparent 100%);
| + | } |
| − | background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0, transparent 100%);
| + | 50%, 70% { |
| − | }
| + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | .slider__nav-arrow--right {
| + | -webkit-clip-path: polygon(95% 79%, 0% 86%, 5% 7%, 100% 3%); |
| − | background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.7) 0, transparent 100%);
| + | } |
| − | background-image: linear-gradient(to left, rgba(0, 0, 0, 0.7) 0, transparent 100%);
| + | 75%, 95% { |
| − | }
| + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | .slider__nav-arrow--right:active {
| + | -webkit-clip-path: polygon(0% 85%, 5% 14%, 100% 3%, 95% 95%); |
| − | background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.9) 0, transparent 100%);
| + | } |
| − | background-image: linear-gradient(to left, rgba(0, 0, 0, 0.9) 0, transparent 100%);
| + | } |
| − | }
| + | @keyframes section-3 { |
| − | }
| + | 0%, 20%, 100% { |
| − | </style>
| + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | | + | -webkit-clip-path: polygon(5% 11%, 100% 14%, 95% 88%, 0% 91%); |
| − | <div class="slider" id="slider" style="--img-prev:url(https://lh3.googleusercontent.com/aC9nyW5dhaYFmWD8fcf8DApjpH08eHEkbCHqmUPHRQ5T3jK-QyNKZYVMehmrvyPdEA_KxWvgZ3_kyOOYOAv99Ow3UoKSvEloleVKGSfLOwOyDV3Q6Dwi1G-NYoa9-t_ofmmskE6BYnVIOnIz2HWlMcijzIEwvKAL_R4z63DaLgG0z_OcGiSQHunwGAPXrBQUv42ZXuIMODq4zxDHczSxJ72b0-_udtdQK3JuT2X8nXCwFoF7GxmOpzXS0H5f50DuCbXoXcx-O7bgBMCXZdMpTxB27-wdXeLmxpYUySXgjSN2NAKmK16DmGLYvw5tMlrqwb8h4MJEEbXjP1pjPxXsahb7UZseEGyn80uLjATANJvusyJWCtzkkxYXPz-yI1rDvfEJKe2eyA-5AvFlzFBSwBMASn8f7mXinUrXMMREkJQjoi89NfZ91G7253OEVQOqcWxddiYtcHCO5v6Pl3QfV2SUTWXgggscDSY2ezjSPpYERNTXnIM_aCyWmIG7ybrfqOB0eVYBAgynyuPVbjd4KuZWZq2Dfu33HX1RuPKglbOuZGD1QbpJnruvUVkAmjDXI40ENN7X=w1600-h766)">
| + | } |
| − | <div class="slider__content" id="slider-content">
| + | 25%, 45% { |
| − | <div class="slider__images">
| + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | <div class="slider__images-item slider__images-item--active" data-id="1"><img src="https://lh3.googleusercontent.com/aC9nyW5dhaYFmWD8fcf8DApjpH08eHEkbCHqmUPHRQ5T3jK-QyNKZYVMehmrvyPdEA_KxWvgZ3_kyOOYOAv99Ow3UoKSvEloleVKGSfLOwOyDV3Q6Dwi1G-NYoa9-t_ofmmskE6BYnVIOnIz2HWlMcijzIEwvKAL_R4z63DaLgG0z_OcGiSQHunwGAPXrBQUv42ZXuIMODq4zxDHczSxJ72b0-_udtdQK3JuT2X8nXCwFoF7GxmOpzXS0H5f50DuCbXoXcx-O7bgBMCXZdMpTxB27-wdXeLmxpYUySXgjSN2NAKmK16DmGLYvw5tMlrqwb8h4MJEEbXjP1pjPxXsahb7UZseEGyn80uLjATANJvusyJWCtzkkxYXPz-yI1rDvfEJKe2eyA-5AvFlzFBSwBMASn8f7mXinUrXMMREkJQjoi89NfZ91G7253OEVQOqcWxddiYtcHCO5v6Pl3QfV2SUTWXgggscDSY2ezjSPpYERNTXnIM_aCyWmIG7ybrfqOB0eVYBAgynyuPVbjd4KuZWZq2Dfu33HX1RuPKglbOuZGD1QbpJnruvUVkAmjDXI40ENN7X=w1600-h766"/></div>
| + | -webkit-clip-path: polygon(100% 14%, 95% 84%, 0% 91%, 5% 7%); |
| − | <div class="slider__images-item" data-id="2"><img src="https://lh3.googleusercontent.com/4Bn4zdADhWhegRcmxS1xmHxbxIBzEgB8ADfeaCmiwT9iF7y2mN9Wc5L7gFLxUo2bgl3V-97EFrOyE9OXfkvip3pkpNxYe50GiapeT41p7D7tNJm3oEdV8Y-7toGyvz0UZ8VgDACVTUEdzzVVm2NtQSCroSvmo4gL3u0ty-KAyKnah9vIitfw2Rs1MuNzQq6vmzUcw1_4obGAKmk_Nx0dD33RSy1jbT8D61kxERbOu0pHUciywIO2EeUX8iOcJfHHQwVW3lGYcZKSiimGjBUvzHILrSpVZQ1xUlj0U21EeY4Hil1ZaJQaX47hQezcxZj7H8GyWhNv2TzQ7EU8DS3_MonCLxXlnXfk-80nncPa8DxN_UlIzJeOPDiWPSLXFaDJn_ywCutx-0onw5rcSC815_krGHXKt3L_weD5pq_e_2WI3BRZndcR2jOYLz9BiUp52ouDBIDw2OzrDtUgxne9NaQ2tOJwaIR26N1un92ChTLhXZF2F2NoS3Do96TY6A5dP6RsXQzK6G0Z6oj5XtYx-p--PrdP8wiDPAzOqXQkXbJaX8l2qPi3nTYrD8rB-eKyL2E1q9xQ=w1600-h766"/></div>
| + | } |
| − | <div class="slider__images-item" data-id="3"><img src="https://lh3.googleusercontent.com/r29_BOXT9GjEA49-KbPtzHtTxD16dilHpFROmoJyZdQbvCelXqgG8bcApe8OgIY-avTrFOUWO-lDsmI-muMIgRVc5IFHCIyrOR18DrnwTLh70aSNY6cTY0bNbyt4QCXBlj9R4fmA8PJMRYkTA-nB5zSvlZii9NnP9kG8w__DUrYfo9IbOZAxGY_DsheGuHA0CSWLB-lQwvHo7_sSNabsiZJ2C_878r7uEfaIR6XkjcyrWMKi529UtPl9Ikln3cXphy9HrzElIL6200dGL9GHiMMoASseLp_Z950xjT2smzTrOJSADFCG9EmScicKDbFTYZH6gyc2DEP0mUFRArhTSPa4TIUwLy9KR8bG7kV-ljmSPKv4pbtH4ByXgQ5DEm5ydOkR-DTkYkLBkcFL8cjiBPPuUdK3xkjoOciwjglMF5xAXhpnTj0VUnk3RWc9YDD-AQI2uvDatV_Ae0zzLQUIm2gfV3QiDXdkkzeLWsRmCXrr0bFf42s_1NrWD0GLfrTtHNqzBCfYbAWtjeBxHfMxlESqJLAvGketLMscx5PndptC0MRhGZESjWdRUE3kNxg7PA9EhTZg=w1600-h766"/></div>
| + | 50%, 70% { |
| − | <div class="slider__images-item" data-id="4"><img src="https://lh3.googleusercontent.com/7MsdX710gvwl8YRxuiPIlIbGP8d3ypDASWqIOad9SpHHAPwMATjCoftyvoHjpy9eeD8aJVxVup-Zb02QMeBSFOXyqOlVc8ib3TVIXtktozy6sJK07H8Jo8UlJSpYcfgUq83Z5rJOiGQQAaZPhRYUcCR0aenU8Eh8aTuqvttfZA-PjsU39q5_I1HcpWDF1mXIxJTmlGqsoQNIuL75GDE-I2im2tAjEk6bkJkJEbDntxB5cLJEfV8TuKRsQwenkiN5opF4ttHGXYtJlS7adu-IO4wVIFcEOzdx4c1Eri3O6f9qjsTpXQH3BmpkTaLAtL5xzJit9qa0a4Dp-aZOZp1QzWeB6-dLM5HRxSiPFkku3S1umwm_GBeY3glxd3Ftata1mFIxpis6gR76oTiNO33vjxn1UZXYhCQUDByGyyuE6WOoPtu9iXJxfmUF9UMXiXVl7qyH-U7NJmq18qcU0Q6U7H3VucD_d2Vg8WTZmqVq7aA4jQ7MLuQASgMZIerxgwV_aW98z7xsS8isHgF9rN4Qtez18OjyabQxRXlC6shvRTqTDCpt1MPlfBWwyR2BKO3dHzk7h8T5=w1600-h766"/></div>
| + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | <div class="slider__images-item" data-id="5"><img src="https://lh3.googleusercontent.com/lqd5x1eNHsfzWpPeHNPe4u-ycQh1LyxWLp_mXi8tLvQGh4aNCbANfSfSWQdqhQy7c2J2V3a4dGIw6tRcMJCpFvsRrLLpXcFgHIjWpCWoxtgWC--0tMjb6W-YYKJX55zIhS1omxmSGPuQx1sZtsAL-XnRiqXbEIjGX1A_vbDObqVEc8TP3nVsraN5xLtektJbccNriwqqZ2CqpiuHagXKCRt3oa7D8N2ZygR-i04o8YP2pHr6I0Z76R6lZj1HDY65Sj-mkPJpN6nWKY-V_6htmMndJRY615MHntdsfZ82k5_IBbJXxdIN5MjJvgk41eyFXxzTKIXSGms-itEbW7FqMlZT8bIAigDoXYub9rh-FjtfdmVRVdwIIngzFzJrJQBroyHPxW9kW2JjH8foZCzX5YMStsHvfm1s4uAhZtbwK4KI_-x9GuXI3-cCUmtuFdQ-E2z_l3Hom57dasvYj6tFcqhRS9X_popdYTxR-4IeSE-NAjp71LDevvejtAqQTvpIRMFhV9um8qOb-xkPRe0xSoR6-chA2cQE--cbFJiLxe6ywBIqW6lI-aSI9Kv924s-OfRUGz0u=w1600-h766"/></div>
| + | -webkit-clip-path: polygon(95% 79%, 0% 86%, 5% 7%, 100% 3%); |
| − | </div>
| + | } |
| − | <div class="slider__text">
| + | 75%, 95% { |
| − | <div class="slider__text-item slider__text-item--active" data-id="1">
| + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 66.66666% 0%; |
| − | <div class="slider__text-item-head">
| + | -webkit-clip-path: polygon(0% 85%, 5% 14%, 100% 3%, 95% 95%); |
| − | <h3>Forest</h3>
| + | } |
| − | </div>
| + | } |
| − | <div class="slider__text-item-info">
| + | section:nth-child(4) { |
| − | <p>“And into the forest I go, to lose my mind and find my soul”</p>
| + | -moz-animation: section-4 8s both infinite; |
| − | </div>
| + | -webkit-animation: section-4 8s both infinite; |
| − | </div>
| + | animation: section-4 8s both infinite; |
| − | <div class="slider__text-item" data-id="2">
| + | |
| − | <div class="slider__text-item-head">
| + | |
| − | <h3>Lake</h3>
| + | |
| − | </div>
| + | |
| − | <div class="slider__text-item-info">
| + | |
| − | <p>“Mist to mist, drops to drops. For water thou art, and unto water shalt thou return”</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="slider__text-item" data-id="3">
| + | |
| − | <div class="slider__text-item-head">
| + | |
| − | <h3>Cliffs</h3>
| + | |
| − | </div>
| + | |
| − | <div class="slider__text-item-info">
| + | |
| − | <p>“Go to the edge of the cliff and jump off. Build your wings on the way down”</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="slider__text-item" data-id="4">
| + | |
| − | <div class="slider__text-item-head">
| + | |
| − | <h3>Mountains</h3>
| + | |
| − | </div>
| + | |
| − | <div class="slider__text-item-info">
| + | |
| − | <p>“What are men to rocks and mountains?”</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="slider__text-item" data-id="5">
| + | |
| − | <div class="slider__text-item-head">
| + | |
| − | <h3>Peaks</h3>
| + | |
| − | </div>
| + | |
| − | <div class="slider__text-item-info">
| + | |
| − | <p>“On all the peaks lies peace”</p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div> | + | |
| − | <div class="slider__nav"> | + | |
| − | <div class="slider__nav-arrows"> | + | |
| − | <div class="slider__nav-arrow slider__nav-arrow--left" id="left">to left</div>
| + | |
| − | <div class="slider__nav-arrow slider__nav-arrow--right" id="right">to right</div>
| + | |
| − | </div>
| + | |
| − | <div class="slider__nav-dots" id="slider-dots">
| + | |
| − | <div class="slider__nav-dot slider__nav-dot--active" data-id="1"></div>
| + | |
| − | <div class="slider__nav-dot" data-id="2"></div>
| + | |
| − | <div class="slider__nav-dot" data-id="3"></div>
| + | |
| − | <div class="slider__nav-dot" data-id="4"></div>
| + | |
| − | <div class="slider__nav-dot" data-id="5"></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <script>
| + | |
| − | 'use strict';
| + | |
| − | | + | |
| − | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
| + | |
| − | | + | |
| − | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
| + | |
| − | | + | |
| − | /*
| + | |
| − | More about this function -
| + | |
| − | https://codepen.io/rachsmith/post/animation-tip-lerp
| + | |
| − | */
| + | |
| − | function lerp(_ref, _ref2) {
| + | |
| − | var x = _ref.x; | + | |
| − | var y = _ref.y;
| + | |
| − | var targetX = _ref2.x;
| + | |
| − | var targetY = _ref2.y;
| + | |
| − | | + | |
| − | var fraction = 0.2;
| + | |
| − | | + | |
| − | x += (targetX - x) * fraction;
| + | |
| − | y += (targetY - y) * fraction; | + | |
| − | | + | |
| − | return { x: x, y: y }; | + | |
| | } | | } |
| | | | |
| − | var Slider = function () {
| + | @-moz-keyframes section-4 { |
| − | function Slider(el) { | + | 0%, 20%, 100% { |
| − | _classCallCheck(this, Slider); | + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | | + | -webkit-clip-path: polygon(5% 18%, 89% 21%, 62% 73%, 0% 83%); |
| − | var imgClass = this.IMG_CLASS = 'slider__images-item';
| + | } |
| − | var textClass = this.TEXT_CLASS = 'slider__text-item';
| + | 25%, 45% { |
| − | var activeImgClass = this.ACTIVE_IMG_CLASS = imgClass + '--active';
| + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | var activeTextClass = this.ACTIVE_TEXT_CLASS = textClass + '--active'; | + | -webkit-clip-path: polygon(57% 31%, 45% 67%, 0% 77%, 5% 18%); |
| − | | + | } |
| − | this.el = el;
| + | 50%, 70% { |
| − | this.contentEl = document.getElementById('slider-content'); | + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | this.onMouseMove = this.onMouseMove.bind(this); | + | -webkit-clip-path: polygon(45% 57%, 0% 67%, 5% 8%, 72% 12%); |
| − | | + | } |
| − | // taking advantage of the live nature of 'getElement...' methods | + | 75%, 95% { |
| − | this.activeImg = el.getElementsByClassName(activeImgClass);
| + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | this.activeText = el.getElementsByClassName(activeTextClass); | + | -webkit-clip-path: polygon(0% 77%, 5% 18%, 47% 21%, 32% 67%); |
| − | this.images = el.getElementsByTagName('img'); | + | } |
| − | | + | } |
| − | document.getElementById('slider-dots').addEventListener('click', this.onDotClick.bind(this)); | + | @-webkit-keyframes section-4 { |
| − | | + | 0%, 20%, 100% { |
| − | document.getElementById('left').addEventListener('click', this.prev.bind(this)); | + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | | + | -webkit-clip-path: polygon(5% 18%, 89% 21%, 62% 73%, 0% 83%); |
| − | document.getElementById('right').addEventListener('click', this.next.bind(this)); | + | } |
| − | | + | 25%, 45% { |
| − | window.addEventListener('resize', this.onResize.bind(this)); | + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | | + | -webkit-clip-path: polygon(57% 31%, 45% 67%, 0% 77%, 5% 18%); |
| − | this.onResize(); | + | } |
| − | | + | 50%, 70% { |
| − | this.length = this.images.length;
| + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | this.lastX = this.lastY = this.targetX = this.targetY = 0; | + | -webkit-clip-path: polygon(45% 57%, 0% 67%, 5% 8%, 72% 12%); |
| | } | | } |
| − | | + | 75%, 95% { |
| − | Slider.prototype.onResize = function onResize() { | + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | var htmlStyles = getComputedStyle(document.documentElement); | + | -webkit-clip-path: polygon(0% 77%, 5% 18%, 47% 21%, 32% 67%); |
| − | var mobileBreakpoint = htmlStyles.getPropertyValue('--mobile-bkp');
| + | } |
| − | | + | } |
| − | var isMobile = this.isMobile = matchMedia('only screen and (max-width: ' + mobileBreakpoint + ')').matches;
| + | @keyframes section-4 { |
| − | | + | 0%, 20%, 100% { |
| − | this.halfWidth = innerWidth / 2;
| + | background: url("https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | this.halfHeight = innerHeight / 2;
| + | -webkit-clip-path: polygon(5% 18%, 89% 21%, 62% 73%, 0% 83%); |
| − | this.zDistance = htmlStyles.getPropertyValue('--z-distance');
| + | } |
| − | | + | 25%, 45% { |
| − | if (!isMobile && !this.mouseWatched) {
| + | background: url("https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | this.mouseWatched = true;
| + | -webkit-clip-path: polygon(57% 31%, 45% 67%, 0% 77%, 5% 18%); |
| − | this.el.addEventListener('mousemove', this.onMouseMove);
| + | } |
| − | this.el.style.setProperty('--img-prev', 'url(' + this.images[+this.activeImg[0].dataset.id - 1].src + ')');
| + | 50%, 70% { |
| − | this.contentEl.style.setProperty('transform', 'translateZ(' + this.zDistance + ')');
| + | background: url("https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | } else if (isMobile && this.mouseWatched) {
| + | -webkit-clip-path: polygon(45% 57%, 0% 67%, 5% 8%, 72% 12%); |
| − | this.mouseWatched = false;
| + | } |
| − | this.el.removeEventListener('mousemove', this.onMouseMove);
| + | 75%, 95% { |
| − | this.contentEl.style.setProperty('transform', 'none');
| + | background: url("https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050") 99.99999% 0%; |
| − | }
| + | -webkit-clip-path: polygon(0% 77%, 5% 18%, 47% 21%, 32% 67%); |
| − | };
| + | } |
| − | | + | } |
| − | Slider.prototype.getMouseCoefficients = function getMouseCoefficients() { | + | @media (max-width: 1000px) { |
| − | var _ref3 = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; | + | #showcase { |
| − | | + | position: absolute; |
| − | var pageX = _ref3.pageX;
| + | top: -115px; |
| − | var pageY = _ref3.pageY;
| + | left: -200px; |
| − | | + | margin: 0; |
| − | var halfWidth = this.halfWidth;
| + | -moz-transform: scale(0.65, 0.65); |
| − | var halfHeight = this.halfHeight;
| + | -ms-transform: scale(0.65, 0.65); |
| − | var xCoeff = ((pageX || this.targetX) - halfWidth) / halfWidth;
| + | -webkit-transform: scale(0.65, 0.65); |
| − | var yCoeff = (halfHeight - (pageY || this.targetY)) / halfHeight;
| + | transform: scale(0.65, 0.65); |
| − | | + | } |
| − | return { xCoeff: xCoeff, yCoeff: yCoeff };
| + | } |
| − | };
| + | </style> |
| − | | + | <figure id="showcase"> |
| − | Slider.prototype.onMouseMove = function onMouseMove(_ref4) {
| + | <section></section> |
| − | var pageX = _ref4.pageX;
| + | <section></section> |
| − | var pageY = _ref4.pageY;
| + | <section></section> |
| − | | + | <section></section> |
| − | this.targetX = pageX;
| + | </figure> |
| − | this.targetY = pageY;
| + | |
| − | | + | |
| − | if (!this.animationRunning) {
| + | |
| − | this.animationRunning = true;
| + | |
| − | this.runAnimation();
| + | |
| − | }
| + | |
| − | }; | + | |
| − | | + | |
| − | Slider.prototype.runAnimation = function runAnimation() { | + | |
| − | if (this.animationStopped) { | + | |
| − | this.animationRunning = false;
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | | + | |
| − | var maxX = 10;
| + | |
| − | var maxY = 10;
| + | |
| − | | + | |
| − | var newPos = lerp({
| + | |
| − | x: this.lastX,
| + | |
| − | y: this.lastY
| + | |
| − | }, {
| + | |
| − | x: this.targetX,
| + | |
| − | y: this.targetY
| + | |
| − | });
| + | |
| − | | + | |
| − | var _getMouseCoefficients = this.getMouseCoefficients({
| + | |
| − | pageX: newPos.x,
| + | |
| − | pageY: newPos.y
| + | |
| − | });
| + | |
| − | | + | |
| − | var xCoeff = _getMouseCoefficients.xCoeff;
| + | |
| − | var yCoeff = _getMouseCoefficients.yCoeff;
| + | |
| − | | + | |
| − | this.lastX = newPos.x;
| + | |
| − | this.lastY = newPos.y;
| + | |
| − | | + | |
| − | this.positionImage({ xCoeff: xCoeff, yCoeff: yCoeff });
| + | |
| − | | + | |
| − | this.contentEl.style.setProperty('transform', '\n translateZ(' + this.zDistance + ')\n rotateX(' + maxY * yCoeff + 'deg)\n rotateY(' + maxX * xCoeff + 'deg)\n ');
| + | |
| − | | + | |
| − | if (this.reachedFinalPoint) {
| + | |
| − | this.animationRunning = false;
| + | |
| − | } else {
| + | |
| − | requestAnimationFrame(this.runAnimation.bind(this));
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | Slider.prototype.positionImage = function positionImage(_ref5) {
| + | |
| − | var xCoeff = _ref5.xCoeff;
| + | |
| − | var yCoeff = _ref5.yCoeff;
| + | |
| − | | + | |
| − | var maxImgOffset = 1;
| + | |
| − | var currentImage = this.activeImg[0].children[0];
| + | |
| − | | + | |
| − | currentImage.style.setProperty('transform', '\n translateX(' + maxImgOffset * -xCoeff + 'em)\n translateY(' + maxImgOffset * yCoeff + 'em)\n '); | + | |
| − | };
| + | |
| − | | + | |
| − | Slider.prototype.onDotClick = function onDotClick(_ref6) {
| + | |
| − | var target = _ref6.target;
| + | |
| − | | + | |
| − | if (this.inTransit) return;
| + | |
| − | | + | |
| − | var dot = target.closest('.slider__nav-dot');
| + | |
| − | | + | |
| − | if (!dot) return;
| + | |
| − | | + | |
| − | var nextId = dot.dataset.id;
| + | |
| − | var currentId = this.activeImg[0].dataset.id;
| + | |
| − | | + | |
| − | if (currentId == nextId) return;
| + | |
| − | | + | |
| − | this.startTransition(nextId);
| + | |
| − | }; | + | |
| − | | + | |
| − | Slider.prototype.transitionItem = function transitionItem(nextId) { | + | |
| − | var _this = this; | + | |
| − | | + | |
| − | function onImageTransitionEnd(e) {
| + | |
| − | e.stopPropagation();
| + | |
| − | | + | |
| − | nextImg.classList.remove(transitClass);
| + | |
| − | | + | |
| − | self.inTransit = false;
| + | |
| − | | + | |
| − | this.className = imgClass;
| + | |
| − | this.removeEventListener('transitionend', onImageTransitionEnd);
| + | |
| − | }
| + | |
| − | | + | |
| − | var self = this;
| + | |
| − | var el = this.el;
| + | |
| − | var currentImg = this.activeImg[0];
| + | |
| − | var currentId = currentImg.dataset.id;
| + | |
| − | var imgClass = this.IMG_CLASS;
| + | |
| − | var textClass = this.TEXT_CLASS;
| + | |
| − | var activeImgClass = this.ACTIVE_IMG_CLASS;
| + | |
| − | var activeTextClass = this.ACTIVE_TEXT_CLASS;
| + | |
| − | var subActiveClass = imgClass + '--subactive';
| + | |
| − | var transitClass = imgClass + '--transit';
| + | |
| − | var nextImg = el.querySelector('.' + imgClass + '[data-id=\'' + nextId + '\']');
| + | |
| − | var nextText = el.querySelector('.' + textClass + '[data-id=\'' + nextId + '\']');
| + | |
| − | | + | |
| − | var outClass = '';
| + | |
| − | var inClass = '';
| + | |
| − | | + | |
| − | this.animationStopped = true;
| + | |
| − | | + | |
| − | nextText.classList.add(activeTextClass); | + | |
| − | | + | |
| − | el.style.setProperty('--from-left', nextId);
| + | |
| − | | + | |
| − | currentImg.classList.remove(activeImgClass);
| + | |
| − | currentImg.classList.add(subActiveClass);
| + | |
| − | | + | |
| − | if (currentId < nextId) {
| + | |
| − | outClass = imgClass + '--next';
| + | |
| − | inClass = imgClass + '--prev';
| + | |
| − | } else {
| + | |
| − | outClass = imgClass + '--prev';
| + | |
| − | inClass = imgClass + '--next';
| + | |
| − | }
| + | |
| − | | + | |
| − | nextImg.classList.add(outClass);
| + | |
| − | | + | |
| − | requestAnimationFrame(function () {
| + | |
| − | nextImg.classList.add(transitClass, activeImgClass);
| + | |
| − | nextImg.classList.remove(outClass);
| + | |
| − | | + | |
| − | _this.animationStopped = false;
| + | |
| − | _this.positionImage(_this.getMouseCoefficients());
| + | |
| − | | + | |
| − | currentImg.classList.add(transitClass, inClass);
| + | |
| − | currentImg.addEventListener('transitionend', onImageTransitionEnd);
| + | |
| − | });
| + | |
| − | | + | |
| − | if (!this.isMobile) this.switchBackgroundImage(nextId);
| + | |
| − | }; | + | |
| − | | + | |
| − | Slider.prototype.startTransition = function startTransition(nextId) { | + | |
| − | function onTextTransitionEnd(e) { | + | |
| − | if (!e.pseudoElement) {
| + | |
| − | e.stopPropagation();
| + | |
| − | | + | |
| − | requestAnimationFrame(function () {
| + | |
| − | self.transitionItem(nextId);
| + | |
| − | });
| + | |
| − | | + | |
| − | this.removeEventListener('transitionend', onTextTransitionEnd);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | if (this.inTransit) return;
| + | |
| − | | + | |
| − | var activeText = this.activeText[0];
| + | |
| − | var backwardsClass = this.TEXT_CLASS + '--backwards';
| + | |
| − | var self = this;
| + | |
| − | | + | |
| − | this.inTransit = true;
| + | |
| − | | + | |
| − | activeText.classList.add(backwardsClass);
| + | |
| − | activeText.classList.remove(this.ACTIVE_TEXT_CLASS);
| + | |
| − | activeText.addEventListener('transitionend', onTextTransitionEnd); | + | |
| − | | + | |
| − | requestAnimationFrame(function () {
| + | |
| − | activeText.classList.remove(backwardsClass);
| + | |
| − | });
| + | |
| − | };
| + | |
| − | | + | |
| − | Slider.prototype.next = function next() {
| + | |
| − | if (this.inTransit) return;
| + | |
| − | | + | |
| − | var nextId = +this.activeImg[0].dataset.id + 1;
| + | |
| − | | + | |
| − | if (nextId > this.length) nextId = 1;
| + | |
| − | | + | |
| − | this.startTransition(nextId);
| + | |
| − | }; | + | |
| − | | + | |
| − | Slider.prototype.prev = function prev() {
| + | |
| − | if (this.inTransit) return; | + | |
| − | | + | |
| − | var nextId = +this.activeImg[0].dataset.id - 1; | + | |
| − | | + | |
| − | if (nextId < 1) nextId = this.length; | + | |
| − | | + | |
| − | this.startTransition(nextId); | + | |
| − | };
| + | |
| − | | + | |
| − | Slider.prototype.switchBackgroundImage = function switchBackgroundImage(nextId) {
| + | |
| − | function onBackgroundTransitionEnd(e) { | + | |
| − | if (e.target === this) {
| + | |
| − | this.style.setProperty('--img-prev', imageUrl);
| + | |
| − | this.classList.remove(bgClass);
| + | |
| − | this.removeEventListener('transitionend', onBackgroundTransitionEnd);
| + | |
| − | }
| + | |
| − | } | + | |
| − | | + | |
| − | var bgClass = 'slider--bg-next';
| + | |
| − | var el = this.el;
| + | |
| − | var imageUrl = 'url(' + this.images[+nextId - 1].src + ')';
| + | |
| − | | + | |
| − | el.style.setProperty('--img-next', imageUrl); | + | |
| − | el.addEventListener('transitionend', onBackgroundTransitionEnd);
| + | |
| − | el.classList.add(bgClass);
| + | |
| − | };
| + | |
| − | | + | |
| − | _createClass(Slider, [{
| + | |
| − | key: 'reachedFinalPoint', | + | |
| − | get: function get() {
| + | |
| − | var lastX = ~ ~this.lastX;
| + | |
| − | var lastY = ~ ~this.lastY;
| + | |
| − | var targetX = this.targetX;
| + | |
| − | var targetY = this.targetY;
| + | |
| − | | + | |
| − | return (lastX == targetX || lastX - 1 == targetX || lastX + 1 == targetX) && (lastY == targetY || lastY - 1 == targetY || lastY + 1 == targetY);
| + | |
| − | }
| + | |
| − | }]); | + | |
| − | | + | |
| − | return Slider;
| + | |
| − | }(); | + | |
| − | | + | |
| − | var sliderEl = document.getElementById('slider');
| + | |
| − | var slider = new Slider(sliderEl);
| + | |
| − | | + | |
| − | // ------------------ Demo stuff ------------------------ //
| + | |
| − | | + | |
| − | var timer = 0;
| + | |
| − | | + | |
| − | function autoSlide() {
| + | |
| − | requestAnimationFrame(function () {
| + | |
| − | slider.next();
| + | |
| − | });
| + | |
| − | | + | |
| − | timer = setTimeout(autoSlide, 5000);
| + | |
| − | }
| + | |
| − | | + | |
| − | function stopAutoSlide() {
| + | |
| − | clearTimeout(timer);
| + | |
| − | | + | |
| − | this.removeEventListener('touchstart', stopAutoSlide);
| + | |
| − | this.removeEventListener('mousemove', stopAutoSlide);
| + | |
| − | }
| + | |
| − | | + | |
| − | sliderEl.addEventListener('mousemove', stopAutoSlide);
| + | |
| − | sliderEl.addEventListener('touchstart', stopAutoSlide);
| + | |
| − | | + | |
| − | timer = setTimeout(autoSlide, 2000);
| + | |
| − | </script> | + | |
| | </html> | | </html> |
| | {{KU_Leuven_footer}} | | {{KU_Leuven_footer}} |
