숫자가 카운팅되는(?) 스크립트 다중이용 코드정리 문의 채택완료
.up_number 안에 .memberCountConTxt1~4 숫자가 카운팅되는 스크립트입니다.
4개 사용할때 이렇게 사용했는데 코드를 조금 축소할 수 있는 방법이 있을까요?
현재 잘 구동되는 스크립트 코드 입니다!
var isVisible = false;
$(window).on("scroll", function () { if (checkVisible($(".up_number")) && !isVisible) { var memberCountConTxt1 = 22; var memberCountConTxt2 = 346; var memberCountConTxt3 = 776; var memberCountConTxt4 = 126; $({ val : 0 }).animate({ val : memberCountConTxt1 }, { duration: 1500, step: function() { var num = numberWithCommas(Math.floor(this.val)); $(".memberCountCon1").text(num); }, complete: function() { var num = numberWithCommas(Math.floor(this.val)); $(".memberCountCon1").text(num); } });
function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } $({ val : 0 }).animate({ val : memberCountConTxt2 }, { duration: 1500, step: function() { var num = numberWithCommas(Math.floor(this.val)); $(".memberCountCon2").text(num); }, complete: function() { var num = numberWithCommas(Math.floor(this.val)); $(".memberCountCon2").text(num); } });
function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } $({ val : 0 }).animate({ val : memberCountConTxt3 }, { duration: 1500, step: function() { var num = numberWithCommas(Math.floor(this.val)); $(".memberCountCon3").text(num); }, complete: function() { var num = numberWithCommas(Math.floor(this.val)); $(".memberCountCon3").text(num); } });
function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } $({ val : 0 }).animate({ val : memberCountConTxt4 }, { duration: 1500, step: function() { var num = numberWithCommas(Math.floor(this.val)); $(".memberCountCon4").text(num); }, complete: function() { var num = numberWithCommas(Math.floor(this.val)); $(".memberCountCon4").text(num); } });
function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } isVisible = true; } });
function checkVisible( elm, eval ) { eval = eval || "object visible"; var viewportHeight = $(window).height(), // Viewport Height scrolltop = $(window).scrollTop(), // Scroll Top y = $(elm).offset().top, elementHeight = $(elm).height(); if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight))); if (eval == "above") return ((y < (viewportHeight + scrolltop))); }
답변 2개
</p>
<p>var isVisible = false;
var memberCountConTxt = [22, 346, 776, 126];</p>
<p>$(window).on("scroll", function() {
if (checkVisible($(".up_number")) && !isVisible) {
for (var i = 0; i < memberCountConTxt.length; i++) {
animateCount(".memberCountCon" + (i+1), memberCountConTxt[i]);
}
isVisible = true;
}
});</p>
<p>function animateCount(element, targetValue) {
$({ val: 0 }).animate({ val: targetValue }, {
duration: 1500,
step: function() {
var num = numberWithCommas(Math.floor(this.val));
$(element).text(num);
},
complete: function() {
var num = numberWithCommas(Math.floor(this.val));
$(element).text(num);
}
});
}</p>
<p>function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}</p>
<p>function checkVisible(elm, eval) {
eval = eval || "object visible";
var viewportHeight = $(window).height(),
scrolltop = $(window).scrollTop(),
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible") {
return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
} else if (eval == "above") {
return ((y < (viewportHeight + scrolltop)));
}
}
이걸로 한번 해보세요.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
챗지피티(chatGPT)
</p>
<p>var isVisible = false;</p>
<p>$(window).on("scroll", function () {
if (checkVisible($(".up_number")) && !isVisible) {
var memberCountConTxts = [22, 346, 776, 126];</p>
<p> memberCountConTxts.forEach(function (count, index) {
$({ val : 0 }).animate({ val : count }, {
duration: 1500,
step: function() {
var num = numberWithCommas(Math.floor(this.val));
$(".memberCountCon" + (index + 1)).text(num);
},
complete: function() {
var num = numberWithCommas(Math.floor(this.val));
$(".memberCountCon" + (index + 1)).text(num);
}
});
});</p>
<p> isVisible = true;
}
});</p>
<p>function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}</p>
<p>function checkVisible( elm, eval ) {
eval = eval || "object visible";
var viewportHeight = $(window).height(),
scrolltop = $(window).scrollTop(),
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사드려요!