티스토리 뷰

IT 이야기/프로그래밍

[JQuery] 마우스휠 사용시 부드럽게 스크롤 되는 소스, smoothwheel 플러그인

하늘과 나b 2015. 5. 8. 13:25

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


이번에 저도 홈페이지 작업을 하면서 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>



소스

https://github.com/fatlinesofcode/jquery.smoothwheel


데모 사이트
http://fatlinesofcode.github.io/jquery.smoothwheel/demo/smoothwheel.html



'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[C언어소스] 알파벳을 삼각형 모양으로 출력해 주는 소스  (0) 2016.01.05
모바일 개발시 PC/모바일 구분하는 소스  (0) 2015.12.03
C언어 별 모양 출력하기  (0) 2015.10.11
[ASP] UTF-8로 변환하는 Encode_UTF8 함수  (1) 2015.06.25
[PHP] fsockopen() 으로 PHP 외부의 페이지 가져오기  (0) 2015.05.18
[C언어] 화씨온도를 섭씨 온도로 변환하는 문제  (0) 2015.05.07
컴파일러 없이 쉽게 C언어 공부하는 방법, 웹컴파일러로 한 방에  (1) 2015.05.06
[JQUERY] 스크롤 위치 얻어오기  (0) 2015.02.02
fatal error LNK1123: COFF로 변환하는 동안 오류가 발생했습니다. 파일이 잘못되었거나 손상되었습니다.  (0) 2015.01.26
fatal error C1021: invalid preprocessor command 'inclued' 한방에 해결하기  (0) 2015.01.24
공유하기 링크
댓글