پیش‌نمایش زنده (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 را با هم کم و زیاد کنید تا ریتم پلکانی حفظ شود.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۵ از ۱۲ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

CREATIVE

پیش‌نمایش زنده اسنیپت

متن خط دور توخالی

متن توخالی outline
۱۰۰
۴.۲ (۱۶)

خلاقیت بی‌مرز

پیش‌نمایش زنده اسنیپت

متن گرادیان جاری

متن گرادیان تیتر
۱۰۰
۴.۲ (۱۶)

PREMIUM

پیش‌نمایش زنده اسنیپت

متن فلزی براق

متن فلز کروم
۸۰
۴.۵ (۱۲)