JS dobry sposób na oznakowanie efekt z linii

Question

Jest to efekt wskazując na specjalnym elemencie obrazu z linii. Zobacz przykład krokodyla w http://snapsvg.io/.
Gdy pojawi się obraz na początku tam nie ma żadnego wskazując linii:

Następnie po przewijanie pojawia linii z nutami:

wiem, że jest https://github.com/julianlloyd/scrollReveal.js i wiele innych bibliotek js dla efektu pojawiania się.

Pytanie brzmi: jak zrobić te linie, umieścić je dokładnie w punkcie na górze zwykłego obrazu (bez SVG) i animować linie podczas przewijania?

Byłoby świetnie znać nazwę tego podejścia/efektu (co to google) i zobaczyć opinie na temat dobrych/złych doświadczeń lub bibliotek js.

Aktualizacja: chcą zobaczyć rozwiązany problem ze zmianą rozmiaru obrazu i dokładnym wskazując,

W większości przypadków, patrz przykład na http://www.sitmed.com.br/produto?id=2, obraz został ustalony isze i nie jest skalowalny, to nie będzie działać dla małych i dużych ekrany. myślę, że to jest możliwe napisanie skalowania bibliotekę javascript, używając svg/płótno lub nawet zwykły div. Punkty zerowe będą przeskakiwać po skalowaniu obrazu.

Answer 1

Aby te linie i umieścić je w dokładnej pozycji:

Najprostszym jest użycie płótna lub SVG. Oto kilka linków do tego.

Drawing lines on html page

Drawing arrows on an HTML page to visualize semantic links between textual spans

Umieszczenie linii jest łatwe, jeśli używasz płótnie. Jeśli używasz obrazów dla linii, możesz umieścić te linie w odniesieniu do wielkiego krokodyla. Nic takiego.

---

linie Animowanie na przewijanie

dobre miejsce, aby zacząć wiedząc o animacji jest nauczyć żadnych ram animacji. Sugerowałbym platformę animacji Greensock (GSAP). Jest open source, a także dobrze obsługiwany. Mają dobre samouczki i dokumenty dla początkujących. Możesz animować w bardzo abstrakcyjny sposób za pomocą GSAP. Rapheal.js jest również dobry do animowania obrazów svg. chodzi o jak przewijanie jest zaniepokojony, można znaleźć wiele wtyczek w tym jeden, który jest wymieniony w pytaniu.

Answer 2

Wystarczy użyć biblioteki paralaksy TYP przewijanie js takich jak Skrollr. Bardzo łatwo jest po prostu ustawić linię jako element div z kolorem tła, a następnie podczas przewijania strony długość elementu div rośnie.

Answer 3

Efekt opisujesz kojarzy mi szukasz czegoś podobnego wykresu „łączników” Flow lub organizacja, która kotwica strzałki na wykresie skleić punktów na każdym elemencie.W bardziej ogólnej terminologii graficznej są one prawdopodobnie znane jako "punkty zakotwiczenia linii" lub coś podobnego.

JointJS to świetna biblioteka do rysowania i rysowania dla HTML5 i SVG, która może sprawić, że to, co robisz, jest dość łatwe, ale prostsze "tylko CSS" może być wszystkim, czego potrzebujesz. Jeśli naprawdę chcesz animować obraz, warto zastosować bardziej wyrafinowane podejście do biblioteki javascript. JointJS używa Raphael i Backbone.js, więc dostajesz dużo narzędzi elektrycznych w pudełku.

Answer 4

Możesz użyć biblioteki this do rysowania linii SVG, całkiem konfigurowalnej i dobrze udokumentowanej. Zasadniczo musisz określić elementy "Od" i "Do", a linia połączy je dla Ciebie.

Następnie można odtwarzać z właściwościami linii stroke-dasharray i stroke-dashoffset podczas przewijania, aby uzyskać efekt rysowanej linii.

Więcej animacji SVG here

Użyłem tego podejścia i jego dość chłodno patrząc nadzieję, że to pomaga

Answer 5

Myślę, że najlepszym sposobem wdrożenia to zależy w dużej mierze od tego, co animacja idziesz do. Aby odtworzyć coś podobnego do tego w twoim przykładzie, możesz po prostu układać różne obrazy (jeden dla krokodyla, a drugi dla każdego komponentu). Następnie, podczas przewijania, możesz zmienić indeks Z z krokodyla i użyć animacji css do "chybotania" rozmiaru elementu, który właśnie ujawniłeś. Umieść wszystkie obrazy w jednym div, aby upewnić się, że skalują się razem i ładnie układają się i gotowe.

Ale dla czegoś innego dzieło może być zupełnie inne od zaskakująco podobnego, tak naprawdę nie sądzę, że istnieje jedno rozwiązanie, które pasowałoby do wszystkich potrzeb, z wyjątkiem sytuacji, gdy chcemy użyć płótna, jak już sugerowaliśmy, ale to zależy od złożoności grafiki, którą chcesz ujawnić.