ایجاد افکت‌ جالب روی متن در المنتور (با کد css)

سلام دوست خلاق رایا وردپرسی! 😊 تو این پست می‌خواهیم با هم یه افکت متنی فوق‌العاده با CSS و SVG بسازیم که متنت رو خاص و جذاب کنه! این افکت برای صفحه اول سایت یا هدر می‌تونه فوق‌العاده باشه و توجه هر کسی رو جلب کنه. پس اگه آماده یه آموزش خاص دیگه هستی بزن که بریم تو کارش! 🚀

👌مراحل ایجاد این افکت جالب روی متن در المنتور

1- استفاده از SVG برای متن: اول از همه، از یه نماد SVG برای نمایش متن استفاده میکنیم. برای این کار، یک symbol تعریف می‌کنیم و متن‌مون رو داخلش قرار می‌دیم. این متن می‌تونه هر چیزی باشه، مثلاً “رایا وردپرس” 😊

 <!-- TeXT Efect By Rayawp.ir-->
<svg viewBox="0 0 800 190">
  <symbol id="s-text">
    <text text-anchor="middle" x="50%" y="50%" dy=".35em">
      رایا وردپرس
    </text>
  </symbol>
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#ff7f32;stop-opacity:1" />  
      <stop offset="50%" style="stop-color:#ffb347;stop-opacity:1" /> 
      <stop offset="100%" style="stop-color:#ffec58;stop-opacity:1" /> 
    </linearGradient>
  </defs>
  <use xlink:href="#s-text" class="RayaWpTX"></use>
  <use xlink:href="#s-text" class="RayaWpTX"></use>
  <use xlink:href="#s-text" class="RayaWpTX"></use>
  <use xlink:href="#s-text" class="RayaWpTX"></use>
  <use xlink:href="#s-text" class="RayaWpTX"></use>
</svg>

توجه! ابتدا المنتور رو باز کن، یه برگه جدید بساز و ویجت HTML رو به صفحه اضافه کن. بعد کد بالا رو داخل ویجت بذار. به جای متن “رایا وردپرس”، می‌تونی متن دلخواه خودت رو جایگزین کنی🙂🦋

2- افزودن استایل‌ها با CSS: حالا می‌خوایم به متن مون استایل بدیم که افکت‌های انیمیشنی روش اعمال بشه. برای این کار، از ویژگی‌هایی مثل stroke-dasharray و stroke-dashoffset استفاده می‌کنیم. این ویژگی‌ها باعث می‌شن که متن به صورت تدریجی و انیمیشنی ظاهر بشه.

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

برای اضافه کردن CSS، به تب پیشرفته ویجت HTML برو و در بخش کدهای CSS سفارشی، کدهای زیر رو پیست کن :

.RayaWpTX {
    font-size: 6em;
    fill: none;
    stroke-width: 6;
    stroke-linejoin: round;
    stroke-dasharray: 70 330;
    stroke-dashoffset: 0;
    animation: l 7s infinite linear;
}

.RayaWpTX:nth-child(5n+1) {
    stroke: #ff7f32;  
    animation-delay: -1.2s;
}

.RayaWpTX:nth-child(5n+2) {
    stroke: #ffb347; 
    animation-delay: -2.4s;
}

.RayaWpTX:nth-child(5n+3) {
    stroke: #ffec58;  
    animation-delay: -3.6s;
}

.RayaWpTX:nth-child(5n+4) {
    stroke: #f5a503;  
    animation-delay: -4.8s;
}

.RayaWpTX:nth-child(5n+5) {
    stroke: #ff9f00;  
    animation-delay: -6s;
}

@keyframes l {
    to {
        stroke-dashoffset: -400;
    }
}

درباره کد بالا خوبه بدونی!

• SVG: با استفاده از تگ <svg> و ایجاد یک نماد درونش، متن رو داخل یک فریم تعریف کردیم. این متن می‌تونه هر چیزی باشه که دوست داریم 🙂
• gradient: برای ایجاد رنگ‌های زیبای گرادینت (از نارنجی تا زرد)، از ویژگی linearGradient استفاده کردیم.
• CSS: در بخش CSS، از خاصیت‌های stroke-dasharray و stroke-dashoffset برای انیمیشن استفاده کردیم که باعث می‌شه متن به صورت تدریجی ظاهر بشه. هر خط متنی رنگ متفاوتی داره تا جذاب‌تر بشه. همچنین از @keyframes برای ایجاد انیمیشن استفاده کردیم.

نتیجه نهایی:

حالا متن شما به صورت انیمیشنی و با رنگ‌های جذاب نمایش داده می‌شه که می‌تونه توجه کاربران رو جلب کنه🔥

یادت باشه که با استفاده از این افکت‌ها می‌تونی سایت خودت رو خیلی حرفه‌ای‌تر و زیباتر کنی. به همین راحتی! 😄

امیدوارم این آموزش برات مفید بوده باشه. اگه سوالی داشتی، خوشحال می‌شم کمک کنم! 🌟