Şablonlar > extra.less
Kod:
#calkalacalkala span {
display: inline-block;
}Şablonlar > PAGE_CONTAINER > En Alt Satır
Kod:
<script src ="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>
<script type="module">
import Letterize from "https://cdn.skypack.dev/[email protected]";
const test = new Letterize({
targets: "#calkalacalkala"
});
var animation = anime.timeline({
targets: test.listAll,
delay: anime.stagger(50),
loop: true
});
animation
.add({
translateY: -20
})
.add({
translateY: 0
});
</script>Şablonlar > member_view > <span class="memberHeader-nameWrapper"> bu satırı buluyoruz.
içerisine bir id ekliyoruz ben 'calkalacalkala' dedim, farklı bir şey yazabilirsiniz
PAGE_CONTAINER'deki targets: '#calkalacalkala' kısmını değiştirmeniz gerekir.
id eklenmiş hali
Kod:
<span class="memberHeader-nameWrapper" id='calkalacalkala'>aynı efekti başka metinlere de entegre etmek için Şablonlarda istediğiniz metine id='calkalacalkala' değerini verebilirsiniz
(Metnin display: inline-block; css'ine sahip olması gerekiyor extra.less'ten ayarlamanız lazım.)
ayrıca başka neler yapabileceğinizi merak ediyosanız AnimeJS ve Letterize'a gözatabilirsiniz: anime.js Support your letters animation - Letterize.js
Geçici demo: toprakuzuner
