left: 10%;
height: 1px;
width: 80%;
background: rgba(28, 30, 35, 0.44);
}
section#countdown .count-item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: 24px;
color: rgba(28, 30, 35, 0.7);
margin: 15px 0;
transition: all .3s ease, color .4s ease-in;
}
section#countdown .count-item:hover{
transform: scale(1.25);
color: #C22429;
}
section#countdown .count-item span{
font-size: 18px;
color: rgba(28, 30, 35, 0.44);
}
@media only screen and (max-width: 992px){
section#countdown h3 + div{
flex-direction: column;
}
section#countdown .count-item{
transform: scale(1.5);
margin: 30px 0;
}
}
<section id="countdown" class="box-p">
<h3>SAYAÇ</h3>
<div class="d-flex align-items-center justify-content-around">
<div class="count-item">
<strong>47</strong>
<span>ÜRÜN</span>
</div>
<div class="count-item">
<strong>100</strong>
<span>BAŞARI</span>
</div>
<div class="count-item">
<strong>200</strong>
<span>ÖDÜL</span>
</div>
<div class="count-item">
<strong>500</strong>
<span>PROJE</span>
</div>
</div>
</section>
var getCountItems = document.querySelectorAll('.count-item');
if(getCountItems){
getCountItems.forEach(function (countItem) {
var counterValueElement = countItem.querySelector('strong');
var storeCurrentValue = parseInt(counterValueElement.textContent);
var fromZero = 0;
if(fromZero === 0){
counterValueElement.textContent = "0";
}
setInterval(function () {
if(++fromZero <= storeCurrentValue){
counterValueElement.textContent = fromZero.toString();
}
}, 15);
});
}
çok teşşekür ederimJquery number counter diye araştırma yapabilirsiniz. Sahur yapmam gerekiyor yaptıktan sonra size örnek kod atabilirim.
EDİT:
Örnek bir çalışma buyurun. Kodları test ettim sorunsuz bir şekilde çalışmaktadırlar. Tasarım size kalmış temeli bu şekilde. CSS kodları ile tasarımı geliştirebilir sitenize entegre edebilirsiniz. İyi çalışmalar dilerim.
Eki Görüntüle 991390
CSS Kodları
CSS:left: 10%; height: 1px; width: 80%; background: rgba(28, 30, 35, 0.44); } section#countdown .count-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 24px; color: rgba(28, 30, 35, 0.7); margin: 15px 0; transition: all .3s ease, color .4s ease-in; } section#countdown .count-item:hover{ transform: scale(1.25); color: #C22429; } section#countdown .count-item span{ font-size: 18px; color: rgba(28, 30, 35, 0.44); } @media only screen and (max-width: 992px){ section#countdown h3 + div{ flex-direction: column; } section#countdown .count-item{ transform: scale(1.5); margin: 30px 0; } }
HTML Kodları
HTML:<section id="countdown" class="box-p"> <h3>SAYAÇ</h3> <div class="d-flex align-items-center justify-content-around"> <div class="count-item"> <strong>47</strong> <span>ÜRÜN</span> </div> <div class="count-item"> <strong>100</strong> <span>BAŞARI</span> </div> <div class="count-item"> <strong>200</strong> <span>ÖDÜL</span> </div> <div class="count-item"> <strong>500</strong> <span>PROJE</span> </div> </div> </section>
JS Kodları
JavaScript:var getCountItems = document.querySelectorAll('.count-item'); if(getCountItems){ getCountItems.forEach(function (countItem) { var counterValueElement = countItem.querySelector('strong'); var storeCurrentValue = parseInt(counterValueElement.textContent); var fromZero = 0; if(fromZero === 0){ counterValueElement.textContent = "0"; } setInterval(function () { if(++fromZero <= storeCurrentValue){ counterValueElement.textContent = fromZero.toString(); } }, 15); }); }
çok teşşekür ederim
Bu sitenin çalışmasını sağlamak için gerekli çerezleri ve deneyiminizi iyileştirmek için isteğe bağlı çerezleri kullanıyoruz.