Zawartość
- 1. Utwórz zmarszczki
- 2. Utwórz przemieszczenie
- 3. Zakończ konfigurację
- 4. Weź mysz
- 5. Wpraw to w ruch
- 6. Dokończ kod
- Dowiedz się więcej w Generate London 2018
Istnieje wiele interesujących efektów, które można dodać do strony, aby zwiększyć zaangażowanie, ale ważne jest, aby wybrać efekty, które dobrze łączą się z ogólną estetyką witryny (dopracuj estetykę witryny za pomocą genialnego narzędzia do tworzenia witryn). Tutaj pokazujemy, jak wprowadzić tętnienia przemieszczenia za pomocą JavaScript. Sprawdź MustafaCelik, aby zobaczyć świetny przykład efektu w akcji.
Chcesz mieć dostęp do analityki zaangażowania? Mogą w tym pomóc usługi hostingowe. I pamiętaj, aby Twoje dane były bezpieczne w najlepszym magazynie w chmurze.
1. Utwórz zmarszczki
Do tworzenia efektów tętnienia zostanie użyty PixiJS, ponieważ zapewnia to proste efekty przemieszczenia. Tutaj kod JavaScript ustawia potrzebne zmienne i ładuje obrazy, aby stworzyć efekt. Po załadowaniu obrazów wywoływana jest funkcja „setup”.
var app = new PIXI.Application (window.innerWidth, window.innerHeight); document.body.appendChild (app.view); app.stage.interactive = true; var posX, displacementSprite, displacementFilter, bg, vx; var container = new PIXI.Container (); app.stage.addChild (kontener); PIXI.loader.add („img / ripple.png”). Add („img / bg.webp”). Load (setup);
2. Utwórz przemieszczenie
W funkcji „setup” tworzony jest sprite przemieszczania, który tworzy efekt ripple, który jest dodawany do filtra przemieszczenia. Następnie ustawia się przeniesienie punktu zakotwiczenia na środek obrazu i umieszczenie na ekranie.
konfiguracja funkcji () {posX = app.renderer.width / 2; displacementSprite = new PIXI.Sprite (PIXI.loader.resources [„img / ripple.png”]. texture); displacementFilter = new PIXI.filters.DisplacementFilter (displacementSprite); displacementSprite.anchor.set (0,5); displacementSprite.x = app.renderer.width / 2; displacementSprite.y = app.renderer.height / 2; vx = displacementSprite.x;
3. Zakończ konfigurację
Aby zakończyć funkcję „setup”, ustawia się skalę filtra przemieszczenia i ustawia się tło. Zwróć uwagę, że skala dla przemieszczenia wynosi „0”, ponieważ zostanie ona ustawiona na wysokość, gdy tylko poruszy się mysz.
app.stage.addChild (displacementSprite); container.filters = [displacementFilter]; displacementFilter.scale.x = 0; displacementFilter.scale.y = 0; bg = nowy PIXI.Sprite (PIXI.loader.resources [„img / bg.webp”]. tekstura); bg.width = app.renderer.width; bg.height = app.renderer.height; container.addChild (bg); app.stage.on („mousemove”, onPointerMove) .on („touchmove”, onPointerMove); pętla(); }
4. Weź mysz
Następny kod po prostu przechwytuje pozycję myszy na osi X przy każdym ruchu myszy. Zostanie to użyte do wywołania efektu przemieszczenia tętnienia, gdy użytkownik poruszy myszką. Większy ruch zwiększy tętnienie.
function onPointerMove (eventData) {posX = eventData.data.global.x; }
5. Wpraw to w ruch
Funkcja „pętli” nieustannie aktualizuje ekran. Prędkość dla osi X jest obliczana na podstawie położenia myszy i tętnienia. Jest to następnie mapowane na filtr, aby uzyskać wartość od 0 do 120.
function loop () {requestAnimationFrame (pętla); vx + = (posX - displacementSprite.x) * 0,045; displacementSprite.x = vx; var disp = Math.floor (posX - displacementSprite.x); if (disp 0) disp = -disp; var fs = map (disp, 0, 500, 0, 120); disp = map (disp, 0, 500, 0,1, 0,6);
6. Dokończ kod
Na końcu funkcji „pętli” duszek jest skalowany do wielkości przemieszczenia, a filtr przeskalowany do głębokości, jaką powinien mieć. Na koniec deklarowana jest funkcja map, która odwzorowuje zakresy wartości na nowe wartości.
displacementSprite.scale.x = disp; displacementFilter.scale.x = fs; } map = function (n, start1, stop1, start2, stop2) {var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2; return newval; };
Znajdź pełny kod tego samouczka w witrynie FileSilo.
Ten artykuł ukazał się pierwotnie w magazynie Web Designer. Zapisz się tutaj.
Dowiedz się więcej w Generate London 2018
Efekty specjalne i nie tylko to kierunek, w którym zmierza sieć i Generuj mówcę. Twórczość Marpiego Marcinowskiego koncentruje się wokół budowania światów 3D, tworzenia wciągających doświadczeń AR, VR i stylowego opowiadania historii.
Jego wykład zabierze Cię w podróż po wszystkich interaktywnych mediach i technologiach oraz spojrzy na to z perspektywy użytkownika.
Nie przegap okazji, kup bilet już teraz
