Responsywny design jest wszędzie i niezależnie od tego, czy korzystasz z frameworka, czy też piszesz zapytania o media, niektóre elementy na Twojej stronie są przenoszone lub skalowane.
Jeśli zapytania o media są oparte na wymiarach przeglądarki, a rozmiar przeglądarki zostanie zmieniony, Twoje elementy zostaną przeskoczone. Dodanie niewielkiej animacji do tych właściwości jest miłym akcentem dla każdej responsywnej witryny.
Dzisiaj pokażę, jak łatwo można dodać dodatkowy dotyk, animując szerokość i krycie elementów między zapytaniami o media.
W tym prostym przykładzie użyjemy div, zawierającego 3 mniejsze divy. Dywizje będą skalowane zgodnie z rozmiarem okna przeglądarki. HTML jest prosty:
Teraz nasz główny CSS umieści trzy pola wewnątrz głównego div, a także, zgodnie z marginesem po prawej stronie:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}To jest nasz główny układ, bez zapytań o media, ten układ nie będzie się dostosowywał, jeśli zmieni się widok. Teraz, gdy mamy już podstawy, dodajmy zapytania o media.
Zapytania o media są często używane w dzisiejszych czasach. Większość projektantów stron internetowych rozumie je, ale na wypadek, gdyby był to twój pierwszy raz, oto krótki przypomnienia: zapytania o media sprawdzają możliwości używanego urządzenia (szerokość, orientacja i rozdzielczość) i uruchamiają określony kod CSS, jeśli warunki określone dla nośnika zapytanie jest spełnione. W naszym przykładzie użyjemy dwóch zapytań o media, które sprawdzą, czy przeglądarka jest mniejsza niż 960px i czy jest mniejsza niż 660px. Następnie ustawimy odpowiednio szerokość elementów, ukryjemy także ostatni element div, aby pozostałe dwa miały więcej miejsca:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}To wszystko, czego potrzebujemy w naszych zapytaniach o media. Zauważ, że ważne jest, aby ten kod był umieszczony poniżej oryginalnego kodu CSS powyżej, aby zapytania o media nadpisały powyższy kod. Jeśli przetestujesz teraz swój plik, zobaczysz rozmiar zmieniających się divów, a krycie ostatniego elementu div dziecka zmieni się podczas zmiany rozmiaru okna przeglądarki.
Zauważysz, że aby ukryć ostatni element div, ustawiamy jego przezroczystość na 0, zamiast ustawiać wyświetlanie: none. Dzieje się tak, ponieważ chcemy mieć możliwość animowania własności; krycie ma wiele różnych stopni, podczas gdy wyświetlacz ma wartość true lub false (i dlatego nie może być animowany).
Animacje CSS okazały się bardzo przydatne podczas wykonywania animacji, które używaliśmy w jQuery, takich jak animacja koloru, szerokości i krycia.
Ponieważ chcemy, aby strona była animowana jako całość, używamy selektora * CSS i konfigurujemy naszą animację. Animacje CSS degradują się z gracją, ale warto też dodać prefiksy dostawców, aby zapewnić jak najwięcej wsparcia:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}Możesz zobaczyć gotowy wynik tutaj.
Dodanie prostych animacji, takich jak te, jest miłym dopełnieniem każdej witryny. Kilka linijek kodu dodaje naprawdę fajny polski do twojej responsywnej strony.
Czy animowałeś zapytania o media w projekcie? Jakie efekty osiągnąłeś? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz skali przez Shutterstock.