پیشنمایش زنده (iframe sandbox)
تمامصفحه
<h3 class="radikalwp-bounce-word"><span>رادیکال<//span><span>وردپرس<//span><span>سریع<//span><span>زیبا<//span><//h3>
.radikalwp-bounce-word {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-size: 26px;
font-weight: 800;
color: #0f172a;
}
.radikalwp-bounce-word span {
display: inline-block;
animation: radikalwp-bw-jump 1.6s ease-in-out infinite;
}
.radikalwp-bounce-word span:nth-child(2) { animation-delay: .15s; }
.radikalwp-bounce-word span:nth-child(3) { animation-delay: .3s; }
.radikalwp-bounce-word span:nth-child(4) { animation-delay: .45s; }
.radikalwp-bounce-word span:nth-child(5) { animation-delay: .6s; }
@keyframes radikalwp-bw-jump {
0%, 100% {
transform: translateY(0);
color: #0f172a;
}
30% {
transform: translateY(-12px);
color: #7c3aed;
}
}
درباره این اسنیپت
واژههای تیتر بهصورت پلکانی بالا و پایین میپرند و ریتم شادی روی صفحه میسازند. تأخیر پلکانی با nth-child تنظیم شده و هر واژه لحظه ورود خودش را دارد. برای هدرهای کمپین، بنر تخفیف و بخشهای سرگرمی مناسب است. چون کل واژهها میپرند و حروف جدا نمیشوند، اتصال حروف فارسی کامل حفظ میشود.
پرسشهای متداول
هر واژه یک span است. کلمات خود را جایگزین کنید و اگر تعدادشان بیشتر شد، یک تأخیر delay جدید اضافه کنید.
بهتر است کوتاه بماند؛ چون کل واژهها میپرند، متن بلند ریتم شلوغی پیدا میکند و خوانایی افت میکند.
مدت انیمیشن و تأخیرهای nth-child را با هم کم و زیاد کنید تا ریتم پلکانی حفظ شود.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۵ از ۱۲ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!