ウェブ制作ライブラリ
拡大する
拡大する
HTML
<div class="obj scroll-zoomin">scroll05</div>
SCSS
@keyframes zoomin {
	0% {
		transform: scale(0.8);

	}

	100% {
		transform: scale(1);

	}
}

.anime {
	animation-play-state: paused;
	&.active {
		animation-play-state: running !important;
		opacity: 1;
	}
	&.scroll-zoomin {
		animation: zoomin 0.8s forwards linear;
		animation-play-state: paused;
	}
}
JavaScript
$(window).on('scroll', function () {

    let elem = $('.obj')
    let isAnimate = 'active anime'
    elem.each(function () {
        let elemOffset = $(this).offset().top
        let scrollPos = $(window).scrollTop()
        let wh = $(window).height()
        const start = elemOffset - wh + (wh / 5)
        const end = elemOffset + wh
        if (scrollPos > start && scrollPos < end) {
            $(this).addClass(isAnimate)
        }
        else if ((scrollPos < start + wh || scrollPos > end + wh)) {
            $(this).removeClass(isAnimate)
        }
    })
})