Вращение фоновой картинки при прокрутке страницы

Question

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

Картинка cog.svg это шестерёнка. При прокрутке страницы нужно заставить её крутиться вокруг своей оси. Медленно, угол поворота 10 градусов на каждые 100рх прокрутки. Крутишь вниз - шестерня вращается по часовой, крутишь вверх - против. Я так понимаю, без яваскриптов не обойтись? Подскажите, пожалуйста, что-нибудь полезное по этому вопросу?

Answer 1

Вариант с использованием библиотеки jQuery

Вращение фоновой картинки при прокрутке страницы

Увы, но вращать фоновую картинку невозможно, по этому будем вращать отдельный элемент с картинкой шестерёнки.

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>

БЛОГ НА HUSL

Вращение фоновой картинки при прокрутке страницы

Ответы (1 шт):