• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
415 wizyt
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

+1 głos
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
0 głosów
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
0 głosów
odpowiedź 19 września 2017 przez zgrybus Pasjonat (24,860 p.)
Mała podpowiedź https://codepen.io/anon/pen/ZXQRpE

Kod ogólnie ma błędy i kilka bugów, ale "początek masz". :)

Podobne pytania

–1 głos
2 odpowiedzi 376 wizyt
pytanie zadane 4 marca 2017 w HTML i CSS przez sprytny22 Obywatel (1,130 p.)
0 głosów
2 odpowiedzi 563 wizyt
pytanie zadane 4 stycznia 2017 w HTML i CSS przez Latajace_kolano Nowicjusz (120 p.)
+1 głos
5 odpowiedzi 373 wizyt
pytanie zadane 6 grudnia 2015 w HTML i CSS przez Zine Obywatel (1,000 p.)

92,454 zapytań

141,262 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...