<div class="other-34">
<div class="other-34__scroll">
<div class="other-34__scroll-anim"></div>
</div>
<div class="other-34__view">
<div class="other-34__view-anim"></div>
</div>
</div>
.other-34
.other-34__scroll
.other-34__scroll-anim
.other-34__view
.other-34__view-anim
{
"text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
$BLOCK_NAME: '.other-34';
// 変数
#{ $BLOCK_NAME } {
&__scroll {
position: relative;
height: 200vh;
}
&__scroll-anim {
position: sticky;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #000;
transform-origin: left;
// animation: other34Scroll linear;
animation: other34Scroll ease-out;
animation-timeline: scroll();
}
&__view {
position: relative;
height: 200vh;
}
&__view-anim {
// position: sticky;
// top: 0;
// left: 0;
width: 200px;
height: 200px;
background: #000;
transform-origin: left;
animation: other34Scroll linear both;
animation-timeline: view();
animation-range: contain 0% contain 50%;
}
}
@keyframes other34Scroll {
from {
scale: 0 1;
}
to {
scale: 1 1;
}
}