параллакс- js: заставить элемент двигаться сам - PullRequest
Новая
       13

параллакс- js: заставить элемент двигаться сам

0 голосов
/ 22 февраля 2020

Следуя инструкциям: https://github.com/wagerfield/parallax/issues/277

Я пытаюсь сделать параллакс, он работает, когда моя мышь двигается, но я бы хотел, чтобы он двигался сам по себе, как облака здесь: https://codepen.io/CSS_Masters/pen/dCEoK

Вот мой html файл: 

<div id="scene" data-relative-input="true">
    <div data-depth="0.2" class="left-position" ><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic ") %></div>
    <div data-depth="0.4" class="left-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
    <div data-depth="0.7" class="left-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "big-pic") %></div>
    <div data-depth="0.8" class="left-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic") %></div>
    <div data-depth="0.1" class="left-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
    <div data-depth="0.6" class="middle-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "big-pic") %></div>
    <div data-depth="0.2" class="middle-position-1"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic") %></div>
    <div data-depth="0.4" class="middle-position-6"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
    <div data-depth="0.7" class="middle-position-5"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "big-pic") %></div>
    <div data-depth="0.8" class="middle-position-3"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic") %></div>
    <div data-depth="0.1" class="middle-position-4"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
    <div data-depth="0.6" class="bottom-position"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "big-pic") %></div>
    <div data-depth="0.2" class="bottom-position-1"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic") %></div>
    <div data-depth="0.4" class="bottom-position-2"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
    <div data-depth="0.7" class="bottom-position-3"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "big-pic") %></div>
    <div data-depth="0.8" class="bottom-position-4"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "small-pic") %></div>
    <div data-depth="0.1" class="bottom-position-5"><%= image_tag("https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png", class: "middle-pic") %></div>
</div>

Мой машинописный файл: 

import Parallax from 'parallax-js'

export default () => {
    var scene = document.getElementById('scene');
    var parallaxInstance = new Parallax(scene, {
        relativeInput: true, 
        calibrationThreshold: 100,
        calibrationDelay: 500,
        supportDelay: 500,
        calibrateX: false,
        calibrateY: true,
        invertX: true,
        invertY: true,
        limitX: false,
        limitY: false,
        scalarX: 10.0,
        scalarY: 10.0,
        frictionX: 0.4,
        frictionY: 0.4
    });
}

Как мне это сделать двигаться само по себе, как облака в примере? Я пытался установить атрибуты frictionX и frictionY, но он не работает.

1 Ответ

0 голосов
/ 22 февраля 2020

Немного трудно понять, в чем именно заключается ваша проблема .. Поэтому я отвечу на вопрос:

"Как я могу заставить его двигаться как облака в примере ? "

" Движение ", которое вы видите, не имеет ничего общего с параллаксом и относится к правилу CSS ключевых кадров .

Эта документация содержит несколько отличных примеров и демонстраций о том, как настроить анимацию с ключевыми кадрами. Трудно предложить какой-либо другой совет, так как вы не даете нам указанную проблему c.

Вы можете сделать что-то вроде этого, чтобы сделать изображение «качающимся»: 

.small-pic {
  height: 150px;
  width: 150px;
  -moz-animation: 5s ease 0s normal none infinite swing;
  -moz-transform-origin: center top;
  -webkit-animation: swing 5s infinite ease-in-out;
  -webkit-transform-origin: top;
}

@-moz-keyframes swing {
  0% {
    -moz-transform: rotate(-15deg);
  }
  50% {
    -moz-transform: rotate(15deg);
  }
  100% {
    -moz-transform: rotate(-15deg);
  }
}
@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate(-15deg);
  }
  50% {
    -webkit-transform: rotate(15deg);
  }
  100% {
    -webkit-transform: rotate(-15deg);
  }
}


.align-center {
  text-align: center;
}
<div class="align-center">
  <img 
    src="https://ekladata.com/15mPtZjqIvkzXob44Uk7C8LTSOg.png" 
    class="small-pic" 
  />
</div>

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

Если бы вы захотели, вы могли бы потратить некоторое время, выбирая приведенный вами пример отдельно, чтобы лучше узнать, как это делается.

...