slider

<!DOCTYPE html>
<html>
    <head>
        <title>자기소개 사이트</title>
        <style>
            html,body{height: 100%;}
            header h1{text-align: center;}
            header ul li{cursor:pointer; float: left;padding:20px;background-color: gray;}
            header ul{list-style: none;}
            .clear{clear:both;}
            section{width:100%; height: 100%;}
        </style>
        <link rel="stylesheet" href="resource/css/animate.css">
        <script src="resource/js/wow.min.js"></script>
        <style>
            html{cursor: url(resource/img/cat.png),auto;}
            /**팝업CSS**/
            .popup{position: fixed; top:0px; left:0px;
            width:100%; height:100%;
            background-color: rgba(0, 0, 0, .5);
            display: none;
            }
            .popup.active{
                display: block;
            }
            .popup-wrap{
                position: absolute; 
                width:500px;
                top:25%;
                left: 25%;
            }
            .popup-content{background-color: #fff;
            color: #333; padding: 3em;
            border-radius: 10px;
        }
        .pop-close{position: absolute;
            right: -70px; top: -70px;width: 50px;
        }
        
    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
    .cursor{ position: absolute; top:0px; left: 0px;
    z-index: 999999;
    }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <link rel="stylesheet" type="text/css" href="resource/css/slick.css"/>
        <link rel="stylesheet" type="text/css" href="resource/css/slick-theme.css"/>
        <script type="text/javascript" src="resource/js/slick.js"></script>
        <script>
            wow = new WOW(
      {
        animateClass: 'animated',
        offset:       100,
        callback:     function(box) {
          console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
        }
      }
    );
    wow.init();
            //스크롤
            $(window).scroll(function(){
                console.log($("#sectionMap").offset().top);
                console.log($(window).scrollTop());

            });


            //Jquery 시작
            $(document).ready(function(){
                $(document).mousemove(function(e){
                    var x = e.pageX-20;
                    var y = e.pageY-20;

                    $(".cursor").css({top:y+"px", left:x+"px"});
                });


                $('.your-class').slick({ 
                    dots: true,
                    infinite: true,
                    speed: 500,
                });

                $(".popup01").click(function(){
                    $("#evnet-pop").show();
                    $("#evnet-pop").hide();
                });

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

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

                });


            });
            

            $(document).ready(function(){
                $(".popup01").click(function(){
                    $("#evnet-pop").addClass("active");
                });
                $(".pop-close").click(function(){
                    $("#evnet-pop").removeClass("active");
                });
            });
        </script>
    </head>
    <body>
        <div class="cursor">
            <img src="resource/img/cat.png" width="50"/>
        </div>
        <header>
            <h1>Gildong Hong</h1>
            <ul class="wow slideInRight" data-wow-duration="2s" data-wow-delay="1s">
                <li>Home</li>
                <li id="toMap">Info</li>
                <li>Portfolio</li>
            </ul>
            <div class="clear"></div>
        </header>
        <section>
            <div class="your-class slider">
                <div>your content</div>
                <div>your content</div>
                <div>your content</div>
            </div>
            <!--팝업띄우기 -->
            <ul>
                <li class="popup01">HTML 포트폴리오사이트</li>
                <li>Java 실습프로그래밍</li>
                <li>게임만들기</li>
            </ul>
            
            <!--팝업영역 -->
            <div id="evnet-pop" class="popup">
            <div class="popup-wrap">
                <div class="popup-content">
                <h2>HTML 포트폴리오사이트</h2>
                <p>Html, CSS 수업에서 포트폴리오 사이트를
                    제작하였습니다. 포트폴리오를 만들기 전에
                    기획부터 만들었고, 기획서를 기반으로 페이지를 
                    구성할 수 있는 기술을 습득하였습니다.
                </p>
                </div>
                <img src="resource/images/star.png" alt="닫기버튼"
                class="pop-close" />
            </div>
            </div>
        </section>
        <section id="sectionMap">
            <!--<iframe src="https://www.dongyang.ac.kr/dongyang/index.do#" width="300" height="500" ></iframe>
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3165.3343108242984!2d126.86542637580261!3d37.50003257205591!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357c9de1fee16d79%3A0x1ab4872c13dbfeaf!2z64-Z7JaR66-4656Y64yA7ZWZ6rWQ!5e0!3m2!1sko!2skr!4v1684379366699!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>-->
        </section>
        <section>

        </section>
    </body>
</html>
저작자표시 비영리 동일조건
'웹프로그래밍 기초 > B반소스자료' 카테고리의 다른 글

위치속성과 변형,애니메이션 (0)	2023.05.11
디스플레이 & 폰트 스타일 (3)	2023.04.27
CSS TEST (4)	2023.04.06
레이아웃 & css (1)	2023.03.30
Table & Form Tag (176)	2023.03.23
SEAH World.

slider

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

댓글

티스토리툴바

slider

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

관련글

댓글

티스토리툴바
