Анимированная бесконечная прокрутка фонового изображения - PullRequest
Новая
       24

Анимированная бесконечная прокрутка фонового изображения

1 голос
/ 03 июля 2019

Хочу бесконечную прокрутку. Анимируем фоновое изображение. Как я могу установить его просто идти вверх постоянно, а не возвращаться вниз? тем не менее, это дает толчок. Как это возможно? Пожалуйста, помогите кому-нибудь знать это.

У меня есть ссылка: http://herinshah.com/wp/fortiflex/5-2/

CSS: 

.et_pb_section.landing-page .et_pb_column_3_5 {
  background-color: #f6eb00;
  margin-right: 1%;
  padding: 0 10px;
  height: 100vh;
  background-image: url(images/ragazzi-logo.png);
  background-position: 0 0;
  background-size: cover;
  -webkit-animation: upward 15s linear infinite;
  animation: upward 15s linear infinite;
  border-right: 4px solid #000;
  display: block;
  background-repeat: repeat-y;
}

@-webkit-keyframes upward {
  to {
    background-position: 0 0;
  }
  from {
    background-position: 0 2174px;
  }
}

@keyframes upward {
  to {
    background-position: 0 0;
  }
  from {
    background-position: 0 2174px;
  }
}

Ответы [ 3 ]

1 голос
/ 03 июля 2019

Я чувствовал себя настолько вынужденным ответить на это, потому что я сделал нечто подобное: раньше (каламбур) и ваша анимация пропускала мне рак.

Вам нужно возиться с псевдо:после элемента и получить правильную высоту.Это должно помочь вам начать работу.

Кроме того, ваше изображение не совсем правильно обрезано, поэтому исправьте это, и все будет хорошо. 

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>Test</title>
  </head>
  <body onload="onloaded()">
    <div class="foo_section">
      <div class="foo_container">
        <img class="foo_image" src="http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png" />
      </div> 
    </div>
  </body>
</html>

.foo_section {
  width: 100vw;
  height: 100vh;
  position: fixed;
  min-height: 400px;
}

.foo_container {
  width: 100%;
  position: relative;
  animation: infiniteScrollBg 10s infinite linear;
}

.foo_container:after {
  content: "";
  height: 500%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #f6eb00;
  background-image: url('http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png');
  background-size: 100% 20%;
}

.foo_image {
  width: 100%;
}

@-webkit-keyframes infiniteScrollBg {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-200%);
  }
}

Codepen

Я вижу, вы тоже используете Элегантные темы.<3 Divi строитель </p>

1 голос
/ 03 июля 2019

Вам нужно обернуть div внутри div.Вот рабочая скрипка для того же
HTML 

<div class="main">
    <div class="holder"></div>
</div>

CSS 

     *{
      margin:0;
      padding:0
    }

    .main {
      height: 100vh;
      overflow: hidden;
    }

    .holder {
      height: 200vh;
      -webkit-animation: upwards 2.5s linear infinite;
      animation: upward 2.5s linear infinite;
      background: url(http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png)  center yellow;
      background-size: 100% 50%;
    }

    @-webkit-keyframes upward {
     from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
     }
    }

    @keyframes upward {
      from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -100%;
     }
    }
0 голосов
/ 03 июля 2019

Я предлагаю вам иметь два div тега с одинаковым background. Затем анимируйте тот же div и поиграйте с позиционированием divs и анимируйте, чтобы он выглядел непрерывно с прокруткой вверх. 

.container{
  width:600px;
  height:400px;
  background-color:yellow;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}
.bg{
  width:100%;
  height:400px;
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute;
  bottom:0;
}
.bg.bg1{
  transform: translate(0,0);
   animation: upward 3s linear infinite;
}
.bg.bg2{
  transform: translate(0,100%);
  animation: upward2 3s linear infinite;
}

@keyframes upward {
    to {
         transform: translate(0,-100%);
    }
    from {
       transform: translate(0, 0);
    }
}
@keyframes upward2 {
    to {
      transform: translate(0,0);
    }
    from {
      transform: translate(0,100%);
    }
}

Вот как бы я это сделал. мой кодовый блок .

...