"Wysuwająca się chmurka spoza ekranu" - HTML? CSS?

pytanie zadane 18 września 2017 w HTML i CSS przez Liryk Użytkownik (650 p.)

Witam, chciałbym zrobić "chmurke", lub cokolwiek innego które będzie wysuwało się z poza ekranu i przypomni nam o np. zasubskrybowaniu naszego kanału na youtube. (Chcę aby chmurka wysuwała się automatycznie)

Jak to zrobić?

Jeżeli coś za mało dopowiedziałem proszę pisać komentarze!

3 odpowiedzi

odpowiedź 18 września 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)

Zastosuj bibliotekę animate.css (swoją drogą pełną fajnych efektów) albo nawet lepiej na początek sam pokombinuj z

transform: translateX(//kod);
transition: //kod

poczytaj jak to działa, pobaw się.

Podpowiedź: Może przydać ci się dodatkowa klasa :)

Tu masz gotowca ale na początek lepiej sam pomyśl

komentarz 18 września 2017 przez Liryk Użytkownik (650 p.)

Bardzo dziękuje, sam spróbuje coś pokombinować a jak zrobić by wysuwało się automatycznie? I bardzo chciałbym by był o to coś na stylu:

"->(wysuwa się)Psstt! Tak ty!(chowa się)(wysuwa się)Nie zapomniałeś zasubskrybować kanału?

komentarz 18 września 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)

setTimeout i/lub setInterval w Javascript, natomiast do zmiany tekstu użyj właściwości textContent

komentarz 18 września 2017 przez Liryk Użytkownik (650 p.)

o boże nie ogarnę tego xD

odpowiedź 18 września 2017 przez avrack4 Początkujący (370 p.)

zrób jakis element ktory domyslnie bedzie ,,poza ekranem"( mozna zrobic transformem: translateX z ujemna wartoscia, widzialem tez ze mozna marginem). kontener na element musi miec wlasciwosc overflow: hidden zeby po prostu byl niewidoczny. pozniej za pomoca np. vanilla js musisz zmienic wlasciwosc translate x na 0 lub nadac jakas klase ,,pokazujaca" element na jakis trigger (czy to czasowy setTimeout czy na aktualna pozycje widocznego ekranu z offsetem). dla plynnej animacji dodasz transition. najlatwiej byloby znalezc sobie jakies przyklady na code pen albo poradnik na youtubezeby zrozumiec o co chodzi ;)
pozdrawiam