JSFiddle - React, Tailwind, and code Playground

by jyoze

HTML

<div class="sec02">
  <div class="sec02_one">
    <h2>テキストテキストテキスト</h2>
    <div class="text">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
</div>

SCSS

.sec02 {
  padding: .1em;
  background-color: #e93;
}
.sec02_one {
  width: 30%;
  padding: .2em;
	background-color: #fb9;
}

body {
  height: 1000px;
  padding-top: 25vw;
  padding-bottom: 25vw;
}

JavaScript

$(window).on('scroll load', function(){
 var bg = $(window).scrollTop();
  $('.sec02_one').css('transform', 'translateY(' + bg/5*-.3 + 'px)');
});