[ skrollr | 스크롤 기반 애니메이션 | "data-anchor-target" test ]

See the Pen skroll : data-anchor-target test by seobin (@lullu-lalla) on CodePen.

data-anchor-target 테스트

: 퍼포먼스를 줄 element를 skrollr-body 밖에 위치시키고

  skrollr-body 안에 특정 section에서 그 element를 작동시키려는 테스트!

  특정 section안에 element를 작동시키려면 

  그 section에 id값을 주어, element에 data-anchor-target="그 섹션의 id값"을 이어주면 된다.

[ HTML ]

  

    
motion01
  
  

    
motion02
  
  

    
motion03
  
  



        
  

    

      1
    
    

      2
    
    

      3
    
    

      4
    
  

HTML구성 자체를

모션이 들어갈 element들을 skrollr-body 바깥으로 빼고

그 element들이 구현될 수 있는 skrollr-body 섹션들을 아래 잡아준다.

그리고 data-[offset]-[viewport-anchor]-[element-anchor] 값을 다 써주지 않았는데

 element-anchor (선택 사항) 이기 때문인데, 그렇게 되면 무튼 [element-anchor]에 viewport-anchor의 값이 취해진당.

[ CSS ]

/* reset */
*{box-sizing: border-box;}
#skrollr-body{}
#skrollr-body .container{}
#skrollr-body .container section{width:100%;  height:100vh; padding:10px; position:relative;}

#section01{}
#section02{}
#section03{}
#section04{}


.bg{width:100%; height:100vh; position:absolute; top:0; left:0;}
.bg > div{width: 100%; height:100vh; background-attachment: fixed !important; overflow:hidden; position:relative;}
.bg > div p{display:inline-block; padding:10px; text-align:center; background:#fff; transform: translate(-50%, -50%);}
.bg > div.bg01{background:url(http://m.thelaypix.com/mobile/mugunghwa/images/web/main/mv1.jpg) 50% 50%; z-index:10;}
.bg > div.bg02{background:url(http://m.thelaypix.com/mobile/mugunghwa/images/web/main/mv2.jpg) 50% 50%; z-index:20;}
.bg > div.bg03{background:url(http://m.thelaypix.com/mobile/mugunghwa/images/web/main/mv3.jpg) 50% 50%; z-index:30;}
.bg > div.bg04{background:url(http://m.thelaypix.com/mobile/mugunghwa/images/web/main/mv1-2.jpg) 50% 50%; z-index:40;}

[ JS ]

skrollr.init({
       forceHeight: false,
       mobileCheck: function(){
            if((/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)){
                  // mobile device
            }
      }
});