Эффект параллакса Mousemove перемещает положение div

139
13

Я пытаюсь создать небольшой эффект параллакса (я не уверен, действительно ли он представляет собой параллакс, но это аналогичная идея). Там, где есть четыре слоя, которые передвигаются с некоторой скоростью при движении мыши.


Я нашел отличный пример, который предлагает нечто похожее на то, что я хочу:


http://jsfiddle.net/X7UwG/2/


Это достигается путем смещения положения фона на div #landing-content при перемещении мыши.


$(document).ready(function(){
$('#landing-content').mousemove(function(e){
var x = -(e.pageX + this.offsetLeft) / 20;
var y = -(e.pageY + this.offsetTop) / 20;
$(this).css('background-position', x + 'px ' + y + 'px');
});
});

Однако я не могу найти способ заставить это работать не в сдвиге background-position, а в сдвиге позиции div. Например, position:relative; и top:x, так что сам div немного перемещается.


Мое рассуждение состоит в том, что div содержит элементы анимации CSS, поэтому он должен быть div с содержимым внутри него, а не фоновым изображением.


Любые решения для этого, используя вышеприведенный код?

спросил(а) 2021-01-25T14:41:20+03:00 4 месяца, 3 недели назад
1
Решение
176

Как насчет использования jQuery.offSet()? Возможно, вы захотите настроить математику/значения, но я думаю, что она должна установить вас в правильном направлении.


$(document).ready(function () {
$('#layer-one').mousemove(function (e) {
parallax(e, this, 1);
parallax(e, document.getElementById('layer-two'), 2);
parallax(e, document.getElementById('layer-three'), 3);
});
});

function parallax(e, target, layer) {
var layer_coeff = 10 / layer;
var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
$(target).offset({ top: y ,left : x });
};

JSFiddle: http://jsfiddle.net/X7UwG/854/

ответил(а) 2021-01-25T14:41:20+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема