Я хочу, чтобы моя анимация svg начиналась при прокрутке вниз до div [duplicate]
4 ответа
Crollup scroll events
Для этого нужно использовать JavaScript или jQuery для захвата событий прокрутки, проверяя каждый раз, когда событие прокрутки запускается, чтобы увидеть, присутствует ли элемент.
Как только элемент находится в поле зрения, начните анимацию. В приведенном ниже коде это делается добавлением к элементу класса «start», который запускает анимацию.
HTML
<div class="bar">
<div class="level eighty">80%</div>
</div>
CSS
.eighty.start {
width: 0px;
background: #aae0aa;
-webkit-animation: eighty 2s ease-out forwards;
-moz-animation: eighty 2s ease-out forwards;
-ms-animation: eighty 2s ease-out forwards;
-o-animation: eighty 2s ease-out forwards;
animation: eighty 2s ease-out forwards;
}
jQuery
function isElementInViewport(elem) {
var $elem = $(elem);
// Get the scroll position of the page.
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
var viewportTop = $(scrollElem).scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round( $elem.offset().top );
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.bar .level');
// If the animation has already been started
if ($elem.hasClass('start')) return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
}
}
// Capture scroll events
$(window).scroll(function(){
checkAnimation();
});
-
1– Kevin Jung 2 May 2013 в 03:49
-
2– Wtower 27 April 2015 в 11:13
-
3– Ogier Schelvis 30 August 2017 в 14:03
Иногда вам нужно, чтобы анимация всегда возникала, когда элемент находится в окне просмотра. Если это ваш случай, я немного изменил код Matt jsfiddle , чтобы отразить это.
jQuery
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $('.bar .level');
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass('start');
} else {
$elem.removeClass('start');
}
}
В дополнение к этим ответам, пожалуйста, рассмотрите следующие моменты: 1. Проверка рассматриваемого элемента имеет много соображений: Как определить, отображается ли элемент DOM в текущем видовом экране?
2- Если кто-то хотел иметь больше контроля над анимацией (например, установить « тип анимации » и « начальная задержка »), вот хорошая статья: http://blog.webbb.be/trigger-css-animation-scroll/
3- И также кажется, что вызов addClass без задержки (с использованием setTimeout) не является эффективным.
-
1– MJCoder 21 August 2015 в 13:57
CSS FOR TRIGGER :
.trigger{
width: 100px;
height: 2px;
position: fixed;
top: 20%;
left: 0;
background: red;
opacity: 0;
z-index: -1;
}
<script>
$('body').append('<div class="trigger js-trigger"></div>');
$(document).scroll(function () {
$('YOUR SECTIONS NAME').each(function () {
let $this = $(this);
if($this.offset().top <= $('.js-trigger').offset().top) {
if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {
$this
.addClass('currSec')
.siblings()
.removeClass('currSec');
}
}
});
});
</script>