웹 페이지 스크롤 부드럽게 동작하게 만들기

Javascript

by 모모87 2021. 3. 24. 11:56

1. scroll-behavior

간단한 코드로 모든 웹페이지 내의 스크롤을 부드러운 애니메이션 효과를 줄 수 있다.

html { scroll-behavior: smooth; }

2. custom animate javascript

<div id="num1">this is num 1</div>
<div id="num2">this is num 2</div>


<a href="#num1">move to num1</a>

<script>
  $('a').click(function () {
    $('html, body').animate({
      scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
    return false;
  });
</script>

위와 같은 코드가 존재할때, 위의 자바스크립트를 이용해 move to num1 이 적힌 a 태그를 누르면 num2의 위치로 500ms의 속도로 부드럽게 이동하게 된다.

3. smooth heels.js

<!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>

github.com/fatlinesofcode/jquery.smoothwheel

'Javascript' 카테고리의 다른 글

16_ 두더지잡기 (0)	2021.04.26
전체체크 / 부분체크 addClass, removeClass 조건식 넣기 (0)	2021.04.26
마우스 방향에 따라 움직이는 패럴럭스 효과 (0)	2021.03.24
기본 풀페이지 패럴럭스 (0)	2021.03.24
제이쿼리 포토 갤러리 플러그인 (0)	2021.03.24