Zanikanie z opóźnieniem – animacje w CSS3

Jak już bardzo dobrze wiemy, nowe możliwości, jakie daje nam CSS3 są naprawdę ogromne. Nie ma sensu jednak uczyć się wszystkiego jedynie w teorii, bo przecież najlepszym sposobem na ujażmienie nieznanego, jest właśnie jego poznanie. Dzisiejszy wpis poświęcę na omówienie przykładu, w którym blok reklamowy wyświetlać się będzie dopiero po najechaniu na niego kursorem na ekranie, jednak zniknie dopiero po kilku sekundach od opuszczenia danego obszaru. Zapraszam Was do dalszej lektury.

Przygotowania

Na samym początku utworzymy sobie dwa bloki <div>, które znajdować się będą jeden na drugim (nadamy im position – absolute i odpowiednie wartości dla własności z-index).

W moim przypadku otoczę je jeszcze dodatkowym DIV’em, aby trzymał wszystko w jednym, spójnym miejscu na środku ekranu.

Dodamy też już wstępne formatowanie CSS.

Oczywiście, kiedy wpiszemy powyższy kod i otpalimy doument HTML w przeglądarce, nie ujrzymy niczego. Dopiero w kolejnych krokach zajmować się będziemy widocznymi elementami w naszym przykładzie.

Formatujemy najniższą warstwę

W elemencie o klasie „background” dodamy tekst, który będzie miał zachęcić użytkownika do najechania kursorem na obszar, w którym pojawi się nasz blok reklamowy. Na początku edytujmy kod HTML5:

Wypada to jeszcze odpowiednio zaprezentować. Dodajmy kojelną linijkę do naszego kodu CSS.

Na tę chwilę powinniśmy otrzymać następujący efekt:

Dodajemy baner w warstwie drugiej

Całość ograniczać się będzie tylko i wyłącznie do wstawienia do div’u o klasie „top” reklamy obrazkowej, równej rozmiarom warstwy niższej (pamiętajmy, że do rozmiarów nalezy dodać również wartości „padding” dla każdego boku, więc nasz obrazek będzie miał wymiary 400×160 pikseli!).

Nasz baner przykrył w tej chwili warstwę niższą. Jesteśmy już na ostatniej prostej. W następnym kroku zajmiemy się odpowiednim ustawieniem zanikania i pojawiania się górnej warstwy.

Animacje w CSS3

Podstaw animacji polecam nauczyć się z jednego z naszych poprzednich artykułów. My w tej chwili zajmiemy się konkretnym przypadkiem. Co najważniejsze, przykład działa we wszystkich wiodących przeglądarkach (Chrome wymaga jeszcze swojego sufiksu -webkit-) oraz w Internet Explorerze w jego 11 wersji (w końcu jakiś progres!).

Jak łatwo nam się zapewne domyślić, „pojawianie” odpowiada za pokazanie się reklamy po najechaniu na dany obszar, natomiast „zanikanie” ukrywa ją.

Zadeklarowane „funkcje” musimy jednak zaimplementować. Dodajemy odniesienia do nich przy naszym div’ie z reklamą. Proszę zwrócić uwagę na wartości w sekundach, które będziemy podawać. To właśnnie one odpowiadają za opóźnienia zanikania i pojawiania się warstwy.

Końcowy, właściwy efekt możecie obejrzeć za pomocą DEMA, do którego link umieściłem na końcu poradnika.

Pobierz pliki źródłowe Zobacz DEMO