متن ریسندگی پین شده و در حال رشد زیرنویس با trig.js

ek3nk4r 2025-03-24

0 1 خواندن این مطلب 2 دقیقه زمان میبرد

متن ریسندگی پین شده و در حال رشد زیرنویس با trig.js

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

در این مثال ، ما نحوه استفاده از trig.js را برای ایجاد یک مورد بررسی خواهیم کرد اثر متن پین شده جایی که متن روی پیمایش می چرخد در حالی که یک زیر خط به صورت پویا رشد می کندبشر

📌 نسخه ی نمایشی زنده: Codepen را بررسی کنید

<br />

فهرست مطالب

✨ چه کاری انجام می دهد

در متن پین شده است در نمای
در “JS” قسمت “Trig.Js” می چرخد بر اساس موقعیت پیمایش
در underline رشد می کند به صورت پویا به پایین حرکت می کنید.

🚀 تجزیه کد

1⃣ تنظیم HTML


 lang="en">

    </span>Pinned Spinning Text and Growing Underline Using Trig.js<span class="nt"/>
    <span class="nt"><script><![CDATA[<span class="na">src=]]></script></span><span class="s">"https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"</span><span class="nt">></span>
    <span class="nt"><link/> <span class="na">rel=</span><span class="s">"preconnect"</span> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com"</span><span class="nt">></span>
    <span class="nt"><link/> <span class="na">rel=</span><span class="s">"preconnect"</span> <span class="na">href=</span><span class="s">"https://fonts.gstatic.com"</span> <span class="na">crossorigin</span><span class="nt">></span>
    <span class="nt"><link/> <span class="na">href=</span><span class="s">"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono&display=swap"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">></span>
    <span class="nt"><meta/> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span>
<span class="nt"/>
<span class="nt"> <span class="na">class=</span><span class="s">"trig-scroll-up trig-scroll-25"</span><span class="nt">></span>
    <span class="nt"><div> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
        <span class="nt"><div> <span class="na">class=</span><span class="s">"pinContainer"</span> <span class="na">data-trig</span> <span class="na">data-trig-degrees=</span><span class="s">"true"</span> <span class="na">data-trig-var=</span><span class="s">"true"</span> <span class="na">data-trig-min=</span><span class="s">"-200"</span> <span class="na">data-trig-max=</span><span class="s">"200"</span><span class="nt">></span>
            <span class="nt"><p> <span class="na">class=</span><span class="s">"pinned"</span><span class="nt">></span>
                <span class="nt"/>
            <span class="nt"/></p></span>
        <span class="nt"/></div></span>
        <span class="nt"><div> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
            <span class="nt"><div> <span class="na">class=</span><span class="s">"alignCenter"</span><span class="nt">></span>
                <span class="nt"><p>Pinned Spinning Text and Growing Underline<span class="nt"/></p></span>
            <span class="nt"/></div></span>
        <span class="nt"/></div></span>
    <span class="nt"/></div></span>
<span class="nt"/>
<span class="nt"/>
</span></span></span></span></span></span></code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>حالت تمام صفحه را وارد کنید



  2⃣ یک ظاهر طراحی شده با CSS



body {
    margin: 0;
    padding: 0;
    background-image: linear-gradient(to right top, #090c11, #040b1a, #030821, #050527, #0b002c);
    color: #FFF;
    font-family: 'Space Mono', monospace;
}

h1 {
    font-family: 'Bebas Neue', cursive;
    color: #FFF;
    text-shadow: 2px 2px 2px #000000;
    font-size: 72px;
}

.pinned {
    display: inline-block;
    position: sticky;
    top: 30%;
}

.rotate {
    transform-style: preserve-3d;
    transform: rotateX(calc(var(--trig-deg) - 47deg)) perspective(800px);
    transition: transform ease-out 0.3s;
    display: inline-block;
}

#title:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    transform-origin: left;
    width: 100%;
    height: 8px;
    display: inline-block;
    background-color: #FFF;
    transform: scaleX(calc(var(--trig) - 13%));
    transition: transform ease-out 0.3s;
}



    
    




  🔥 چگونه کار می کند



در .pinned طبقه متن را ثابت نگه می دارد در محل استفاده position: sticky;بشر
در .rotate کلاس اعمال می شود rotateX() بر اساس موقعیت پیمایش، با استفاده از var(--trig-deg) از trig.js.
در #title:after underline رشد می کند پویا با scaleX(calc(var(--trig) - 13%))بشر

data-trig  در .pinContainer فعال کردن انیمیشن های trig.jsبشر


  🎯 چرا از trig.js استفاده می کنید؟




سبک وزن (فقط 4KB!)
بدون وابستگی
بسیار قابل تنظیم
انیمیشن های پیمایش صاف


  thoughts افکار نهایی


این مثال نشان می دهد Trig.js چقدر ساده و در عین حال قدرتمند است برای انیمیشن های مبتنی بر پیمایش. به راحتی می توانید مقادیر را تغییر دهید یا بر روی این اثر گسترش دهید.
می خواهید بیشتر ببینید؟ بررسی کنید:
💬 به من اطلاع دهید که در نظرات زیر چه فکر می کنید! برنامه نویسی مبارک! 🚀