JQuery 스크롤리파이

1 개요[ | ]

jQuery scrollify
jQuery 스크롤리파이
html
Copy
<style>
  html, body, div, h1, h2, h3, h4, h5, h6, section { margin: 0; padding: 0; border: 0; }
  .home { background: #9fe; }
  .section1 { background:#fbf; }
  .section2 { background:#7fa; }
  .section3 { background:#fc4; }
  .section4 { background:#ccf; }
  .panel { padding: 25px; }
</style>

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/scrollify/0.1.11/jquery.scrollify.min.js"></script>
<script>
  $(function() {
    $.scrollify({
      section : "section",
    });
  });
</script>

<section class="panel home">
  <h1>스크롤리파이 예제</h1>
  <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>
</section>
<section class="panel section1">
  <h2>섹션1</h2>
  <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>
</section>
<section class="panel section2">
  <h2>섹션2</h2>
  <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>
</section>
<section class="panel section3">
  <h2>섹션3</h2>
  <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>
</section>
<section class="panel section4">
  <h2>섹션4</h2>
  <p>우리나라의 말이 중국과 달라 문자가 서로 통하지 않는데 이런 이유로 어리석은 백성이 말하고자 하는 바가 있어도 마침내 제 뜻을 능히 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨 새로 스물여덟 자를 만드니 사람마다 하여금 쉽게 익혀 매일 쓰기에 편안하게 하고자 할 따름이다.</p>
</section>
2 같이 보기[ | ]

3 참고[ | ]
