Rotation of the background image when scrolling the page

Question

Rotation of the background image when scrolling the page

body {
    background-image:url(cog.svg);
    background-size:auto 100%;
    background-position:center;
    background-attachment:fixed;
}

The picture cog.svg is a gear. When you scroll the page, you need to make it rotate around its axis. Slowly, the rotation angle is 10 degrees for every 100px of scrolling. Turn down-the gear rotates clockwise, turn up-against. I take it you can't do without javascript? Please tell me something useful on this issue?

2

javascript css анимация

Author: Alexashka, 2020-04-15

Source

1 answers

score 3 · Answer 1

Option using the jQuery

Rotation of the background image when scrolling the page

Unfortunately, it is not possible to rotate the background image, so we will rotate a separate element with a picture of a gear.

let way = 100, // кол-во пройденных пикселей
    deg = 10;  // угол поворота за пройденный путь
    
$(window).on('scroll', function(){
  let s = $(this).scrollTop();
  $('.rotate-icon').css('transform', 'rotate('+(s / way * deg)+'deg)');
});

body {
  height: 4000px;
}

.rotate-icon {
  width: 50px;
  height: 50px;
  background: url('https://img.icons8.com/plasticine/2x/settings.png') no-repeat center center / cover;
  position: fixed;
  top: 10px;
  left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="rotate-icon"></div>