rhanziy

fullpage.js 플러그인 옵션 본문

Html_css_js

fullpage.js 플러그인 옵션

rhanziy 2021. 12. 18. 17:40

https://jineecode.tistory.com/98

 

fullpage

요즘 포폴 작업한다고 fullpage 라이브러리를 쓰고 있다. 이 라이브러리를 쓰면서 적용한 방법을 기록한다. 도큐먼트를 봐도 뭔 말이야...? 하는 상황이 지속해서 오는 바람에 괜히 썼다고 생각하

jineecode.tistory.com

 

https://m.blog.naver.com/coding-/221432074882   

script afterload, onleave함수 사용법

 

jQuery fullpage.js (제이쿼리 풀페이지 플러그인 + 옵션/콜백)

웹 사이트에서 마우스휠로 스크롤 할 때, 페이지 단위로 움직이게 해주는 jQuery fullpage.js 익스는 IE...

blog.naver.com

$(document).ready(function(e) {
  $('#fullpage').fullpage ({
      autoScrolling:true,
      scrollHorizontally:true,
      parallax:true,
      navigation:true,
      anchors:['first','second','third','fourth','fifth'],
      css3:false,
      afterLoad: function(anchorLink, index) {
        var indexNum = $(this).index( );
        if (indexNum > 1 ) {
          this.find('.bottom2top-txt').addClass('on');
          this.find('.text-box p').addClass('on');
        }
      },
      onLeave : function (index, nextIndex, direction){
        if (index > 1 && direction == 'down' || direction == 'up'){
          this.find('.bottom2top-txt').removeClass('on');
          this.find('.text-box p').removeClass('on');
        } 
      }
  });

 

섹션별로(anchor 값) 다른 nav dot 을 주고싶을때,

.fp-viewing-anchor명 #fp-nav ul li a span { } 등등 섹션마다 다른 인터렉션 표현 가능

.fp-viewing-third #fp-nav  ul  li  a  span {
    background-color:rgba(255, 255, 255, 0.8);
}

 

background-attachment 사용하려면 fullpage.js스크립트태그에

css3:false나 autoscrolling:false해줘야한다. 충돌문제있음.

 

'Html_css_js' 카테고리의 다른 글

javascript. script태그 async 와 defer의 차이점  (0) 2022.01.16
css.반응형 폰트사이즈 관련 팁  (0) 2021.12.30
css.background, drop-shadow  (0) 2021.12.20
js.index번호, 객체 복제  (0) 2021.12.20
js.스크롤이벤트 fade  (0) 2021.12.17
'Html_css_js' Related Articles more
Comments