Vue 3 Splitting | southcoastweb
Vue 3 Splitting | southcoastweb
npm i vue3-splitting
import { Vue3Splitting } from 'vue3-splitting';
app.component('Vue3Splitting', Vue3Splitting);
<Vue3Splitting class="my-4" wrapper-tag="ul" line-tag="li" :words="false">Hello World!</Vue3Splitting>
<template>
<div class="gnb dib lg-mr12rem md-dn">
<ul class="init m">
<li v-for="(menu, index) in menuItems" :key="index">
<Vue3Splitting class="splitting" :words="true" wrapper-tag="a">
{{ menu.name }}
</Vue3Splitting>
</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue';
const menuItems = ref([
{ name: '세이프위즈란?' },
{ name: '사용방법' },
{ name: '안전용품' },
{ name: '커뮤니티' },
{ name: '문의하기' }
]);
</script>
.gnb{
vertical-align:top;
> ul{
> li{
> a{
display:block; padding:0 2.4rem; font-size:1.6rem; cursor:pointer;
//
.v3sp-c {
vertical-align:middle; line-height:1; position:relative; overflow: hidden; color: transparent; height: inherit; display: inline-block;
&::before,
&::after{
content: attr(data-char); height: inherit; line-height: inherit; display: inline-block; visibility: visible; left: 0; top: 0; color: #111; transition: transform .5s cubic-bezier(0.9,0,0.2,1); transition-delay: calc(0.2s + (0.02s * (var(--char-index))))
}
}
.v3sp-c:before {
color: #5CCCEC; transform: translateY(-100%); transition-delay: calc(0.02s * (var(--char-index)))
}
}
&:hover{
> a{
.v3sp-c:before {
transition-delay: calc(0.2s + (0.02s * (var(--char-index)))); transform: translateY(0%);
}
.v3sp-c:after {
transition-delay: calc(0.02s * (var(--char-index))); transform: translateY(100%);
}
}
}
}
}
}