<a class="button-12 js-button-12" href="#">Button12</a>
a.button-12.js-button-12(href=link) #{ text }
{
"link": "#",
"text": "Button12"
}
$BLOCK_NAME: '.button-12';
// 変数
$primary_color: #1a1a1a;
$width_border: 1px;
$transition_char: 1s;
$easing_char: cubic-bezier(0.19, 1, 0.22, 1);
$delay_char: 0.03s;
#{ $BLOCK_NAME } {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
font-size: 13px;
line-height: 1;
color: $primary_color;
letter-spacing: 0.1em;
border-top: $width_border solid $primary_color;
border-bottom: $width_border solid $primary_color;
&__char {
position: relative;
display: inline-block;
overflow: hidden;
line-height: 1.1;
& > span {
display: inline-block;
transition: transform 0s;
}
& > span:nth-child(2) {
position: absolute;
top: 0;
left: 0;
transform: translateY(100%);
}
}
&:hover &__char {
& > span {
transition: transform $transition_char $easing_char;
}
& > span:nth-child(1) {
transform: translateY(-100%);
}
& > span:nth-child(2) {
transform: translateY(0);
}
@for $i from 1 through 20 {
&:nth-child(#{$i}) {
& > span {
transition-delay: #{$i * $delay_char};
}
}
}
}
}
'use strict';
export function button12() {
splitCloneText('js-button-12', 'button-12__char');
}
/**
* 指定したクラス名要素のテキストを分割してspanタグでくくり、複製する
* @param className 要素のクラス名
* @param splitClassName 分割した要素に付与するクラス名
*/
function splitCloneText(className: string, splitClassName: string) {
// ボタン要素を指定
const btnElArr = document.getElementsByClassName(className);
// 要素がない場合、処理を止める
if (!btnElArr.length) return;
// 各要素のテキストを分割してspanタグでくくる
[...btnElArr].forEach(el => {
const text = el.textContent;
const newText = getSplitText(text);
el.innerHTML = newText;
});
/**
* テキストを分割してspanタグでくくる
* @param text 分割したいテキスト
* @returns 分割後のテキスト
*/
function getSplitText(text: string) {
let result: string = '';
text.split('').forEach(c => {
result += `
<span class="${splitClassName}">
<span>${c}</span>
<span>${c}</span>
</span>
`;
});
return result;
}
}