브라우저 제목

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>

제목 날짜
3월 28일 평가 있습니다. 2019.03.26
사용자 경험 디자인 file 2020.02.22
만들어갈 프로토타입 file 2020.01.03
프로그램 설치 동영상 2019.12.31
Creative Cloud Desktop 프로그램(어도비 설치 프로그램) file 2019.12.30
한번 해보기 file 2019.12.29
background-position 스크롤 이동, progress bar 애니메이션 file 2019.10.14
좌우 슬라이더 및 레이어 팝업 file 2019.10.14
좌우 슬라이더 file 2019.10.09
학습파일 file 2019.10.08
전체 문서에서 wheel을 이용하여 특정 값만큼 움직이기 file 2019.10.06
16일차 탭 애니메이션 학습파일 file 2019.10.04
탭기능 구현하기 file 2019.10.02
좌우패널 동영상 2019.10.01
스크롤 동영상, 따라다니는 네비, 좌우패널 file 2019.10.01
드롭다운 2019.09.30
13일차 그리드 file 2019.09.30
12일차 file 2019.09.27
좌우 패널 애니메이션 2019.09.26
11일차 file 2019.09.26
10일차 모바일 메뉴 작성 file 2019.09.25
태그 목록