Как увеличить скорость анимации фона CSS3 с помощью JQuery $ (window) .scroll (function () {}}); - PullRequest
Новая
       23

Как увеличить скорость анимации фона CSS3 с помощью JQuery $ (window) .scroll (function () {}});

0 голосов
/ 01 мая 2019

Попытка вытащить из довольно сладкой анимации.Итак, у меня есть немного кода CSS3 ниже: 

    body{
    margin:0;
    padding:0;
    font-family:"arial",heletica,sans-serif;
    font-size:12px;
        background: grey url('images/darkness.png') repeat 0 0;
    -webkit-animation: 30s linear 0s normal none infinite animate;
    -moz-animation: 30s linear 0s normal none infinite animate;
    -ms-animation: 30s linear 0s normal none infinite animate;
    -o-animation: 30s linear 0s normal none infinite animate;
    animation: 30s linear 0s normal none infinite animate;

    }

    @-webkit-keyframes animate {
    from {background-position:0 0;}
    to {background-position: 0 500px;}
    }

    @-moz-keyframes animate {
    from {background-position:0 0;}
    to {background-position: 0 500px;}
    }

    @-ms-keyframes animate {
    from {background-position:0 0;}
    to {background-position: 0 500px;}
    }

    @-o-keyframes animate {
    from {background-position:0 0;}
    to {background-position: 0 500px;}
    }

    @keyframes animate {
    from {background-position:0 0;}
    to {background-position: 0 500px;}
    }

То, что он делает, это перемещает симметричное изображение вверх по экрану, давая крутой эффект.Когда я прокручиваю страницу, то есть это: 

    $(document).ready(function(){
  $(window).scroll(function() {

Я хочу увеличить скорость этой анимации или сделать так, чтобы она немного плавно прыгала.Вот как я думал, что могу достичь этого: 

    $(document).ready(function(){
  $(window).scroll(function() {
      if($(this).scrollTop() > 200) {
         $('body').animate({'background-postion': '0 +=500px'}, 500);
    }
  });
    });

Но это не работает.Поэтому, если у вас есть какие-либо советы или идеи, которые могут помочь, это будет оценено 11/10.

(Возможно, было бы целесообразно, чтобы вся анимация исходила из Jquery, а не из CSS - в любом случае, я 'немного поиграюсь и обновлю, если найду работающее решение.)

...