Добавить ключевой кадр на изображение параллакса - PullRequest
Новая
       20

Добавить ключевой кадр на изображение параллакса

0 голосов
/ 02 октября 2018

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

ЗДЕСЬ МОЙ JSFIDDLE

HTML: 

<div class="image scene_element scene_element--fadeinupimage"> </div>

</div>
<script src="https://raw.githubusercontent.com/nk-o/jarallax/master/jarallax/jarallax.js"></script>

CSS: 

body {
  height:1000px;
}

.image {
  height:600px;
  width:400px;
  background-image:url("https://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg");
  margin:50px;
  position: relative;
  background-repeat: no-repeat;
    background-position: 50% 50%;
  background-size: cover;
}

@keyframes fadeInUpImage {
  0% {
   /* transform: translate3d(0, 50%, 0);*/
    opacity:0;
    transform: translateY(50%);
  }

  100% {
    opacity:1;
    transform: translateY(0px);
  }
}

.m-scene .scene_element {
  -webkit-animation-duration: 0.80s;
  animation-duration: 0.80s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.m-scene .scene_element--fadeinupimage {
  -webkit-animation-name: fadeInUpImage;
  animation-name: fadeInUpImage; }

JS: 

See the JSDIFFLE
...