parallax-js : make the element moving by itself

Question

Following the tutorial : https://github.com/wagerfield/parallax/issues/277

I try to make some Parallax, It works when my mouse move but I would like to make it move by itself like the clouds here : https://codepen.io/CSS_Masters/pen/dCEoK

Here is my html file :

<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>

My typescript file :

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
    });
}

How can I make it move by itself like the clouds in the example ? I tried to set the attribute frictionX and frictionY but it does not work.

Answer 1

It's a little hard to understand what the exact issue you are having is.. So I will answer the question:

"How can I make it move by itself like the clouds in the example?"

The "movement" you are seeing has nothing to do with parallax, and is all about the CSS keyframes rule.

This documentation has some excellent examples and demos on how to configure animations with keyframes. It's hard to offer any other advice since you are not presenting us with a specific issue.

You can do something like this to make the image appear to "swing":

.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>

With that being said, the example you provided it a very complex example and the parts you are asking about have nothing to do with parallax (specifically referring to the movement of the clouds). Furthermore, that example has all of the code needed to understand how they accomplish that.

If you wanted to, you could spend some time picking the example you provided apart, in order to become more familiar with how it is done.