/* Created by Josep Antrony Bover on 18/04/2021 inspired on : https://twitter.com/ippsketch/status/1382703022875291650 Yes.. im not very original if i had to reproduce someone else work, but i did it to remove the dust on my brain, because i have more than one year without front end things (and coding anithing in general ). I took this example because i thought its easy to do in a few time without harming my brain... but i have more problems than i expect... Happy to be able to solve it, and had fun doing it :) Hope i can spend more time coding in the inmediate future, because i love it, but life is life... I tryed to unificate widths, heights, margins and paddings, using a base unit. That unit can be one ViewWidht '1vw' or one ViewHeight '1vh' depending on landscape or portrait representation, so to calculate them i use this formula calc(VALUE * var(--unit)); Last update : [20/05/2021] */ /* Putuivan font's choice */ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap'); /* Main body of the example*/ body { background:rgb(28,28,28); color:#FFF; /* Miliseconds between channels */ --chromatic-distance-time:8ms; /* Total animation time */ --animation-time:5s; /* default unit 1% of viewport width, in portrait resolutions changes to 1% of viewport height */ --unit:1vw; font-size:10px; font-family: 'Quicksand', sans-serif; padding:calc(2 * var(--unit)); } /* Raild for each filter */ .Rail { position:relative; z-index:1; } /* Description text for each rail */ .Rail::before { transform: translate(-50%, -50%); position:absolute; content:attr(Texte); left: 50%; top: 50%; white-space: nowrap; color:rgb(240, 240, 240); font-size:calc(2.5 * var(--unit)); text-shadow:0.03vw 0.03vw calc(0.1 * var(--unit)) #CCC; } /* RGB Squares, and a white one for no filter rail */ .Blue, .Red, .White, .Green { position:absolute; mix-blend-mode: difference; border-style:solid; width:calc(2 * var(--unit)); height:calc(2 * var(--unit)); border-width:calc(1.5 * var(--unit)); /* animation-name:Animation-Landscape;*/ animation-duration:var(--animation-time); animation-timing-function:ease-in-out; animation-iteration-count:infinite; } /* Blur filter for the last two rails */ .Blur { filter:blur(3px); } /* Green square goes always in the middle (distance-time * 2) */ .Green { border-color:rgb(0, 255, 0); animation-delay:calc(var(--chromatic-distance-time) * 2); } /* White square goes always in the middle, because its simulating the 3 rgb squares with 'mix-blend-mode:difference' (distance-time * 2) */ .White { border-color:white; animation-delay:calc(var(--chromatic-distance-time) * 2); } /* Blue square goes always at the last position (distance-time * 3) */ .Blue { border-color:rgb(0, 0, 255); animation-delay:calc(var(--chromatic-distance-time) * 3); } /* Red square goes always at the first position (distance-time * 1) */ .Red { border-color:rgb(255, 0, 0); animation-delay:calc(var(--chromatic-distance-time) * 1); } /* height > width = landscape */ @media (min-width: 200px) and (orientation:landscape) { /* Base unit for landscape is 1vw */ body { --unit:1vw; } /* space to animate a single effect */ .Rail { display:block; width:70%; left:15%; height:5vw; margin-bottom:2vw; } /* text for rail effect */ .Rail::before { transform: translate(-50%, -50%); } /* animation name for each square depending on the orientation*/ .Blue, .Red, .White, .Green { animation-name:Animation-Landscape; } /* animation controls box */ .Controls { font-size:calc(1.6 * var(--unit)); width:calc(60vw); /* 60& of the width is enought for landscape */ } } /* width > height = portrait */ @media (min-height: 200px) and (orientation:portrait) { /* Base unit for portrait is 1vh */ body { --unit:1vh; } /* space to animate a single effect */ .Rail { display:inline-block; height:70vh; width:5vh; margin-left:2vh; } /* a little adjustment to center rails in portrait mode */ .Rail:nth-child(1) { margin-left:calc((100% - 28vh) / 2) !important; } /* text for rail effect */ .Rail::before { transform: translate(-50%, -50%) rotate(-90deg); } /* animation name for each square depending on the orientation*/ .Blue, .Red, .White, .Green { animation-name:Animation-Portrait; } /* animation controls box */ .Controls { font-size:calc(1.55 * var(--unit)); width:calc(80vw); /* whee need all the space to show controls not too much small */ } } /* UI (sliders) */ .Controls { position:relative; margin:calc(3 * var(--unit)) auto; left:auto; right:auto; background:rgb(0, 0, 100, 0.7); display:grid; grid-template-columns: auto auto auto; /* grid-template-columns: auto calc(12 * var(--units)) calc(3 * var(--units));*/ grid-gap: 1rem; padding:var(--unit) calc(2 * var(--unit)); border: 1px solid rgb(0, 0, 50); } /* each grid item has the same height and lineheight to center his text verticaly */ .Controls > div { min-height:1.6rem; line-height:1.6rem; white-space: nowrap; } /* text aling for the first grid column text */ .Controls > div:nth-child(1), .Controls > div:nth-child(4) { text-align: right; } @keyframes Animation-Landscape { 0% { left:0%; } 15% { left:calc(100% - 6vw); transform:rotate(0deg); } 25% { left:calc(100% - 6vw); transform:rotate(360deg); } 51.5% { left:0; transform:rotate(360deg) rotate3d(1, 2, -1, 920deg); } 55% { transform:rotate(360deg) rotate3d(0, 0, 0, 0deg) scale(1, 1); } 58% { transform:rotate(360deg) scale(.1, .1); } 61% { transform:rotate(360deg) scale(1, 1.1); } 61.5% { transform:rotate(360deg) scale(1, 1); } 100% { transform:rotate(0deg); } } @keyframes Animation-Portrait { 0% { top:0%; } 15% { top:calc(100% - 6vh); transform:rotate(0deg); } 25% { top:calc(100% - 6vh); transform:rotate(360deg); } 51.5% { top:0; transform:rotate(360deg) rotate3d(1, 2, -1, 920deg); } 55% { transform:rotate(360deg) rotate3d(0, 0, 0, 0deg) scale(1, 1); } 58% { transform:rotate(360deg) scale(.1, .1); } 61% { transform:rotate(360deg) scale(1, 1.1); } 61.5% { transform:rotate(360deg) scale(1, 1); } 100% { transform:rotate(0deg); } } Actualización en 5sEsc para cancelar Alt+A para actualizar