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: