پیشنمایش زنده (iframe sandbox)
تمامصفحه
<h2 class="radikalwp-txt-type"><span data-type-words>سایتت را بساز،<//span><span class="radikalwp-txt-type-cursor" aria-hidden="true">|<//span><//h2>
.radikalwp-txt-type {
margin: 0;
font-size: 34px;
font-weight: 900;
text-align: center;
color: #0f172a;
min-height: 1.4em;
}
.radikalwp-txt-type-cursor {
color: #6366f1;
font-weight: 400;
animation: radikalwp-txt-type-blink .85s step-end infinite;
}
@keyframes radikalwp-txt-type-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
// چرخه تایپ و پاک کردن جملات
document.querySelectorAll('[data-type-words]').forEach(function (el) {
var words = ['سایتت را بساز،', 'سریعتر از همیشه،', 'با کدهای آماده رادیکال.'];
var wi = 0, ci = 0, deleting = false;
function tick() {
var word = words[wi];
ci += deleting ? -1 : 1;
el.textContent = word.slice(0, ci);
var delay = deleting ? 45 : 110;
if (!deleting && ci === word.length) { delay = 1600; deleting = true; }
else if (deleting && ci === 0) { deleting = false; wi = (wi + 1) % words.length; delay = 350; }
setTimeout(tick, delay);
}
tick();
});
درباره این اسنیپت
متن که مثل ماشین تحریر حرفبهحرف تایپ میشود، مکاننمای چشمکزن دارد و پس از پایان چند لحظه مکث کرده و دوباره از ابتدا تایپ میکند؛ برای هیروهای داینامیک و پیامهای چرخشی ساخته شده است. چند جمله نمونه در JS تعریف میشود و چرخه بین آنها میگردد. سرعت تایپ و مکث قابل تنظیم است.
پرسشهای متداول
آرایه words در اسکریپت؛ هر جمله را به همان شکل اضافه یا کم کنید و چرخه خودکار بین همه میچرخد.
بدون min-height، وقتی جمله پاک میشود ارتفاع تیتر صفر میشود و کل صفحه میپرد؛ ارتفاع ثابت چیدمان را پایدار نگه میدارد.
کاراکتر | را حذف و به span یک width: 3px، height: 1em، background و display: inline-block بدهید؛ چشمکزن همان انیمیشن را دارد.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۸ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!