Tworzenie zaawansowanych „Marquee” za pomocą animacji CSS3
Dzisiaj przyjrzymy się “duży namiot” jeszcze raz. Właściwie omówiliśmy to w naszym poprzednim poście, który mówił o używaniu -webkit-markiza nieruchomość, ale tym razem trochę się tym zajmiemy.
W tym poście stworzymy podobny do markizy efekt przy użyciu animacji CSS3. W ten sposób będziemy mogli dodać więcej funkcji, których nie można osiągnąć tylko za pomocą -webkit-markiza.
Jeśli nie znasz już modułu animacji CSS3, zalecamy zapoznanie się z następującymi odniesieniami przed kontynuowaniem tej dokumentacji:
- Animacje CSS3 - W3School
- Animacje CSS - Mozilla Dev. Sieć
Zauważ również, że w tej chwili animacja CSS3 może działać tylko w Firefox 8+, Chrome 12+ i Safari 5.0+ z wersją z prefiksem (-moz- i -webkit-). Jednak oficjalna wersja z W3C będzie używana bez prefiksu, aby uniknąć nadmiaru tego artykułu za pomocą zbędnych kodów.
Rozwiązanie problemu markizy
Jednym z problemów z markizą jest ciągły ruch tekstu. To zachowanie jest przeszkadzające w czytaniu, a tekst jest również trudny do odczytania. Tym razem postaramy się stworzyć własną wersję markizy i uczynić ją bardziej przyjazną dla użytkownika. Na przykład; zamiast ciągłego przesuwania tekstu, zatrzymamy go, gdy będzie w pełni widoczny, aby użytkownik mógł przez chwilę przeczytać tekst.
The Storyboard (rodzaj)
Każde stworzenie kreatywne i projektowe, takie jak logo, ilustracja lub strona internetowa, zwykle zaczyna się od szkicu. W dziedzinie produkcji animacji odbywa się to za pomocą storyboardu. Zanim zaczniemy kodowanie, najpierw utworzymy rodzaj storyboardu, aby pomóc nam wizualizować naszą animację.
Jak widać z powyższej serii ujęć, planujemy pokazać tylko dwie linie tekstu, które będą poruszać się kolejno od prawej do lewej.
Nasz storyboard nie jest tak skomplikowany jak storyboard dla prawdziwego filmu animowanego, ale chodzi o to, że teraz jesteśmy w stanie wyobrazić sobie, jak będzie wyglądał nasz namiot imprezowy.
Znacznik HTML
Ponieważ nasza animacja będzie prosta, znaczniki HTML będą również tak proste, jak:
Jak dodać WordPress powiązane posty bez wtyczek
Automatyzuj swoje pliki Dropbox za pomocą akcji
Podstawowe style
Przed rozpoczęciem pracy z animacjami dodajmy kilka podstawowych stylów. Zacznijmy od dodania tekstury tła dla html element.
html background: url ('… /images/skewed_print.png'); Następnie umieścimy markizę na środku okna przeglądarki, a także dodamy pewne szczegóły, takie jak wewnętrzny cień, kolor tła i obramowania.
.markiza szerokość: 500px; wysokość: 50px; margin: 25px auto; przepełnienie: ukryte; pozycja: względna; border: 1px solid # 000; margin: 25px auto; kolor tła: # 222; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: wstawka 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: wstawka 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Następnie umieścimy tekst - który w tym przypadku jest zawinięty wewnątrz znacznika akapitu - absolutnie i od czasu absolutny pozycja spowoduje zwinięcie elementu, będziemy musieli zdefiniować element szerokości do 100% tak, aby pokryć szerokość rodzica.
.markiza p pozycja: absolutna; rodzina czcionek: Tahoma, Arial, sans-serif; szerokość: 100%; wysokość: 100%; margines: 0; line-height: 50px; wyrównywanie tekstu: środek; kolor: #fff; text-shadow: 1px 1px 0px # 000000; filter: dropshadow (color = # 000000, offx = 1, offy = 1);
Spójrzmy na wynik przez chwilę.
W tym momencie wykonaliśmy wszystkie podstawowe style, których potrzebujemy; możesz dodawać więcej lub spersonalizować style. Sugerujemy jednak, aby trzymać się naszego określonego wymiaru markizy (wysokości i szerokości) do końca samouczka.
Animacja
Krótko mówiąc, animacja to prezentacja poruszających się obiektów. Każdy ruch jest zdefiniowany w ramach czasowych. Kiedy pracujemy nad animacją, mamy do czynienia głównie z Czas. Bierzemy pod uwagę takie sprawy jak:
- Kiedy obiekt zacznie się poruszać?
- Jak długo trwa przejście obiektu z jednego punktu do drugiego?
- Kiedy i jak długo obiekt powinien pozostać w danym punkcie?
W animacji CSS3, the czas można zdefiniować za pomocą @ keyframe składnia. Zanim jednak przejdziemy do tej sekcji, określmy najpierw pozycję początkową tekstu markizy.
Planowaliśmy, że tekst zacznie się od prawej strony, a następnie przesunie się w prawo. Więc najpierw umieścimy go po prawej stronie za pomocą właściwości Transformacja CSS3.
.marquee p transform: translateX (100%);
Zapamiętaj 100% które zdefiniowaliśmy dla naszego elementu akapitu, było równe jego rodzicowi szerokość. Tak samo będzie również stosowane tutaj; element akapitu będzie przetłumaczony w prawo dla 100% który w tym przykładzie jest równy 500px.
Klatki kluczowe
The @ keyframe dla niektórych osób składnia może być nieco zagadkowa, więc stworzyliśmy prosty przewodnik wizualny, który pomoże Ci łatwo zrozumieć, co dzieje się w @ keyframe składnia.
Kliknij tutaj, aby zobaczyć większą wersję.
Cała animacja potrwa około 20 sekund i jest podzielony na dwie trwające sekwencje 10 sekund każdy.
W pierwszej kolejności pierwszy tekst zostanie natychmiast przesunięty z prawej strony i pozostanie widoczny przez chwilę, aby umożliwić użytkownikowi odczytanie tekstu, podczas gdy drugi tekst pozostanie ukryty. W drugiej sekwencji pierwszy tekst markizy przesunie się w lewo, a drugi tekst natychmiast wsunie się z prawej strony.
A oto wszystkie kody klatek kluczowych, które musimy zastosować, aby uruchomić animację.
@keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
The pozostawić jedno klatki kluczowe zdefiniują pierwszą sekwencję animacji, a klatki lewo-dwa klatki kluczowe zdefiniują drugą sekwencję.
Stosowanie animacji do elementów
Aby animacja działała, nie zapomnij zastosować animacji do elementu. Pierwsza sekwencja jest stosowana do pierwszego tekstu lub w tym przypadku pierwszy akapit, a druga sekwencja jest stosowana również do drugiego akapitu.
.marquee p: nth-child (1) animacja: left-one 20s łagodzi nieskończoność; .marquee p: nth-child (2) animacja: left-dwa 20s łagodzą nieskończoność;
Wszyscy skończyliśmy z naszą animacją; zobaczmy wyniki w przeglądarce.
- Próbny
- Pobierz źródło
Premia
Możemy również zdefiniować tekst markizy, aby przenieść go z góry na dół lub odwrotnie, tak jak w poprzednim poście. Oto jak to zrobić; zastąp nasze powyższe kody animacji tym kodem poniżej przesuń tekst w dół:
.marquee p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (100%); 100% transform: translateY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% transform: translateY (-100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (100%);
Zauważ, że zmieniliśmy Oś X do Oś Y i odwróć wszystkie tłumaczenie wartość ujemna na dodatnią i odwrotnie.
Mamy też zmienił nazwę animacji do w dół jeden i w dół dwa, więc musimy ponownie zastosować nazwę animacji również w elemencie akapitu.
.marquee p: nth-child (1) animation: down-one 20s łagodzi nieskończoność; .marquee p: nth-child (2) animacja: down-dwa 20s łagodzą nieskończoność;
Albo, jeśli chcesz przesunąć to przeciwnie; od dołu do góry. Oto wszystkie kody, które musisz zastosować:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animacja: up-one 20s łagodzi nieskończoność; .marquee.up p: nth-child (2) animacja: up-two 20s ułatwia nieskończoność; @keyframes up-one 0% transform: translateY (100%); 10% transform: translateY (0); 40% transform: translateY (0); 50% transform: translateY (-100%); 100% transform: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transform: translateY (100%); 60% transform: translateY (0); 90% transform: translateY (0); 100% transform: translateY (-100%);
- Próbny
- Pobierz źródło
Wniosek
Pomimo braku bieżącej obsługi przeglądarki, animacja CSS3, jeśli zostanie wykonana prawidłowo, niewątpliwie rozwiąże wiele problemów użyteczności w przyszłości, jak to zrobiliśmy w tym przykładzie. Jeśli potrzebujemy tylko krótkiej animacji przeznaczonej dla nowoczesnych przeglądarek, użycie CSS3 Animation jest prawdopodobnie lepsze niż ładowanie skryptu jQuery.
Wreszcie, zdajemy sobie sprawę, że ten artykuł może być nieco przytłaczający dla niektórych osób, więc jeśli masz jakiekolwiek pytania dotyczące tego artykułu, możesz go opublikować w sekcji komentarzy poniżej.
