onepage-scroll

animation ui-component layout

onepage-scroll 라이브러리는 웹사이트에서 애플의 iPhone 5S 웹사이트처럼 한 페이지 스크롤링 효과를 만들 수 있게 해주는 JavaScript 플러그인입니다. 사용자는 간단한 설정을 통해 원페이지 스크롤링 효과를 자신의 웹사이트에 적용할 수 있으며, 섹션 간 부드러운 전환 효과를 구현할 수 있습니다.

Latest Ver 1.3.1

Homepage

Github

9,524

📢 onepage-scroll는 웹사이트에 원페이지 스크롤링 효과를 적용할 수 있는 JavaScript 플러그인입니다.

CDN 다운로드

License: Attribution-ShareAlike 4.0 International

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/jquery.onepage-scroll.js

https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/jquery.onepage-scroll.min.js

https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/onepage-scroll.css

https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/onepage-scroll.min.css

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div id='main'>
  <section>Section 1</section>
  <section>Section 2</section>
  <section>Section 3</section>
  <section>Section 4</section>
</div>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/jquery.onepage-scroll.min.js"></script>

⚙️ JavaScript
$(document).ready(function() {
  $('#main').onepage_scroll();
});