본문 바로가기
웹프로그래밍 기초/A반소스자료

scroll 에 애니메이션 넣기

by 이데렐라 2023. 5. 25.
반응형

 

<!DOCTYPE html>
<html>
    <head>
        <title>위치속성</title>
        <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
        <style>

        .header{width: 100%; height: 80px; 
                background-color: tomato;
                position:fixed; top:0px; left: 0px;
                box-shadow: 10px 10px 3px 6px blue;

                /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cdeb8e+0,a5c956+100;Green+3D+%232 */
                background: #cdeb8e; /* Old browsers */
                background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

                z-index: 100;
            }
            .header ul{list-style: none;}
            .header ul li{float: left; padding: 5px 10px;}
            .clear{clear:both;}
            html,body{height: 100%;margin: 0px;}
            section{width:100%; height: 100%;}
            .profile{background-color: #ccc;}
        </style>
         <script src="http://code.jquery.com/jquery-latest.js"></script>
         <script>
             //Jquery 시작
             $(document).ready(function(){
                 $("#moveProfile").on("click",function(){
                    var position = $("#profile").offset().top;
                    //$(window).scrollTop(position);

                    $("html").animate({scrollTop:position},1000);
                 });

                 $("#moveHome").on("click",function(){
                    var position = $("#home").offset().top;
                    //$(window).scrollTop(position);

                    $("html").animate({scrollTop:position},1000);
                 });
             });

             $(window).scroll(function(){
                var position = $("#profile").offset().top;
                console.log(position);
                console.log($(window).scrollTop());
             });
         </script>
    </head>
    <body>
        <div class="header">
            <!--
                <ul>
                <li><a href="#home"><i class="fas fa-tag"></i>home</a></li>
                <li><a href="#profile">profile</a></li>
                <li><a href="#contact">contact</a></li>
                </ul>
            -->
            <ul>
                <li id="moveHome"><i class="fas fa-tag"></i>home</li>
                <li id="moveProfile">profile</li>
                <li id="moveContact">contact</li>
            </ul>
        </div>
        <section id="home">home</section>
        <section id="profile" class="profile">profile</section>
        <section id="contact">contact</section>
    </body>
</html>

mySite.html
0.00MB

반응형

'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글

실습소스  (0) 2023.05.12
위치속성과 변형/애니메이션  (0) 2023.05.11
디스플레이속성 과 폰트속성  (1) 2023.04.27
CSS 테스트  (0) 2023.04.06
레이아웃 & CSS  (3) 2023.03.30

댓글