How to create illustration in CSS and JS on Scroll

Question

I have seen a website and started thinking how to create a illustration of paper rocket moving in cubic beizer as in https://www.atlassian.com/

website. Help me do it with CSS on scroll. I tried the following code but failed.

$(function() {
    var rotation = 0, 
        scrollLoc = $(document).scrollTop();
    $(window).scroll(function() {
        var newLoc = $(document).scrollTop();
        var diff = scrollLoc - newLoc;
        rotation += diff, scrollLoc = newLoc;
        var rotationStr = "rotate(" + rotation + "deg)";
        $(".plane").css({
            "-webkit-transform": rotationStr,
            "-moz-transform": rotationStr,
            "transform": rotationStr
        });
    });
})

body {
  overflow-x: hidden;
}
.container {
  width: 100%;
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="container">
    <img class="plane" src="https://wac-cdn.atlassian.com/dam/jcr:db49283c-bf71-4ec4-b14c-fbc36a121b2f/plane-2.png?cdnVersion=ll" alt="" data-0="transform: translate3d(0px, 0px, 0)" data-1600="transform: translate3d(1600px, 200px, 0)" class="skrollable skrollable-between" style="transform: translate3d(228px, 28.5px, 0px);" width="168" height="36"> 
</div>

@haim770 it is the class for img tag, please see this, Thank you — Madhu, Jun 05 '18 at 16:00
You can find this example [helpful][1] but you'll have to add Javascript to handle the user scrolling. [1]: https://codepen.io/chris-creditdesign/pen/blJty — Martin, Jun 05 '18 at 16:00
Possible duplicate ["How do I make an image move when i scroll down? "](https://stackoverflow.com/questions/45822953/how-do-i-make-an-image-move-when-i-scroll-down) — Alex, Jun 05 '18 at 16:01
@Alex Please do not downvote or mark as spam. I just wanted to learn CSS and JS. — Madhu, Jun 05 '18 at 16:04
@Madhu I did not downvote or mark as spam. I just notified you that your solution is already out there. :) — Alex, Jun 05 '18 at 16:06
I don't understand. What is or is not working now? The plane spins whenever I scroll. — zero298, Jun 05 '18 at 16:15
@zero298 I want the plane to move in the direction as in the website provided(https://atlassian.com) like the projectile motion — Madhu, Jun 05 '18 at 16:20

zero298 · Accepted Answer · 2018-06-05T16:55:15.700

1

If you want the plane to move around, rather than rotate, then you use use translate3d instead or rotation.

$(function() {

  function updateTranslation(el, x) {
    const y = (Math.cos(x*0.015) * 50) + 100;
    const tStr = `translate3d(${-x}px, ${y}px, 0px)`;

    $(".plane").css({
      "-webkit-transform": tStr,
      "-moz-transform": tStr,
      "transform": tStr
    });
  }
  var translation = 0,
    scrollLoc = $(document).scrollTop();

  updateTranslation($(".plane"), 0);

  $(window).scroll(function() {
    var newLoc = $(document).scrollTop();
    var diff = scrollLoc - newLoc;
    translation += diff, scrollLoc = newLoc;
    updateTranslation($(".plane"), translation);
  });
})

body {
  overflow-x: hidden;
}

.container {
  width: 100%;
  height: 1000px;
}

img {
  position: fixed;
 /* transition: transform 100ms ease;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="container">
  <img class="plane" src="https://wac-cdn.atlassian.com/dam/jcr:db49283c-bf71-4ec4-b14c-fbc36a121b2f/plane-2.png?cdnVersion=ll" alt="" width="168" height="36">
</div>

edited Jun 05 '18 at 16:55

answered Jun 05 '18 at 16:41

zero298

25,467
10
75
100

I didn't get what you said and thanks for your answer – Madhu Jun 05 '18 at 16:45
@Madhu What do you mean? Does something not make sense? – zero298 Jun 05 '18 at 16:46
the rocket should move in the curve motion like in the website. – Madhu Jun 05 '18 at 16:49
@Madhu like this? – zero298 Jun 05 '18 at 16:55
Yeah, you got it – Madhu Jun 05 '18 at 16:57

How to create illustration in CSS and JS on Scroll

1 Answers1