소스자료실
2017.05.31 13:30

스크롤 클리핑

조회 수 26 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title></title>
 

<style>
    body {
        margin: 0;
    }
    div, section {
        position: relative;
    }
    section {
        height: 1000px;
        border-bottom: 1px solid red;
    }
    section .desc {
        position: fixed;
        top: 400px;
        left: 100px;
        width: 400px;
        height: 300px;
        font-size: 70px;
        font-weight: bold;
    }
    section:nth-child(1) .desc {
        background-color: rgba(255, 0, 0, 1);
        z-index: 3;
        
        clip: rect( auto, auto, 400px, auto);
    }
    section:nth-child(2) .desc {
        background-color: rgba(0, 255, 0, 1);
        z-index: 2;
    }
    section:nth-child(3) .desc {
        background-color: rgba(0, 0, 255, 1);
        z-index: 1;
    }
    
    .scroll {
        position: fixed;
        top: 0; left: 0;
        font-size: 30px;
    }
</style>
    
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
   
    $(window).scroll(function(){
        
        var scrollTop = $(window).scrollTop();
        var loc = 200;
        var loc2 = 1200;
        
        $(".scroll").text(scrollTop);
        
        if (scrollTop > loc ) {
            $("section").eq(0).find(".desc").css("clip", "rect( auto, auto, "+ (loc + 400  - scrollTop) +"px, auto)");
        }
        
        if (scrollTop > loc2 ) {
            $("section").eq(1).find(".desc").css("clip", "rect( auto, auto, "+ (loc2 + 400  - scrollTop) +"px, auto)");
        }
        
    });
});
    
    
</script>    
 
</head>
<body>
    
    <section>
        <div class="desc">
            <div>Hello, World!</div>
            <div>I'm a boy.</div>
        </div>
    </section>
    
    <section>
        <div class="desc">
            <div>Good, morning!</div>
            <div>I'm a girl.</div>
        </div>
    </section>
    
    <section>
        <div class="desc">
            <div>Goodbye.</div>
            <div>We're friends.</div>
        </div>
    </section>
    
    <div class="scroll"></div>
    
</body>
</html>



http://crlog.com/2017/05311229.html



?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
2163 UI/UX 실무 XE 레이아웃 콘디쌤 2017.06.08 21
2162 UI/UX 실무 실무프로젝트 - kibos 완료 콘디쌤 2017.06.01 31
» 소스자료실 스크롤 클리핑 콘디쌤 2017.05.31 26
2160 UI/UX 실무 실무프로젝트 - 10일차 1 콘디쌤 2017.05.30 27
2159 소스자료실 특정 스크롤 위치에 도달하였을 때 파이차트 동작하기 1 콘디쌤 2017.05.30 26
2158 UI/UX 실무 실무프로젝트 - 9일차 1 콘디쌤 2017.05.29 27
2157 소스자료실 자식이 absolute 일때 부모의 높이값 정하기 콘디쌤 2017.05.29 29
2156 UI/UX 실무 실무프로젝트 - 8일차 1 콘디쌤 2017.05.29 23
2155 UI/UX 실무 실무프로젝트 - 7일차 1 콘디쌤 2017.05.26 29
2154 UI/UX 실무 실무프로젝트 - 6일차 6 콘디쌤 2017.05.25 24
2153 UI/UX 실무 실무프로젝트 - 5일차 2 콘디쌤 2017.05.23 54
2152 UI/UX 실무 실무프로젝트 - 4일차 4 콘디쌤 2017.05.23 77
2151 UI/UX 실무 실무프로젝트 - 3일차 3 콘디쌤 2017.05.20 54
2150 UI/UX 실무 실무프로젝트 - 2일차 3 콘디쌤 2017.05.18 57
2149 소스자료실 HTML안에 HTML 로드 하기 콘디쌤 2017.05.18 62
2148 UI/UX 실무 실무프로젝트 - 1일차 4 콘디쌤 2017.05.17 101
2147 UI/UX 실무 설화수 brands 메뉴 1 콘디쌤 2017.05.10 34
2146 UI/UX 실무 모바일 앱 제작 - 마무리 콘디쌤 2017.05.04 53
2145 UI/UX 실무 모바일 앱 제작 - 동영상 / 마무리 3 콘디쌤 2017.05.01 95
2144 UI/UX 실무 모바일 앱 제작 - 입력폼 / 팝업 8 콘디쌤 2017.04.27 113
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 109 Next
/ 109