Rownanie matematycznie na stopniowe zmniejsznanie

Question

Hej,

Mam pewien problem z bardzo prostym równaniem matematycznym. Miałem zrobiony na stronie taki efekt, że:

Na środku ekranu pojawia się kropka. Kiedy użytkownik rusza myszką na boki, kropka idzie w odwrotnym kierunku od myszki. Im bliżej myszka znajduje się krawędzi, tym bardziej kropka zwalnia. Niestety projekt mi uciekł i nie pamiętam jak zrobiłem równanie. Na chwilę obecną mam zrobione równanie tak, że kropka idzie w przeciwną stronę, ale nie zwalnia.

Mam zrobione tak:

Jeśli ekran użytkownika ma 1500 szerokości:

//Wychwycenie w jakim % znajduje się kursor

(Pozycja kursora / szerokość okna) * 100

//Usunięcie negatywnego wyniku i wyśrodkowanie obiektu (Używam transform translate do przesuwania kropki)

(Pozycja kursora / szerokość okna) * 100) -50)* -1) -50);

I tutaj wszystko działa. Gdy kursor jest na 0, obiekt przesuwa się o 100%, 750px - 50% i 1500px 100%

Teraz nie wiem jak zrobić tak, żeby zwalniał bliżej krawędzi i nawet do niej nie dochodził. Kombinowałem z ^3 oraz / 1000 ale działało to w jedną stronę. Od 50+ działało dobrze, obiekt zwalniał, ale poniżej 50 przyśpieszał.

Zamieszczam ponizej grafik, bo ciezko bedzie troche zrozumiec o co mi dokladnie chodzi:

Comments

Możesz pokazać kod?

---

Hej,

Już udało mi się to rozwiać za pomocą tego:

this.mouse.x = event.clientX;
this.mouse.y = event.clientY;
this.mouse.xNew = (-50 + ((window.innerWidth / 2) - this.mouse.x) / 150);
this.mouse.yNew = (-50 + ((window.innerHeight / 2) - this.mouse.y) / 150);
this.splashPosition.total = ('translate(' + this.mouse.xNew + '%, ' + this.mouse.yNew + '%)');