🔥یلدا با راکت با (( ۷۰ درصد )) تخفیف! یلدا طولانی است، اما این تخفیف نه.
مشاهده دورههامیخوام متنو تایپ کنه بعد دوباره پاک کنه متن جدید بنویسه
میدونم بوت استرپ همچین چیزی داره ولی نمیدونم کجاس
@endworld
@magicaldev1
@amata
@MahdiMashayekhi
درود .
برای بوت استرپ اطلاعی ندارم اما پیاده سازیش راحته و تو سطح اینترنت هم زیاد دیده میشه که عالی هستن .
داخل فایل html بعد از لینک کردن css و js پروژه داریم :
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Hi Welcome.", "Roocket.", "Roocket.ir", "I Love to Develop." ]'>
<span class="wrap"></span>
</a>
</h1>
بالاتر دیدید که متن هایی که قراره نوشته بشن رو داخل آرایه قرار دادیم تا بعد با js بتونیم دسترسی پیدا کنیم بهشون .
سپس داخل css داریم :
body {
background-color:#ce3635;
text-align: center;
color:#fff;
padding-top:10em;
}
* { color:#fff; text-decoration: none;}
از css همینطور که میبینید فقط برای دیزاین صفحه استفاده کردیم . و اصل کار پروژه ما داخل فایل js ما خواهد بود .
داخل فایل js داریم :
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};
موفق باشید .
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟