Как мне задать анимацию с момента загрузки страницы?

113

29 июля 2019, 03:20

Чтобы эффект слайдера был как на этом сайте http://goodsklad24.ru/ То есть при загрузке 1 слайд всегда выезжает сверху. Весь слайдер который я имею вот:

` https://codepen.io/poylar/pen/vvrxVa`

Answer 1

Проблема в том, что первый слайд при загрузке уже стоит в конечной точке анимации. Нужно чтобы изначально слайд был "выше", и с opacity : 0

 $(document).ready(function () {
     // импровизированный стиль при загрузке страницы, чтобы последующая анимация имела точку начала и конец. 
      $('.first-slide').css({marginTop: "-10rem", opacity: "0"});
      // здесь забыли точку в  $('.first-slide') и время проигрывания анимации
      $('.first-slide').animate({ marginTop: "0rem", paddingBottom: "0", opacity: "1" }, 1000);
      $('.second-slide').css({ marginTop: "-20rem", paddingBottom: "20rem", opacity: "0" });
      $('.third-slide').css({ marginTop: "-20rem", paddingBottom: "20rem", opacity: "0" });

    })