scroll action

<style>
	#idx-3 {
    	opacity: 0;
    	transform: translateX(100px);
    	transition: transform 1s, opacity 1s; 
	}
</style>
    
    
    <script>
        
        
$(window).on("scroll", function() {
    var windowHeight = $(window).height();
    var elementOffset = $("#idx-3").offset().top;
    var scrollTop = $(this).scrollTop();

    if (elementOffset - scrollTop < windowHeight) {
        // CSS 직접 변경
        $("#idx-3").css({
            "opacity": 1,
            "transform": "translateX(0)"
        });

        // 이후 스크롤 이벤트를 비활성화
        $(window).off("scroll");
    }
});
    </script>

     <script>
        $(window).on("scroll", function() {
          var scrollTop = $(this).scrollTop(); // 현재 스크롤 위치
          var windowHeight = $(window).height(); // 스크린 높이
          var elementOffset = $("#right-img").offset().top; // 요소의 상단 위치
          var distance = (elementOffset - scrollTop); // 스크롤 위치와 요소의 거리

          if (distance < windowHeight && distance > 0) { // 요소가 스크린 안에 있을 때
            var opacity = 1 - (distance / windowHeight); // 투명도 계산
            var position = (distance / 100) ; // 위치 계산

              if(position < 20){
                position = 0;
                  opacity = 1;
              }
              // 요소에 투명도와 위치 설정
                    $("#right-img").css({
                      "opacity": opacity,
                      "transform": "translateY(" + position + "px)"
                    });
          } 
        });
    </script>