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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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