0

я сейчас делаю простенький сайт на реакт, и вот у меня, как у новичка возникла такая проблема. Я хотел сделать параллакс, допустим у меня есть горы, за ними еще горы и небо. Когда мышка двигается влево, то ближайшие горы двигаются быстрее, задние медленнее, а небо вообще почти стоит. И в принципе посмотрев видео ролик, я примерно понял как делать на js(рис. 1). Но на реакте, насколько я понимаю нельзя искать элемент (ну или хотя бы не нужно) через DOM дерево, тем самым я не могу поменять стили этому элементу. Обычно я меняю стили на реакте вот так (рис. 2). Но тут у меня проблема, так как при каждом перемещение мышки translate должен менять значение, а если использовать такой метод, то получается я могу сделать translate только фиксированный. На данный момент я сделал такой параллакс(рис 3,4), то есть разделил экран на две части, если мышка слева, то он сдвинулся один раз влево, а если справа, то один раз вправо(мне это решение не очень нравится, поэтому если я очень плохо сделал не оскорбляйте, а просто поправьте и подскажите). Ну так вот, а я хочу не чтобы как у меня один раз влево, а чем мышка дальше, тем он медленнее двигается. Вот пример такого параллакса(на демо нажмите) https://yootheme.com/blog/2014/03/02/frequency-theme. Я мог бы оставить все как есть, но хочу разобраться. Заранее спасибо за понимание и помощь. imageimageimageimage [5 вложений]

1
  • Поменьше кода, побольше текста бы. И можно выложит пример ваш либо прямо тут как сниппет, либо на codesandbox.io либо на jsfiddle.net Так будет проще разобраться :)
    – Dimabytes
    3 июл 2020 в 23:01

1 ответ 1

0

Примерные стили которые ты должен использовать

position: relative;
display: block;
height: 100%;
width: 100%;
left: 0px; 
top: 0px; 
transform: translate3d(x, y, z); 
transform-style: preserve-3d; 
backface-visibility: hidden;

Вместо (x,y,z) создай переменные и управляй от курсора. Согласен с @Dimabytes что если ты выложишь фрагмент кода на один из сервисов будет на много проще разобраться и помочь тебе.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.