html

<div class="box1">박스1</div>
        <div class="box2">박스2</div>
        <div class="box3">박스3</div>
        <div class="box4">박스4</div>
        <div class="box5">
            <div class="progress-wrap">
                <div class="inline-block"><span>포토샵</span><button class="photo-skill">확인</button></div>
                <div class="progress">
                        <div class="bar-photo" id="bar"><span>10%</span></div>
                </div>

             </div>
            
        
        </div>
        <div class="box6">박스6</div>
        <div class="box7">박스7</div>

css

.box1,.box2,.box3,.box4,.box5,.box6,.box7{
            width:100%;
            height:300px;
            position:relative;
            overflow:hidden;
            background-repeat:no-repeat;
            background-position:0 0;
            background-size:cover;
        }
        .box2{
           background-image:url(images/back2.jpg); 
        }
        .box4{
            background-image:url(images/back3.jpg);
        }
        .box6{
            background-image:url(images/slide2.jpg);
            background-position:-200px 0;
            background-size:200%;
        }
        
        /* 프로그래스 바 */
        .progress-wrap{
            width:850px;
            height:50px;
            margin:auto;
            margin-top:20px;
        }
        .inline-block{
            width:150px;
            height:100%;
            display:inline-block;
        }
        .inline-block>span{
            display:inline-block;
        }
        .photo-skill{
            margin-left:10px;
            background:black;
            color:white;
            border:none;
            padding:10px;      
        }
        .progress{
            width:500px;
            height:50px;
            border:1px solid black;
            margin:auto;
            box-sizing:border-box;
            display:inline-block;
            vertical-align:middle;
            border-radius:20px;
            overflow:hidden;
            position:relative;
        }
        .bar-photo{
            width:10%;
            height:100%;
            background:red;
            padding:0;
            box-sizing:border-box;
            text-indent:5px;
            color:white;

        }
        .bar-photo span{
            position:absolute; top:15px;
            left:15px;
        }

js

 <script>
        $(document).ready(function(){
            var pos1=0;
            var last=0;
            var box2Top=$(".box2").offset().top;
            var pos2=0;
            var box4Top=$(".box4").offset().top;
            var pos3=0;
            var box6Top=$(".box6").offset().top;
            $(window).scroll(function(){
                var winScroll=$(window).scrollTop();
                if(box2Top<winScroll+500 && box2Top+300>winScroll+200){
                    if(winScroll>=last){
                        console.log("스크롤 내리고 있음");
                        pos1=pos1+5
                        $(".box2").css({
                            "background-position":"0 "+(-pos1)+"px"
                        });
                    }else{
                        console.log("스크롤 올리고 있음");
                        pos1=pos1-5;
                        $(".box2").css({
                            "background-position":"0 "+(-pos1)+"px"
                        });
                    }
                    last=winScroll;
                }
                if(box4Top<winScroll+400 && box4Top+300>winScroll+400){
                    if(winScroll>=last){
                        console.log("스크롤 내리고 있음");
                        pos2=pos2+5
                        $(".box4").css({
                            "background-position":"0 "+(-pos2)+"px"
                        });
                    }else{
                        console.log("스크롤 올리고 있음");
                        pos2=pos2-5;
                        $(".box4").css({
                            "background-position":"0 "+(-pos2)+"px"
                        });
                    }
                    last=winScroll;
                }
                if(box6Top<winScroll+400 && box6Top+300>winScroll+400){
                    if(winScroll>=last){
                        console.log("스크롤 내리고 있음");
                        pos3=pos3+5
                        $(".box6").css({
                            "background-position":(-200+pos3)+"px 0"
                        });
                    }else{
                        console.log("스크롤 올리고 있음");
                        pos3=pos3-5;
                        $(".box6").css({
                            "background-position":(-200+pos3)+"px 0"
                        });
                    }
                    last=winScroll;
                }
                
            });
            
            //프로그래스 바
            var count=10;
            function movephoto(){
               
                $(".bar-photo").stop().animate({
                    width:"70%"
                },700);
                var barValue=$(".bar-photo span").text();
                var id=setInterval(frame,10);
                function frame(){
                     console.log("카운트 : "+count)
                    if(count>=70){
                       clearInterval(id);

                       }else{
                           count++;
                       $(".bar-photo span").text(count+"%");
                       }

                    }

                }
                
            
            var box5Top=$(".box5").offset().top;
            $(window).scroll(function(){
              var winScroll=$(window).scrollTop();
                if(box5Top<=winScroll+200){
                    movephoto();
                }
            });
            
        });
    </script>