Bawiłeś się kiedyś w chowanego? Może masz ochotę zrobić to dziś? Pokażę Ci jak coś ukryć. Tak porządnie i w określonym czasie. Na tym blogu było trochę magii, ale powtarzam: ukryjemy "coś", a nie Ciebie, więc bez obaw. Będziemy pokazywać i ukrywać element HTML. Właściwie takie cuda zdziałamy, że sam będzie się pokazywał i znikał w określonym momencie.
Cel i jego osiągnięcie brzmi banalnie, ale wyjawię Ci więcej szczegółów. Efekt ten został praktycznie wykorzystany, prawie przy takim założeniu, na stronie gier dla dzieci Buliba.pl. Ponieważ projekt strony jest niekomfortowy/niegrywalny/nieprzeznaczony do układu portrait, to wtedy pokazuje się plansza z odpowiednią informacją. Dodatkowo (co tam dzieje się po bardzo długim czasie) plansza ma zniknąć po kilku sekundach.
Zacznijmy od planszy.
<div id="info" data-info="Panel zaprojektowany został wyłącznie dla układu landscape"></div>
+
body {
background: #ddd;
}
/* plansza */
#info {
position: fixed;
left: -100%; /* plansza schowana poza ekranem */
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
text-align: center;
font-style: normal;
z-index: 65535;
}
/* tekst na planszy */
#info:before {
content: attr(data-info);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
Jak pokazać planszę przy układzie portait?
Wykorzystamy do tego cechę media queries, a konkretnie max-aspect-ratio. Dla tej cechy i pochodnych podajemy wartość w postaci: szerokość ekranu / wysokość ekranu, a właściwie sprowadzona do skróconego ułamka. Czyli dla proporcji ekranu 16:9 podajemy dla czytelności 16/9, choć moglibyśmy podać 1600/900 lub 1280/720. Są to równoznaczne wartości, ale 16/9 bardziej kojarzy się z proporcją, a nie z rozdzielczością.
Ponieważ chcemy pokazać planszę przy układzie portrait, musimy zadać maksymalne ratio 1/1. Co oznacza, że nie interesuje nas ratio 2/1 (szerokość dwa razy większa niż wysokość), ale już 1/2 czy 1/3 będą ok (stąd max-aspect-ratio). Czyli wszystko co nie jest landscape.
Dodajmy więc do CSS:
@media screen and (max-aspect-ratio: 1/1) {
body {
overflow: hidden; /* pozbywamy się suwaków */
}
#info {
left:0; /* wstawiamy planszę na ekran */
animation: hidePortraitInfo 1s ease-in 3s forwards; /* startujemy animację po 3 sekundach */
animation-fill-mode: forwards;
}
@keyframes hidePortraitInfo {
99.99% {
opacity: 0; /* płynne zanikanie (opacity od 1 do 0) */
left: 0; /* trzymamy planszę na ekranie */
}
100% {
left: -100%; /* i na samym końcu chowamy planszę poza ekran */
}
}
}
Kilka słów wyjaśnienia. Dlaczego przy 99,99% właściwość left ma wartość 0? Bo gdyby nie miała, to animacja estymowała by tą właściwość dla 99,99% i byłoby to -99,99%. Tak więc plansza podczas całej animacji przesuwałaby się w lewo oprócz zanikania. My natomiast chcemy aby plansza pozostawała na swoim miejscu, stąd od 0% do 99,99% ustawiamy left na 0. A skąd left:-100% przy postępie 100%? W tym momencie mamy pewność, że opacity planszy ma wartość 0 i plansza jest nam niepotrzebna, chowamy więc ją poza ekran.
Tak wygląda finalny efekt pokazywania i znikania planszy (pobaw się rozmiarem okna przeglądarki, na telefonie może Ci być trudniej...).
Gdybyś jakimś cudem zniknął po przeczytaniu tego wpisu, to trzymam kciuki za Twój powrót przed ekran na kolejny wpis (niech left:0!).
Przydatne linki:
aspect-ratio w CSS
Typ ratio w CSS