[fullpage.js 2.9.7] 자바스크립트 원페이지 스크롤 예시, 애니메이션 (fullpage.js animation)

fullpage.js

 

See the Pen [fullpage.js 2.9.7] 원페이지 스크롤 예시 (2 버전은 무료, 3 버전부터 유료 라이센스) by kimyangsun (@kimyangsun) on CodePen.

 

[fullpage.js 2.9.7] 자바스크립트 원페이지 스크롤 예시 (fullpage.js animation) 코드펜 소스 코드입니다.

원페이지 스크롤 기능 중에 제 개인적인 생각으로 가장 다양한 기능을 구현할 수 있는게 fullpage.js 같아요

사용할때 주의하실 점은 2 버전 까지는 무료이고 3 버전부터 유료 라이센스라고 하네요 ㅎ.ㅎ

 

위에 코드펜 링크에 콘솔로 여러가지 확인하면서 작업하기 편하도록 console.log를 미리 넣어두었습니다.

게시글에 첨부된 코드펜으로는 스크롤을 내릴때 페이지 스크롤도 같이 내려가서 확인이 힘들 수 있으니

제대로 확인하실땐 코드펜 링크를 통해 새창으로 확인하시는게 좋을거 같습니다. :)

https://codepen.io/kimyangsun/pen/wvXgGXR

[fullpage.js 2.9.7] 원페이지 스크롤 예시 (2 버전은 무료, 3 버전부터 유료 라이센스) - fullpage.js animat

 

추가로 2 버전대의 github 설명 페이지 링크입니다.

https://github.com/alvarotrigo/fullPage.js/tree/2.9.7

GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

 

$(function (){
  $('#fullpage').fullpage({
    autoScrolling: true,
    slidesNavigation: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    scrollingSpeed: 1200,
    // responsiveWidth: 920,
    // responsiveHeight:900,
    recordHistory: false,
    anchors: ["page1", "page2", "page3", "page4", "page5",  "page6"],
    menu: '#pageMenu',
    
    onLeave: function(index, nextIndex, direction){
      console.log(`onleave!`);
    },
    afterLoad: function(anchorLink, index){
      console.log(`afterLoad!`);
    },
    afterRender: function(){
      console.log(`afterRender!`);
    },
    afterResize: function(){
      console.log(`afterResize!`);
    },
    afterResponsive: function(isResponsive){
      console.log(`afterResponsive!`);
    },
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
      console.log(`afterSlideLoad!`);
    },
    onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){
      console.log(`onSlideLeave!`);
    }
  });
});


$(".ani-03").each(function(){
  var text = this;
  text.innerHTML = text.textContent.replace(/\S/g, "<i>$&</i>")
  $(this).find("i").each(function(i , idx){
    $(this).addClass("num"+i+" ")
    var i = i / 14
    $(this).css("animation-delay", (i + 0.8)+"s")
  })
})