Page Transition Slide Down & Bounce

Когда я нажимаю кнопку на моей первой веб-странице, я бы хотел, чтобы вторая страница скользила вниз, а затем несколько раз отказывалась. Я до сих пор получил javascript-функцию для действия со слайдом, но я не могу понять, как заставить страницу отскакивать. Есть функция javascript bounce? Должен ли я использовать ключевые кадры? Если я использую ключевые кадры css, как мне связать их с моей начальной функцией javascript?Page Transition Slide Down & Bounce

<script type="text/javascript"> 

(function() { 

    var windowH = $(window).height(), 
     documElem = $(document), 
     slideDownPage = $('.slide-down-page'), 
     content = $('.content'), 
     btns = $('.btn'), 
     animSpeed = 500; 

    slideDownPage.css({ 
     height: windowH + 'px', 
     top: -windowH + 'px' 
    }); 

    content.css({ 
    height: windowH+'px',}) 

    btns.on('click', function(e) { 
     if ($(this).hasClass('open')) { 
      slideDownPage.animate({'top': 0}, animSpeed); 
      content.animate({'margin-top': windowH + 'px'}, animSpeed); 
     } 
     else { 
      slideDownPage.animate({'top': -windowH + 'px'}, animSpeed); 
      content.animate({'margin-top': 0}, animSpeed); 
     } 
     e.preventDefault(); 
    }); 

    documElem.on('scroll', function() { 
     if ($(this).scrollTop() > slideDownPage.height() && slideDownPage.css('top') === '0px') { 
      slideDownPage.css('top', -windowH + 'px'); 
      content.css('margin-top', 0); 
      documElem.scrollTop(0); 
     } 
    });   
})();  
</script>

источник

2015-10-19 toniitony

Вы можете использовать CSS keyframs для этого пример, взятый из How to create bouncing div animation.

HTML:

<div class="bounce"></div>

CSS:

.bounce { 
    -webkit-animation:bounce 1s infinite; 
} 

@-webkit-keyframes bounce { 
     0%  { bottom:5px; } 
     25%, 75% { bottom:15px; } 
     50%  { bottom:20px; } 
     100%  { bottom:0;} 
}

Подробнее о CSS ключевых кадров here.

источник

2015-10-19 16:49:01 Simplicity

спасибо! как бы вы предложили, чтобы я сделал отскок, когда страница скользит вниз? Должен ли я использовать задержку анимации? или есть способ включить ключевые кадры css в моей оригинальной функции javacript? – toniitony

Вы можете использовать javascript/jQuery для добавления класса после 'slideToggle()' или того, что вы используете. @toniitony – Simplicity

Page Transition Slide Down & Bounce

ответ

Смежные вопросы