Cara buat animation heading dalam Website WordPress Anda

Cara membuat heading animasi di Website , ianya mudah dengan hanya menambahkan code CSS yang telah di sediakan dalam website kami atau pun boleh copy seperti code di bawah

Cara membuat heading animasi di Website , ianya mudah dengan hanya menambahkan code CSS yang telah di sediakan dalam website kami atau pun boleh copy seperti code di bawah:

:root{
    --myText : 'DEMO';
    --textColor: #2CFF99;
    --textStroke: 2px;
    --anDuration: 6s;
}
selector{
    -webkit-text-stroke: var(--textStroke) var(--textColor);
    display: table;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    text-align: center;
    margin: 0 auto
}
selector .elementor-heading-title::before{
    content: var(--myText);
    color: var(--textColor);
    position: absolute;
    top: 0;
    width: 0%;
    height: 100%;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    border-right: var(--textStroke) solid var(--textColor);
    -webkit-animation:animateX var(--anDuration) linear infinite;
            animation:animateX var(--anDuration) linear infinite;
}
@-webkit-keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}
@keyframes animateX{
   0%,10%,100%{
        width:0%;
    }
   70%, 90%{
        width: 100%;
    }
}

Buka Satu page yang baru

 Contoh Page “ DEMO ”

Buka satu section di elementor dan masukkan Heading di dalam Colum tersebut.

Click (+) Add Colum

Klik Butang Plus (+) Untuk bina section, terdapat section yang ada 1 colum, 2 colum & pelbagai

Colum With Minimum Height (100vh) and insert Heading Text

Masukkan Heading Text di dalam Colum.

Di Sini sebagai ” DEMO”

Buatkan 1 section dan tekan plus (+) masukkan heading ke dalam colum.

  • Pergi ke style dan tukar warna background Gelap (Navy Blue)

Selepas itu massukkan code css yang di berikan ke dalam advance dalam ruangan CSS hanya terdapat pada elementor Pro Sahaja.

Finally siap sepenuh nya untuk heading animation text di WordPress ini.

Sampai di sini sahaja perkongsian untuk masa ini.

anda boleh layarai Jika berminat nakdapatkan Website dengan Kami.

Klik Di Sini

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart
EnglishBahasa Melayu