<p>결론부터 말씀드리자면&nbsp; css 에서&nbsp;</p>
<pre class="language-css"><code>.desc-message {
  width: 50%;
  font-weight: bold;
}</code></pre>
<p>를 찾아서</p>
<pre class="language-css"><code>.sticky-elem.desc-message {
  width: 50%;
  font-weight: bold;
}</code></pre>
<p>로 바꾸시면 됩니다.<br /><br />.sticky-elem 이 width가 100% 설정되어있는데 이게 우선적으로 적용돼서 그렇습니다.<br />클래스를 더 구체화해서 우선순위를 높이면 됩니다.<br /><br /></p>

코드 적용하면서 전체적으로 문제 없는지 확인 하다 해결 안되는 부분이 있어 문의드립니다~

<p>감사합니다.<br />위 코드 기반으로 분기한 playAnimation 아래꺼 쓰시면 됩니다</p>
<div style="color: #ffffff; background-color: #111111; font-family: d2coding, Consolas, 'Courier New', monospace; font-size: 18px; line-height: 24px; white-space: pre;">
<div>
<pre class="language-javascript"><code>case 2:
        // console.log('2 play');
        if (scrollRatio <= 0.25) {
          // in
          objs.messageA.style.opacity = calcValues(
            values.messageA_opacity_in,
            currentYOffset
          );
          objs.messageA.style.transform = `translate3d(0, ${calcValues(
            values.messageA_translateY_in,
            currentYOffset
          )}%, 0)`;
        } else {
          // out
          objs.messageA.style.opacity = calcValues(
            values.messageA_opacity_out,
            currentYOffset
          );
          objs.messageA.style.transform = `translate3d(0, ${calcValues(
            values.messageA_translateY_out,
            currentYOffset
          )}%, 0)`;
        }

        if (scrollRatio <= 0.565) {
          // in
          objs.messageB.style.transform = `translate3d(0, ${calcValues(
            values.messageB_translateY_in,
            currentYOffset
          )}%, 0)`;
          objs.messageB.style.opacity = calcValues(
            values.messageB_opacity_in,
            currentYOffset
          );
          objs.pinB.style.transform = `scaleY(${calcValues(
            values.pinB_scaleY,
            currentYOffset
          )})`;
        } else {
          // out
          objs.messageB.style.transform = `translate3d(0, ${calcValues(
            values.messageB_translateY_out,
            currentYOffset
          )}%, 0)`;
          objs.messageB.style.opacity = calcValues(
            values.messageB_opacity_out,
            currentYOffset
          );
          objs.pinB.style.transform = `scaleY(${calcValues(
            values.pinB_scaleY,
            currentYOffset
          )})`;
        }

        if (scrollRatio <= 0.81) {
          // in
          objs.messageC.style.transform = `translate3d(0, ${calcValues(
            values.messageC_translateY_in,
            currentYOffset
          )}%, 0)`;
          objs.messageC.style.opacity = calcValues(
            values.messageC_opacity_in,
            currentYOffset
          );
          objs.pinC.style.transform = `scaleY(${calcValues(
            values.pinC_scaleY,
            currentYOffset
          )})`;
        } else {
          // out
          objs.messageC.style.transform = `translate3d(0, ${calcValues(
            values.messageC_translateY_out,
            currentYOffset
          )}%, 0)`;
          objs.messageC.style.opacity = calcValues(
            values.messageC_opacity_out,
            currentYOffset
          );
          objs.pinC.style.transform = `scaleY(${calcValues(
            values.pinC_scaleY,
            currentYOffset
          )})`;
        }

        break;</code></pre>
</div>
</div>

소개

게시글