얼렁뚱땅코드/jquery

얌샘김밥 원형 메뉴 돌리기

얼렁뚱땅 디자이너 2019. 10. 22. 21:21 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/reset.css">
    <style>
        .rotateMenu {
            width: 1356px;
            margin: auto;
        }

        .fixedmenu {
            width: 560px;
            margin: auto;
            display: flex;
            border: 1px solid #000;

        }

        .fixedmenu.on {
            /* position: fixed;
            left:50%;
            transform: translateX(-50%);
            top:50px;*/
            z-index: 999;
            position: sticky;
            top: 50px
        }

        .fixedmenu li {
            border-right: 1px solid #000;
            text-align: center;
            background: #fff;
            flex: 1
        }

        .fixedmenu li a {
            display: block;
            padding: 10px;
        }

        .fixedmenu li.on a {

            background: #000;
            color: #fff
        }


        article h3 {
            text-align: center;
            font-size: 30px;
            margin: 30px
        }

        article {
            width: 1360px;
            margin: 100px auto;
            border: 1px solid #000;
        }

        article ul {
            display: flex;
            flex-wrap: wrap;
        }

        article ul li {
            width: 175px;
            height: 175px;
            margin: 25px;
            text-align: center;
            position: relative;
        }

        article ul li a {
            position: absolute;
            bottom: -30px;
            display: block;
            opacity: 1;
        }

        article li b {
            display: block;
        }

        .slide img {
            width: 100%;
        }

        .fadeslide img {
            width: 100%;
        }

        section img {
            vertical-align: top;
        }

        section.fade {
            width: 1920px;
            margin: 0 auto;
            position: relative;
            height: 900px;
        }

        .fadeslide {
            position: absolute;
            display: none;
        }

        .fadeslide.on {
            display: block;
        }

        section.slide {
            width: 1920px;
            margin: 0 auto;
        }

        .pointer {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        .pointer li {
            width: 15px;
            height: 15px;
            background: #fff;
            margin: 10px;
            border-radius: 50%;
        }

        .pointer li.on {
            background: orange;
        }

        a.prev,
        a.next {
            position: absolute;
            transform: translateY(-50%);
            top: 50%;
        }

        a.prev {
            left: 50px;
        }

        a.next {
            right: 50px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="/js/jquery.transit.min.js"></script>
    <script src="query.transit.min.js"></script> <!--세번째 원형메뉴 돌아가게 하기-->
    <script>
        $(function () {
            var len = $('.fadeslide').length
            var i = $('.fadeslide.on').index()
            console.log(len, i)
            var stop = 0

            $('.pointer li').click(function () {
                i = $(this).index()
                showslide(i)
            })

            $('a.next').click(function (e) {
                e.preventDefault();
                showNext()
            })

            function showNext(){
                if (i == len - 1) {
                    i = 0
                } else {
                    i += 1
                }

                showslide(i)
            }

            $('a.prev').click(function (e) {
                e.preventDefault();
                if (i == 0) {
                    i = len - 1
                } else {
                    i -= 1
                }
                showslide(i)
            })

            function showslide(index) {
                $('.pointer li').removeClass('on');
                $('.pointer li').eq(index).addClass('on');

                $('.fadeslide').fadeOut();
                $('.fadeslide').eq(index).fadeIn();
            }

            $('.fadeWrap').mouseenter(function(){ // .fadeWrap에 마우스 올리면 자동회전을 멈추게 하자
                clearInterval(stop)
            })

            $('.fadeWrap').mouseleave(function(){ // .fadeWrap에 마우스가 없으면(떠나면)
                stop = setInterval(showNext,3000) // 3초마다 자동으로 돌아가게 해라
            })


            // 세번째 원형메뉴 돌아가게 하기
            // 자바스크립트는 에니메이션이 안되기때문에 스크립트를 불러와야한다.
            // http://ricostacruz.com/jquery.transit/ 에 들어가서 다운로드 받은 후 query.transit.min.js로 이름을 변경한다.
            var rotate = 0
            var sect2 = 0
            var sect3 = 0
            $(window).scroll(function(){
                var scrT = $(window).scrollTop();

                $('section').each(function(j){
                    var objT = $(this).offset().top
                    console.log(j,objT);
                    sect2 = $('section').eq(2).offset().top
                    sect3 = $('section').eq(3).offset().top
                    if(sect2<=scrT && sect3>=scrT){ // scrT이 sect2 크거나, scrT이 sect3보다 작으면
                        $('.rotateMenu').delay(2000).animate({'rotate':'+=30deg'})
                    }else{
                        $('.rotateMenu').stop(1,1);
                    }
                })
            })
        })
    </script>
</head>

<body>
    <div class="wrap">
        <section class="slide">
            <img src="main_visual_01.jpg" alt="">
        </section>
        <section class="fade">
            <div class="fadeWrap">
                <div class="fadeslide on"><img src="main_con_visual_02.jpg" alt=""></div>
                <div class="fadeslide"><img src="main_con_visual_03.jpg" alt=""></div>
                <div class="fadeslide"><img src="main_con_visual_04.jpg" alt=""></div>
            </div>
            <ul class="pointer">
                <li class="on"></li>
                <li></li>
                <li></li>
            </ul>
            <a href="#" class="prev"><img src="btn_slide_prev.png" alt=""></a>
            <a href="#" class="next"><img src="btn_slide_next.png" alt=""></a>
        </section>

        <section>
            <div class="rotateMenu">
                <img src="story_data03_visual.png" alt="">
            </div>

        </section>
        <section>
            <h2>얌샘메뉴</h2>
            <p>얌샘신메뉴로 일상의 행복을 채우세요</p>
            <ul class="fixedmenu">
                <li><a href="#menu1">입안가득김밥</a> </li>
                <li><a href="#menu2">한입에쏙 한입김밥</a></li>
                <li><a href="#menu3">인기만점식사</a></li>
                <li><a href="#menu4">취향저격분식</a></li>
            </ul>
            <article id="menu1">
                <h3>입안가득김밥</h3>
                <ul>
                    <li><a href=""><img src="img/menu1-1.png" alt=""><b>얌샘김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-2.jpg" alt=""><b>소세지 김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-3.png" alt=""><b>치즈김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-4.png" alt=""><b>봄쥬르계란 김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-5.png" alt=""><b>대충마라김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-6.jpg" alt=""><b>참치샐러드 김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-7.png" alt=""><b>진미채오징어김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-8.png" alt=""><b>돈까스김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-9.png" alt=""><b>날치알톡톡 김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-10.png" alt=""><b>통새우 김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-11.png" alt=""><b>메가김밥</b> </a> </li>
                    <li><a href=""><img src="img/menu1-12.png" alt=""><b>원조김밥</b> </a> </li>

                </ul>
            </article>
            <article id="menu2">
                <h3>한입에쏙 한입김밥</h3>
                <ul>
                    <li><a href="#"><img src="img/f1cf4c986.jpg" alt=""><b>한입에 계란</b></a></li>

                </ul>
            </article>
            <article id="menu3">
                <h3>인기만점식사</h3>
                <ul>
                    <li><a href="#"><img src="img/menu2-1.jpg" alt=""><b>생등심 돈까스</b> </a> </li>
                    <li><a href="#"><img src="img/menu2-2.jpg" alt=""><b>치즈돈까스</b> </a> </li>
                    <li><a href="#"><img src="img/menu2-3.png" alt=""><b>함박스테이크</b> </a> </li>
                    <li><a href="#"><img src="img/menu2-4.jpg" alt=""><b>오므라이스</b> </a> </li>
                    <li><a href="#"><img src="img/menu2-5.jpg" alt=""><b>커리오므라이스</b> </a> </li>
                    <li><a href="#"><img src="img/menu2-6.jpg" alt=""><b>돈까스 김치오므라이스</b></a> </li>
                    <li><a href="#"><img src="img/menu2-7.png" alt=""><b>참치알밤</b> </a> </li>
                    <li><a href="#"><img src="img/menu2-8.png" alt=""><b>스팸계란덮밥</b> </a> </li>
                    <li><a href="#"><img src="img/menu2-9.png" alt=""><b>장조림버터비빔밥</b> </a> </li>
                    <li><a href="#"><img src="img/menu2-10.png" alt=""><b>낙지덮밥</b> </a> </li>
                    <li><a href="#"><img src="img/menu2-11.png" alt=""><b>제육덮밥</b> </a></li>
                    <li><a href="#"><img src="img/menu2-12.png" alt=""><b>바싹불고기덮밥</b> </a> </li>
                    <li><a href="#"><img src="img/menu2-13.png" alt=""><b>돈까스김치찌개</b> </a> </li>

                </ul>
            </article>
            <article id="menu4">
                <h3>취향저격분식</h3>
                <ul>
                    <li><a href="#"><img src="img/menu3-1.jpg" alt=""><b>모다기</b></a></li>
                    <li><a href="#"><img src="img/menu3-2.png" alt=""><b>모다기</b></a></li>
                    <li><a href="#"><img src="img/menu3-3.png" alt=""><b>라돈모다기</b></a></li>
                    <li><a href="#"><img src="img/menu3-4.jpg" alt=""><b>비빔모다기</b></a></li>
                    <li><a href="#"><img src="img/menu3-5.jpg" alt=""><b>얌샘라면</b></a></li>
                    <li><a href="#"><img src="img/menu3-6.jpg" alt=""><b>치즈라면</b></a></li>
                    <li><a href="#"><img src="img/menu3-7.jpg" alt=""><b>짬뽕라면</b></a></li>
                    <li><a href="#"><img src="img/menu3-8.jpg" alt=""><b>떡볶이</b></a></li>
                    <li><a href="#"><img src="img/menu3-9.jpg" alt=""><b>라볶이</b></a></li>
                    <li><a href="#"><img src="img/menu3-10.png" alt=""><b>유부우동</b></a></li>
                    <li><a href="#"><img src="img/menu3-11.jpg" alt=""><b>비빔쫄면</b></a></li>
                    <li><a href="#"><img src="img/menu3-12.jpg" alt=""><b>물쫄면</b></a></li>
                    <li><a href="#"><img src="img/menu3-13.png" alt=""><b>대충마라비빔면</b></a></li>
                    <li><a href="#"><img src="img/menu3-14.jpg" alt=""><b>어묵탕(사이<드메뉴)</b> </a> </li> <li><a href="#"><img
                                            src="img/menu3-15.png" alt=""><b>모둠튀김</b></a</li> <li><a href="#"><img
                                                src="img/menu3-16.png" alt=""><b>얌샘감자</b></a></li>
                    <li><a href="#"><img src="img/menu3-17.jpg" alt=""><b>물냉면</b></a></li>
                    <li><a href="#"><img src="img/menu3-18.jpg" alt=""><b>비빔냉면</b></a</li> <li><a href="#"><img
                                    src="img/menu3-19.jpg" alt=""><b>콩국수</b></a></li>
                    <li><a href="#"><img src="img/menu3-20.jpg" alt=""><b>냉모밀</b></a></li>
                    <li><a href="#"><img src="img/menu3-21.png" alt=""><b>떡만둣국</b></a></li>
                </ul>
            </article>
        </section>
    </div>

</body>

</html>
// 세번째 원형메뉴 돌아가게 하기
// 자바스크립트는 에니메이션이 안되기때문에 스크립트를 불러와야한다.
// http://ricostacruz.com/jquery.transit/ 에 들어가서 다운로드 받은 후 query.transit.min.js로 이름을 변경한다.
var rotate = 0
var sect2 = 0
var sect3 = 0

$(window).scroll(function(){
	var scrT = $(window).scrollTop();

	$('section').each(function(j){
      var objT = $(this).offset().top
      console.log(j,objT);

      sect2 = $('section').eq(2).offset().top
      sect3 = $('section').eq(3).offset().top

      if(sect2<=scrT && sect3>=scrT){ // scrT이 sect2 크거나, scrT이 sect3보다 작으면
          $('.rotateMenu').delay(2000).animate({'rotate':'+=30deg'})
      }else{
          $('.rotateMenu').stop(1,1);
      }
    })
})

'얼렁뚱땅코드 > jquery' 카테고리의 다른 글

해양환경공단 샘플 테스트  (0) 2019.10.25
얌샘김밥 아래에서 올라오는 메뉴들_최종  (0) 2019.10.22
참고사이트 - css easing generator css 애니메이션 부드럽게 쓰기  (0) 2019.10.22
얌샘김밥 자동슬라이드 setInterval 예제  (0) 2019.10.22
얌샘김밥 예제  (0) 2019.10.22

'얼렁뚱땅코드/jquery'의 다른글

  • 현재글얌샘김밥 원형 메뉴 돌리기

관련글

댓글

티스토리툴바