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

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

1 ответ 1

4

Вариант с использованием библиотеки 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>

2
  • так я могу)) просто думал, что есть варианты с фоновой картинкой... в любом случае, спасибо за ответ!
    – Alexashka
    15 апр 2020 в 6:24
  • Можно конечно, но это самый глупый вариант: Вы делаете спрайтовую анимацию поворачивания шестерёнки, делаете 36 кадров (i+10deg) и столько же классов, и переключаете классы каждые 100 прокрученных пикселей)
    – De.Minov
    15 апр 2020 в 6:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.