анимацию можно на css, скролл вниз на jquery, допустим у нас есть круглая кнопка в виде стрелки вниз(html) -
<a href="#second-screen" class="scroll-down-btn"></a>
Нам нужно повесить анимацию на кнопку(css) -
.scroll-down-btn {
/* Тут стили кнопки, картинки, размеры */
position: relative;
bottom: -15px;
animation: bounce 0.4s infinite; /* Анимацию bounce пропишем ниже */
}
Ну и собственно сама анимация(css) -
@keyframe bounce {
0 {
bottom: 0;
}
100% {
bottom: -15px;
}
}
Ну а теперь нужно, чтоб эта кнопка работала(jQuery) -
$('.scroll-down-btn').on('click', function(e) {
e.preventDefault(); // Запрещаем переход по ссылке
var target: $(this).attr('href'), // Берем значение из ссылки как цель id="second-screen"
destination: $(target).offset().top; // Ищем верхнюю координату у нашей цели
$('body,html').animate({scrollTop: destination}, 500); // Плавно проматываем до цели
});
