티스토리 뷰

어떤 사이트를 보면 마우스 휠을 위아래로 움직였을 때 요즘 스마트폰을 터치해서 화면을 위아래로 움직이는 것처럼 부드럽게 움직이는 사이트가 있습니다.


이번에 저도 홈페이지 작업을 하면서 JQuery를 이용하여 화면을 부드럽게 스크롤 되는 플러그인을 사용해서 화면을 부드럽게 구현하니 기존 사이트와 상당히 다른 느낌을 주는 사이트로 만들어졌습니다.


JQuery의 smoothwheel이라는 플러그인을 사용해서 작업을 했습니다.

여러분도 JQuery의 smoothwheel 플러그인을 이용해서 화면 부드럽게 스크롤되는 사이트를 만들어 보시기 바랍니다^^



JQuery 소스

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #wrapper{
            background: black;
            width:800px;
            height:600px;
            overflow:auto;
            -webkit-overflow-scrolling: touch;
            position:relative;
        }
        #container{
            height:2000px;
            background:blue;
            width:750px;
            position:absolute;
        }
        .box{
            width:100px;
            height:100px;
            background:red;
            position:absolute;
        }
        #box1{
            top:50px;
            left:200px;
        }
        #box2{
            top:350px;
            left:400px;
        }
        #box3{
            bottom:20px;
            left:400px;
        }


    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script src="../src/jquery.smoothwheel.js"></script>

    <script>

        $(document).ready(function(){
            $("#wrapper").smoothWheel()
        });

    </script>
</head>
<div id="wrapper">
    <div id="container">

        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
        <div id="box3" class="box"></div>

    </div>
</div>

</html>





댓글