拡大する
拡大する
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)
}
})
})