투케이2K

255. (JavaScript) [fullpage 라이브러리] - fullpage 사용해 웹 페이지 화면 step 단계적 스크롤링 이동 수행 실시 본문

JavaScript

255. (JavaScript) [fullpage 라이브러리] - fullpage 사용해 웹 페이지 화면 step 단계적 스크롤링 이동 수행 실시

투케이2K 2023. 3. 2. 18:56

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

​

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>javaScriptTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

        html, body {
            width: 100%;
            height: 100%;
            margin : 0 auto;
            padding : 0;
            border : none;    
        }

        #container {            
            width: 100%;
            height: 100%;
            margin: 0 auto;
        }

    </style>




    <!-- [CDN 설정 실시] -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.js"></script>





    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->
    <script>
        

        /*
        -----------------------------------------
        [요약 설명]
        -----------------------------------------
        1. window.onload : 웹페이지 로드 완료 상태를 확인합니다
        -----------------------------------------
        2. fullpage : 자유로운 스크롤을 막고 페이지를 PPT처럼 한번에 한 페이지만 보여주는 라이브러리입니다
        -----------------------------------------
        3. CDN 설치 참고 사이트 : https://github.com/alvarotrigo/fullpage.js
        -----------------------------------------
        */






        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log(""); 


            // [fullpage 로드 수행 실시]
            new fullpage('#fullpage', {
                
                autoScrolling:true,
                scrollHorizontally: true,
                sectionsColor: ['#FF00FF', '#C0C0C0', '#ADD8E6'],
            });
        };



    </script>


</head>


<body>


    <!-- [div 생성] -->
    <div id="fullpage">
        <div class="section">One</div>
        <div class="section">Three</div>
        <div class="section">Four</div>
    </div>

</body>

</html>
 

[결과 출력]

​

​

 
반응형
저작자표시

'JavaScript' 카테고리의 다른 글

257. (JavaScript) [day js 라이브러리] - Date toLocaleString 사용해 day js timeZone 타임존 설정 실시  (0) 2023.03.12
256. (JavaScript) [day js 라이브러리] - day js 사용해 현재 날짜 및 시간 밀리 세컨드 까지 출력 (YYYY-MM-DD HH:mm:ss:SSS)  (0) 2023.03.12
254. (JavaScript) [WebCam] navigator.mediaDevices.getUserMedia 사용해 웹 카메라 사용 권한 요청 및 video 스트림 영상 출력  (0) 2023.02.26
253. (JavaScript) [SheetJS 라이브러리] - SheetJS 라이브러리 사용해 html table 테이블을 excel 엑셀 파일로 저장 실시  (0) 2023.02.18
252. (JavaScript) [SheetJS 라이브러리] - SheetJS 라이브러리 사용해 excel 엑셀 파일 생성 수행 실시  (0) 2023.02.18
'JavaScript' Related Articles more
Comments