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.

score 0 · Accepted Answer · answered Feb 22 '20 at 18:29

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.

Thanks, it helped a lot ! That is what I was trying to do, I guess I was confuse between the parallax and the animation made by the css, really thought all the movement in the example was made with the parallax effect. Thanks again ! — Dips, Feb 23 '20 at 18:34
No problem! Parallax essentially refers to the background being scrolled at a different speed than the foreground. Your example does use Parallax but that isn't what gives the "sway" effect of the clouds. [Here is a](https://codepen.io/RenanB/pen/GZeBNg) good demo of simple Parallax effect. — Matt Oestreich, Feb 23 '20 at 18:39

parallax-js : make the element moving by itself

1 Answers1