<h3 class="heading-07" id="js-heading-07"><span class="heading-07__text"><span>見出しが</span></span><span class="heading-07__text"><span>入ります</span></span></h3>
h3.heading-07#js-heading-07
span.heading-07__text
span #{ text1 }
span.heading-07__text
span #{ text2 }
{
"text1": "見出しが",
"text2": "入ります"
}
$BLOCK_NAME: '.heading-07';
// 変数
$color_primary: #000;
$duration_default: 0.6s;
$duration_border: 1s;
$easing_default: cubic-bezier(0.65, 0, 0.35, 1);
#{ $BLOCK_NAME } {
display: flex;
flex-direction: column;
color: $color_primary;
&__text {
position: relative;
display: inline-block;
height: 86px;
margin-right: auto;
overflow: hidden;
font-size: 80px;
font-weight: bold;
&::before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
content: '';
background: $color_primary;
transition: transform $duration_border $easing_default;
transform: scaleX(0);
transform-origin: left;
@at-root #{ $BLOCK_NAME }.is-animated & {
transform: scaleX(1);
}
}
& + & {
margin-top: 16px;
}
& > span {
position: relative;
display: inline-block;
transition: transform $duration_default $easing_default;
transform: translateY(100%);
@at-root #{ $BLOCK_NAME }.is-animated & {
transform: translateY(0);
}
}
}
}
'use strict';
export const heading07 = () => {
const el = document.getElementById('js-heading-07');
if (!el) return;
setTimeout(() => {
el.classList.add('is-animated');
}, 1000);
}