카운팅 스크립트 문의드립니다.
본문
구글링으로 카운팅 스크립트 사용중인데요.
해당 위치에 화면이 가면 숫자가 0에서 적어둔 숫자로 올라가는 기능입니다.
1개로 사용하다가 총 5개의 숫자가 필요하네요.
어떻게 하면 다중으로 사용가능할까요?
var memberCountConTxt1 = 134;
var memberCountConTxt2 = 30;
var memberCountConTxt3 = 99;
var memberCountConTxt4 = 168;
var memberCountConTxt5 = 300;
이렇게 사용하려 합니다.
var isVisible = false;
$(window).on("scroll", function () {
if (checkVisible($(".up_number")) && !isVisible) {
var memberCountConTxt1 = 134;
$({ 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, ",");
}
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;
}
답변 1
<style>
.up_number {
background-color: #ddd;
width: 1em;
height: 100em;
}
.memberCountCon {
position: fixed;
border: 1px solid gray;
width: 10em;
height: 1.2em;
}
.memberCountCon1 { left: 1em; top: 1em; }
.memberCountCon2 { left: 3em; top: 3em; }
.memberCountCon3 { left: 5em; top: 5em; }
.memberCountCon4 { left: 7em; top: 7em; }
.memberCountCon5 { left: 9em; top: 9em; }
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
// var memberCountConTxt1 = 134;
// var memberCountConTxt2 = 30;
// var memberCountConTxt3 = 99;
// var memberCountConTxt4 = 168;
// var memberCountConTxt5 = 300;
var memberCountConTxts = {
memberCountCon1: 134,
memberCountCon2: 30,
memberCountCon3: 99,
memberCountCon4: 168,
memberCountCon5: 300
};
var isVisible = false;
$(window).on("scroll", function () {
if (checkVisible($(".up_number")) && !isVisible) {
var memberCountConTxt1 = 134;
for (let k in memberCountConTxts) {
drawAnim(k, memberCountConTxts[k]);
}
isVisible = true;
}
});
function drawAnim(k, v) {
$({ val: 0 }).animate(
{ val: v },
{
duration: 1500,
step: function () {
var num = numberWithCommas(Math.floor(this.val));
$("." + k).text(num);
},
complete: function () {
var num = numberWithCommas(Math.floor(this.val));
$("." + k).text(num);
},
}
);
}
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
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;
}
</script>
<div class="up_number"></div>
<div class="memberCountCon memberCountCon1"></div>
<div class="memberCountCon memberCountCon2"></div>
<div class="memberCountCon memberCountCon3"></div>
<div class="memberCountCon memberCountCon4"></div>
<div class="memberCountCon memberCountCon5"></div>
코드가 훨씬 깔끔해졌네요.
보고 공부하겠습니다.
감사드립니다!!
