Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

JS efekt rozwinięcia napisu

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

JS efekt rozwinięcia napisu

Post 13.12.2017, 18:17:36

Witam

Potrzebuję osiągnąć taki efekt jak na zdjęciu.

https://zapodaj.net/61ab70400bb64.png.html

Jak klikam plus to rozwija się ten niebieski border z napisem na końcu.

Potrzebuję pluginu lub schemat jak to napisać w czystym kodzie.
nefren
Posty: 4
Dołączył(a): 11.12.2017

Re: JS efekt rozwinięcia napisu

Post 13.12.2017, 23:44:52

http://pbc.pm/demo/qnik/
? O to chodziło?
Avatar użytkownikaLuna_s20
Posty: 98
Dołączył(a): 02.05.2014

Re: JS efekt rozwinięcia napisu

Post 14.12.2017, 10:42:01

Super.

Ja działam nad ambitniejszą wersją czuli rysuje ten border po kliknięciu.

Obrazek wyżej pochodzi z tego demka: http://www.demo-ninetheme.com/proland/

Jednak nie potrafię tego "wyjąć z tego szablonu".

Macie jakiś pomysł co dalej.

Jak nie podołam to zastosuję tą łatwiejszą wersję.
nefren
Posty: 4
Dołączył(a): 11.12.2017

Re: JS efekt rozwinięcia napisu

Post 15.12.2017, 05:35:14

Ale wiesz że czy border czy grafikę też możesz narysować css'em? Zawsze kiedy masz możliwość ominięcia jsów, omijaj js'y w myśl zasady że im strona jest lżejsza...tym jest lżejsza ;)

Zerknęłam i coś się te śliczne paseczki rozjeżdżają u nich po zmianie rozdzielczości. Border jest pod tym względem bezpieczniejszy.

Co można zrobić tutaj:
Boks "rysuje się" dzięki css transition. Ale i po onclicku możesz wywołać js'em rozwinięcie do 160x160px (lub tak jak potrzebujesz najpierw wysokość, później szerokość, i podobnie timeoutem ustanowić czas w któym pokaże się napis), a z css usunąć wówczas #sp3:hover>#db3, #db3:hover {} , #sp2:hover>#db2, #db2:hover {} , #sp:hover>#db, #db:hover {}.

Możesz też kliknąć tutaj:
http://cssanimate.com/ i dorzucić rysowaniu się borderka klatki animacji.


W moim przykładzie wysokość i szerokość to 160px, border nie wlicza się w nią więc przed animacją wysokość i szerokość ma 0px. Zwróć uwagę że każdy z 3 elementów ma inną początkową i końcową pozycję top i left, żeby ci się nie rozjechało.
Avatar użytkownikaLuna_s20
Posty: 98
Dołączył(a): 02.05.2014


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Google [Bot] i 9 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51036 zarejestrowanych użytkowników.
Najnowszy użytkownik: habibulakorc


Nasi użytkownicy napisali:

  • 936631 wiadomości
  • w 246942 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)