запускать анимацию CSS, когда она видна на свитке - PullRequest
Новая
       39

запускать анимацию CSS, когда она видна на свитке

0 голосов
/ 31 мая 2018

Я создаю свою тестовую веб-страницу и столкнулся с проблемой, на мою проблему было довольно много «ответов», но ни один из них я не смог реализовать в своем коде.Я знаю, что должен использовать javascript, но я не смог заставить его работать.

Итак, мне нужно запустить анимацию движения css на выбранном изображении, когда это изображение видно на экране, когда я прокручиваю его вниз,В основном, как на этой странице: https://www.photoblog.com/

Итак, у меня есть этот код в HTML, как на картинке: 

<img class="movepic" src="pictures/test.jpg">

А затем есть этот простой код для движения CSS: 

.movepic {
position: relative;
animation-name: move;
animation-duration: 3s;
visibility: visible;
animation-fill-mode: forwards;
z-index:10;
}
@keyframes move {
0% { right:0px; top:150px;}
100% {right:700px; top:150px;}
}

Есть ли способ заставить его работать, поэтому мне не нужно полностью переделывать это?Или, если да, могли бы некоторые дать мне совет, как это сделать, возможно, с иллюстрацией кода.

Большое спасибо

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

Я использую этот код для этого эффекта:

HTML : 

<img class="movepic" src="pictures/test.jpg">

CSS : 

.movepic {
  opacity: 0;
  margin: 25px 0 0;
  color: white;
  padding: 10px;
 }

.FadeIn {
    -webkit-animation: slideIn 0.8s ease 0.3s forwards;
    animation: slideIn 0.8s ease 0.3s forwards;
}

@keyframes slideIn {
    0% {
        -webkit-transform: translateY(40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

JQuery : 

var $fade =  $(".movepic"); //Calling the class in HTML

$(window).scroll(function () { //Using the scroll global variable
    $fade.each(function () {

        fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
        windowBottom = $(window).scrollTop() + $(window).height();

        if (fadeMiddle < windowBottom) {
          $(this).addClass("FadeIn");
        }
    });
});

/* On Load: Trigger Scroll Once*/
$(window).scroll();
0 голосов
/ 31 мая 2018

Удалите animation-name из вашего правила стиля: 

.movepic {
    position: relative;
    animation-duration: 3s;
    animation-fill-mode: forwards
    visibility: visible;
    z-index:10;
}

и добавьте этот класс в таблицу стилей: 

.animation-class {
    animation-name: move
}

Теперь добавьте jQuery: 

var has_fired;
$("html").on("scroll", function () {
    if (!has_fired && $(this).scrollTop() >= $("#imgContainer").offset().top) {
        $("#imgContainer").addClass("animation-class");
        has_fired = true; // use this if only want fired once
    }
});

Теперь анимация запустится.Кстати, я бы добавил ID (imgContainer) к вашему интересующему контейнеру и использовал бы его как селектор для сопоставления, потому что, если .movepic не является уникальным классом, эта функция будет срабатывать для любого контейнера с классом .movepic (если селектор .movepic является).

...