Bu animation'u oluşturdum ve bunu bir ön yükleyici olarak kullanmak istiyorum. html, css ve js tarafından yapılandırılmış bir animasyonu kullanabilir miyim veya bir .gif veya basit bir css animasyonu oluşturmalı mıyım? Kullanabiliyorsam, web sitemde nasıl uygulayabilirim? Çoğu insanın bir css animasyonu oluşturduğu ve sınıfı bedene çağırdığı birkaç dersi gördüm. Sorunlarım farklı bir hikaye.Ön yükleyiciyi web sitesinde uygulayın
var bar = $('span');
var p = $('.noumero');
var width = bar.attr('style');
width = width.replace("width:", "");
width = width.substr(0, width.length-1);
var interval;
var start = 0;
var end = parseInt(width);
var current = start;
var countUp = function() {
current++;
p.html(current);
if (current === end) {
clearInterval(interval);
}
};
interval = setInterval(countUp, (2000/(end + 1)));
div.meter {
position: relative;
width: 400px;
height: 4px;
margin-top: 50px;
}
div.meter span {
display: block;
height: 100%;
animation: grower 1.8s linear;
-moz-animation: grower 1.8s linear;
-webkit-animation: grower 1.8s linear;
-o-animation: grower 1.8s linear;
position: relative;
top: -1px;
left: -1px;
background-color:rgba(255,0,0,1);
-webkit-background-size: 45px 45px;
-moz-background-size: 45px 45px;
-o-background-size: 45px 45px;
background-size: 45px 45px;
}
.theR{
float:left;
font-size:24px;
font-weight:bold;
color:rgba(255,0,0,1);
float:left;
display:block;
margin-top:0px;
font-family: 'Montserrat', sans-serif;
}
.the255{
float:left;
font-size:24px;
font-weight:bold;
color:rgba(255,0,0,1);
float:left;
display:block;
margin-top:0px;
font-family: 'Montserrat', sans-serif;
}
.theline{
width:255px;
float:left;
font-size:24px;
font-weight:bold;
color:red;
float:left;
display:block;
}
@keyframes grower {
0% {
width: 0%;
}
}
@-moz-keyframes grower {
0% {
width: 0%;
}
}
@-webkit-keyframes grower {
0% {
width: 0%;
}
}
@-o-keyframes grower {
0% {
width: 0%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="meter">
<p class="theR">R</p>
<span style="width:255px;" class="theline"></span>
<p class="noumero the255"></p>
</div>
<div style="clear:both"></div>
siz "önyükleyicinin" ile neyi kastediyoruz tamamladığında
.fadeToggle()
.meter
ait belgenin içeriğindeki solmaya? Animasyon efektleri görüntüler, tamamlar, daha sonra belge içeriği görüntülenir? – guest271314Evet, ancak sadece ana sayfa için. – Georgie