⏳۵۰٪ تخفیف فقط تا پایان جشنواره؛ بعدش همهچیز به قیمت قبل برمیگرده!
مشاهده دورههامیخوام متنو تایپ کنه بعد دوباره پاک کنه متن جدید بنویسه
میدونم بوت استرپ همچین چیزی داره ولی نمیدونم کجاس
@endworld
@magicaldev1
@amata
@MahdiMashayekhi
درود خوبی...
پیوند زیر:
https://www.youtube.com/watch?v=JRzY8-DpGWs
درود .
برای بوت استرپ اطلاعی ندارم اما پیاده سازیش راحته و تو سطح اینترنت هم زیاد دیده میشه که عالی هستن .
داخل فایل 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);
};
موفق باشید .
شاید پاسخ شما همینجا باشد
@endworld
دسترسی به یوتیوب ندارم
اگه میشه توضیح بدید یا هر روش دیگه ای...
@Shahriarbahrani1388
از کتابخانه زیر استفاده کنید:
https://safi.me.uk/typewriterjs/