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

Jak został stworzony efekt animacji z tej strony internetowej?

0 głosów
228 wizyt
pytanie zadane 28 sierpnia 2016 w HTML i CSS przez Spiral Obywatel (1,310 p.)
edycja 28 sierpnia 2016 przez Spiral

http://kuvi.pl/logowanie?redirect=http%3A%2F%2Fkuvi.pl%2Fkursy-do-nauki%2F27%2Fpraktyczny-kurs-jquery-wprowadzenie%2F405%2Fzapowiedz-dalszej-czesci-kursu-i-strona-z-ajaxem

Na podanej wyżej stronie został zastosowany bardzo ciekawie wyglądający efekt animowanych kresek w miejscu tła, w którym znajduje się kursor. Podobne efekty widziałem już na innych stronach, i za każdym razem bardzo mnie intrygowały.

Proszę o naprowadzenie mnie na to na jakiej zasadzie działa, najlepiej wraz z tym, że pojawia się tylko w okolicach kursora.
Jeśli istnieje do tego tutorial, to będę bardzo wdzięczny za podlinkowanie.

3 odpowiedzi

+1 głos
odpowiedź 28 sierpnia 2016 przez Szymon Lisowiec Mądrala (7,190 p.)
wybrane 28 sierpnia 2016 przez Spiral
 
Najlepsza

Ten efekt jest już na tylu stronach (głównie darmowych szablonach), że aż się rzygać chce.
Jest to canvas (element HTML5 do rysowania grafiki za pomocą JavaScript), tutaj JS przechwytuje pozycję kursora i wg. niego rysuje "siatkę".

Jeżeli chcesz się temu dokładnie samemu przyjrzeć: http://tympanus.net/codrops/2014/09/23/animated-background-headers/

0 głosów
odpowiedź 28 sierpnia 2016 przez ZakosiliMiNeta Nałogowiec (31,170 p.)
Z mojej analizy wynika, że te kropeczki są wygenerowane na całej stronie i połączone ze sobą. Potem te kropeczki poruszają się w losowe miejsca i generując "nowe" linie, a sama animacja jest wyświetlona np w promieniu 200 pixeli od myszki. Będąc sprytnym, możesz podejrzeć kod tej strony bo jest to animacja w canvasie
0 głosów
odpowiedź 28 sierpnia 2016 przez R.orlinski Mądrala (5,330 p.)
Particles.js.

Podobne pytania

0 głosów
1 odpowiedź 33 wizyt
pytanie zadane 2 lutego w HTML i CSS przez Mateusz Kacprzak Początkujący (340 p.)
0 głosów
2 odpowiedzi 91 wizyt
pytanie zadane 19 stycznia w HTML i CSS przez Grzegorz Mikina Gaduła (3,370 p.)
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

63,167 zapytań

109,404 odpowiedzi

228,554 komentarzy

42,692 pasjonatów

Przeglądających: 59
Pasjonatów: 8 Gości: 51

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...