Красивая задача. Картинки и параллакс

@Pepeka · Регистрация: 15.01.2014

Студворк — интернет-сервис помощи студентам

Всем привет!

Задача такая...

Есть 3 картинки, полупрозрачные, размер допустим 1280 на 1040 точек каждая. Есть DIV, таким же размером, в котором картинки наложены ровно одна на другую.

Что нужно... За исходную точку берём середину DIV, центр по горизонтали и вертикали. При попадании курсора мыши в область DIV (hover или mouseover) - нужно получить смещение мыши по X и Y относительно центра, и переместить картинки в диагонально противоположном направлении от центра, но каждую со своим шагом.

То есть, например, мышь сместилась по X на 100 точек (пусть это будет переменная A, A=100), а по Y на -200 точек (переменная B, B=-200), относительно центра пресловутого DIV...
Соответственно, первая картинка смещается на -1*A*kx1, а по Y на -1*B*ky1, где kx1 и ky1 - коэффициенты смещения для картинки 1. Итого, смещение картинки 1 будет выглядеть по Х: -100*kx1, и по Y: 200*ky1

Ну и то же самое для остальных картинок, каждую со своим коэффициентом.

Как реализовать сий сложный параллакс комплекс на JQ? Спасибо!

@Lazy_Den · 18.11.2015, 19:42

Pepeka, может я чего не так понял, но набросал вам такой пример. Если что не так, то уточняйте, укажите более точную формулу расчетов, которая вам нужна.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function () {
    var area = $('#area'),
        x = area.offset().left + area.width() / 2 - 75,
        y = area.offset().top + area.height() / 2 - 75,
        factors = [.5, .8, .2],
        posX, posY;
    area.on('mousemove', function (e) {
        posX = x - e.pageX;
        posY = y - e.pageY;
        $('img', this).each(function (i, el) {
            $(el).css({
                marginLeft: posX * factors[i],
                marginTop: posY * factors[i]
            });
        });
    });
});

@Pepeka · 18.11.2015, 19:55 **[ТС]**

Эммм.. Да всё вроде так и есть. Противоположнодиаметральное движение со своим коэффициентом...

Непонятно мне вот только... Что такое в формуле ".../ 2 - 75"?
И как скрипт различает картинки? Просто по счёту - первая, вторая, третья найденная? И в соответствии с этим порядком применяет к каждой свой коэффициент, тоже по порядку стоящие, из массива?

@Lazy_Den · 18.11.2015, 20:00

Сообщение от Pepeka

то такое в формуле ".../ 2 - 75"?

Половина ширины области и минус половина ширины картинки (в примере все они по 150px). Может где с расчетами и ошибся. Под вечер бошка уже туго соображает.

Сообщение от Pepeka

И как скрипт различает картинки?

В цикле перебирает каждую в нашей области, по её индексу достаёт коэффициент из массива.

@Pepeka · 18.11.2015, 20:08 **[ТС]**

Сообщение от Lazy_Den

по её индексу достаёт коэффициент из массива

Мгм... А если смещение по X и Y - это 2 разных числа? То бишь, для каждой картинки 2 коэффициента, по идее - смещение по X и смещение по Y. А у Вас, как я понимаю, в примере один и тот же коэффициент применяется и для смещения по X, и для смещения по Y?

@Lazy_Den · 18.11.2015, 20:19

Сообщение от Pepeka

для каждой картинки 2 коэффициента

Создайте двумерный массив и все дела.

@Pepeka · 18.11.2015, 20:29 **[ТС]**

Сообщение от Lazy_Den

Создайте двумерный массив и все дела.

Всё, понял, ок. Низкий поклон и спасибо! )

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@Pepeka 171 / 170 / 36 Регистрация: 15.01.2014 Сообщений: 1,010

	Красивая задача. Картинки и параллакс 18.11.2015, 11:46. Показов 1276. Ответов 6 Метки нет (Все метки) Всем привет! Задача такая... Есть 3 картинки, полупрозрачные, размер допустим 1280 на 1040 точек каждая. Есть DIV, таким же размером, в котором картинки наложены ровно одна на другую. Что нужно... За исходную точку берём середину DIV, центр по горизонтали и вертикали. При попадании курсора мыши в область DIV (hover или mouseover) - нужно получить смещение мыши по X и Y относительно центра, и переместить картинки в диагонально противоположном направлении от центра, но каждую со своим шагом. То есть, например, мышь сместилась по X на 100 точек (пусть это будет переменная A, A=100), а по Y на -200 точек (переменная B, B=-200), относительно центра пресловутого DIV... Соответственно, первая картинка смещается на -1Akx1, а по Y на -1Bky1, где kx1 и ky1 - коэффициенты смещения для картинки 1. Итого, смещение картинки 1 будет выглядеть по Х: -100kx1, и по Y: 200ky1 Ну и то же самое для остальных картинок, каждую со своим коэффициентом. Как реализовать сий сложный параллакс комплекс на JQ? Спасибо! 0

@Pepeka 171 / 170 / 36 Регистрация: 15.01.2014 Сообщений: 1,010
	18.11.2015, 19:55 [ТС]
	Эммм.. Да всё вроде так и есть. Противоположнодиаметральное движение со своим коэффициентом... Непонятно мне вот только... Что такое в формуле ".../ 2 - 75"? И как скрипт различает картинки? Просто по счёту - первая, вторая, третья найденная? И в соответствии с этим порядком применяет к каждой свой коэффициент, тоже по порядку стоящие, из массива? 0

Красивая задача. Картинки и параллакс

Решение