본문 바로가기
코리아 IT아카데미/Javascript·Jquery~~~

8일차 | 애니메이션과 css차이, 가로스크롤메뉴, 마우스 따라 움직이는 네비게이션바,toggle, tooltip 도움말 효과

by Sharon kim 2022. 3. 30.

1220.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="js/jquery-1.7.2.min.js"></script>

<style>
*{ margin:0; padding:0;}

#wrap{ margin:0; padding:0;}
#wrap > div{ width:100%; height:1000px; 
             position:relative;}
#con1{ background-color:#C60;}
#con2{ background-color:#F60;}
#con3{ background-color:#F93;}
#con4{ background-color:#CCF;}

.box{width:100px; height:100px;
     border:2px solid #000;
	}

.box1-1{ position:absolute; top:200px; left:500px;}
.box1-2{ position:absolute; top:500px; left:100px;}
.box1-3{ position:absolute; top:700px; left:1200px; opacity: 0;}

.box2-1{ position:absolute; top:200px; left:500px;}
.box2-2{ position:absolute; top:500px; left:100px;}
.box2-3{ position:absolute; top:700px; left:1200px;}

.box3-1{ position:absolute; top:200px; left:500px;}
.box3-1.act1{ transform: rotate(360deg); transition: 0.7s;}
.box3-1.origin1{ transform: rotate(-360deg); transition: 0.7s;}

.box3-2{ position:absolute; top:500px; left:100px;}
.box3-2.act2{transform: rotate(45deg); transition: 0.7s }
.box3-2.origin2{transform: rotate(0deg); transition: 0.7s }

.box3-3{ position:absolute; top:700px; left:1200px;}
.box3-3.act3{transform: scale(2); transition: 0.7s }
.box3-3.act3-0{ position:absolute; top:700px; left:1200px; opacity:0;
               transform: scale(0.5); transition: 0.7s}

</style>


</head>

<body>
<div id="wrap">

<div id="con1">
  <div class="box1-1 box">box1-1</div>
  <div class="box1-2 box">box1-2</div>
  <div class="box1-3 box">box1-3</div>
</div>

<div id="con2">
  <div class="box2-1 box">box1-1</div>
  <div class="box2-2 box">box1-2</div>
  <div class="box2-3 box">box1-3</div>
</div>

<div id="con3">
  <div class="box3-1 box">box1-1</div>
  <div class="box3-2 box">box1-2</div>
  <div class="box3-3 box">box1-3</div>
</div>

<div id="con4"></div>

<script>
 $(document).ready(function() { 
    var scene01Num = 1;
    var scene02Num = 1;
    var scene03Num = 1;
    
   $(window).scroll(function(){
     var sct = $(document).scrollTop();// scrollTop을 sct라는 변수로 객체화

     if(sct > 200  && scene01Num == 1){
         scene01Num = 0;
         $(".box1-1").delay(300).stop().animate({opacity:1, top:"800px"},1000,function(){
            $(".box1-1").delay(200).stop().animate({opacity:0},500);
         });

         $(".box1-2").delay(1000).stop().css({opacity:1}).animate({top:"800px",opacity:0},1000);
         $(".box1-3").css({opacity:0}).animate({opacity:0.7,left:"200px"});
     }else if(sct < 200 && scene01Num == 0){
        scene01Num = 1;
        $(".box1-1").delay(0)
                    .css({top: "800px"})
                    .stop().animate({opacity: 1, top: "200px"}, 1000);

        $(".box1-2").delay(1000).stop().animate({top:"400px",opacity:1},500,function(){});
        $(".box1-3").css({opacity:0.7}).animate({opacity:0,left:"1200px"});            
     }

     if(sct > 1200 && scene02Num == 1){
        scene02Num = 0;
        $(".box2-1").delay(0).stop()
                    .animate({ opacity: 1,top: "800px"}, 1000, 
                     function(){$(".box1-1").delay(200).stop().animate({opacity: 0}, 1000);
                    });
						
        $(".box2-2").delay(400).stop()
                    .animate({opacity: 1,top: "800px"}, 1000, 
                    function() {$(".box1-2").delay(200).stop().animate({opacity: 0}, 1000);
                    });

        $(".box2-3").delay(800).stop()
                    .animate({opacity: 1,top: "800px"}, 1000,
                    function(){$(".box2-3").delay(200).stop().animate({opacity: 0}, 1000);
                    });


     }else if(sct < 1200 && scene02Num == 0){
        scene02Num = 1;
        $(".box2-1").delay(0).css({top: "800px"}).stop()
                    .animate({opacity: 1, top: "200px"}, 1000);
						
        $(".box2-2").delay(400).stop().css({top: "800px"})
                    .animate({opacity: 1, top: "500px" }, 1000);
        
        $(".box2-3").delay(800).css({top: "800px"}).stop()
                    .animate({opacity: 1, top: "700px" }, 1000);
     }



     if(sct > 2000 && scene03Num == 1){
      scene03Num = 0;
      $(".box3-1").addClass("act1");
      $(".box3-2").addClass("act2");
      $(".box3-3").addClass("act3");

     }else if(sct < 2000 && scene03Num == 0){
      scene03Num = 1;
      $(".box3-1").addClass("origin1");
      $(".box3-2").addClass("origin2");
      $(".box3-3").addClass("act3-0");
    }




   });   //$(window).scroll  닫기ㄴ

});//$(document).ready  닫기
</script>
</div>

</body>
</html>

 

스크롤메뉴(가로스크롤).html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <style>
        *{margin: 0; padding: 0;}
        ul,li{ list-style: none;}
        a{text-decoration: none;}

        #wrap{width: 100%;}
        #header{position: fixed; top:0px; left: 0px; z-index: 9999; opacity: 0.5;
                width: 100%; height: 120px; background-color: blueviolet;}
                #header ul {margin: 0 auto; margin-top:45px ; width: 1000px; height: 30px;}
                #header ul li{ float: left; width: 200px; 
                               text-align: center; line-height: 30px;}
                #header ul li a{ color:#fff; font-size:25px}
                #header ul li.on a{ color:#000; font-size:30px}

        #contents{ width: 100%; height: 100vh; position: relative;}
        #contents > div{ position: absolute; top:0; padding-top:120px ; width: 100%; height: 800px;}
        #contents > div.con1{left: 0%; background-color: burlywood;}
        #contents > div.con2{left: 100%; background-color: rgb(33, 216, 192);}
        #contents > div.con3{left: 200%; background-color: rgb(47, 223, 30);}
        #contents > div.con4{left: 300%; background-color: rgb(131, 129, 231);}
        #contents > div.con5{left: 400%; background-color: rgb(150, 46, 119);}

        #q_mn{position: absolute; top:150px; right:50px;
              z-index: 1000;
              width: 60px; height: 140px;
              border-radius: 10px;  
              background-color: cornsilk;}
         #q_mn ul.btns{}
         #q_mn ul.btns li{ margin-bottom: 5px; text-align: center;}
         #q_mn ul.btns li a{ color:#555;}
         #q_mn ul.btns li.on a{ color:darkblue;}
    </style>
    <script> 
     $(document).ready(function(){
       
       var menu = $(".btns li");
       var section = $("#contents > div");

       var h = $(window).height();
       $("#contents > div").height(h);
       $(window).resize(function(){//화면크기 바뀔때 높이 같이 수정
            var h = $(window).height();
            $("#contents > div").height(h);
       });

       menu.click(function(e){
         e.preventDefault();// a태그의  href이벤트를 초기화
         var tg = $(this);
         var i = tg.index();

         var tt = section.eq(i).offset().left; // 수정 left
         $("html,body").stop().animate({scrollLeft:tt}); //수정scrollLeft
       });

       //메뉴에 addClass로 주석처리
       $(window).scroll(function(){
        var scl = $(window).scrollLeft();//현재 화면의 scrollTop를 변수 sct로 사용 수정 scl, scrollLeft

        $("#contents > div").each(function(){//contents안에 div를 순서대로 처리
              var tg = $(this); 
              var i = tg.index(); //con1, con2, con3, con4, con5
              if(tg.offset().left <= scl){//해당되는 con들중에 현재 scrollTop에 위치가 동일하다면 수정 left, scl
                  menu.removeClass("on");//모든메뉴에서 class가 있다 삭제
                  menu.eq(i).addClass("on");       
              }
        });
       });

    
       //퀵메뉴작업
       $(window).scroll(function(){
           var winLeft = $(window).scrollLeft() + 1800;  //수정 scrollLeft() + 1800;
           $("#q_mn").stop().animate({left:winLeft + "px"},500); // 수정 left

       });    


     });//$(document).ready()이벤트 닫기
    </script>
</head>
<body>
    <div id="wrap">
        <div id="header">
        <ul class="btns">
            <li class="on"><a href="#con1">con1</a></li>
            <li><a href="#con2">con2</a></li>
            <li><a href="#con3">con3</a></li>
            <li><a href="#con4">con4</a></li>
            <li><a href="#con5">con5</a></li>
        </ul>  
        </div>
        <div id="contents">
           <div class="con1" id="con1">con1</div>
           <div class="con2" id="con2">con2</div>
           <div class="con3" id="con3">con3</div>
           <div class="con4" id="con4">con4</div>
           <div class="con5" id="con5">con5</div>
        </div>
    </div>

    <!--  퀵메뉴 -->
     <div id="q_mn">
         <ul class="btns">
             <li><a href="#con1">con1</a></li>
             <li><a href="#con2">con2</a></li>
             <li><a href="#con3">con3</a></li>
             <li><a href="#con4">con4</a></li>
             <li><a href="#con5">con5</a></li>
         </ul>
     </div>


</body>
</html>

 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>어디서나 펼쳐지는 내비게이션</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<style>

*{	margin:0; padding:0;	}

div#container {
	width:600px;
	height:200px;
	left:0px;
	top:0px;
	position:relative;
}
				
div#home {
	width:50px;
	height:200px;
	background:#FF9999;
	left:0px;
	top:0px;
	position:absolute;
	z-index:2;
}
		   
ul { 
	width:600px; 
	height:200px;
	list-style:none;
	left:-600px;
	top:0px;
	position:absolute;
	z-index:1;
}
	 
ul li {
	width:200px;
	height:200px;
	float:left;
	opacity:0.7;
}


</style>

</head>

<body>



<div id="container">
	<div id = "home">HOME </div>
  
	<ul id ="menu">     
		<li><img src="th_bg1.jpg" /></li>
		<li><img src="th_bg2.jpg" /></li>
		<li><img src="th_bg3.jpg" /></li>
	</ul>
</div>



<script>
   
$('#home').toggle(
	function() {
		$('ul').stop().animate({left:"50px"} ,500 );
	},
	 function() {
		$('ul').stop().animate({left:"-600px"} ,500);
	}
);
					
$('li').hover(
	function() {
		$(this).animate({opacity:1},300)
	}, function() {
		$(this).animate({opacity:0.7},300)
	}
);
					
				
$('#home').mousemove( function(e){
	var pos = e.pageY -  parseInt($('#container').css("height"))/2+ "px";
	$('#container').css({"top":pos});
});

	 
</script>
</body>
</html>

 

ready_0419.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<title>어디서나 펼쳐지는 내비게이션</title>
<script src="jquery-1.7.2.min.js"></script>

<style>

*{	margin:0; padding:0;	}

div#container {
    display: none;
    float: left;
   	width:600px;
	height:200px;
	left:0px;
	top:0px;
	position:relative;
}
				
div#home {
	width:50px;
	height:200px;
	background:#FF9999;
	left:0px;
	top:0px;
	position:absolute;
	z-index:2;
}
		   
ul { 
	width:600px; 
	height:200px;
	list-style:none;
	left:-600px;
	top:0px;
	position:absolute;
	z-index:1;
}
	 
ul li {
	width:200px;
	height:200px;
	float:left;
	opacity:0.7;
}



#container_r {
    float: right;
	width:600px;
	height:200px;
	right:0px;
	top:0px;
	position:relative;
    overflow: hidden;
}
				
#home_r {
    float:left;
	width:50px;
	height:200px;
	background:#FF9999;
	right:0px;
	top:0px;
	position:absolute;
	z-index:2;
}
		   
#menu_r { 
    float: left;
	width:600px; 
	height:200px;
	list-style:none;
	left:600px;
	top:0px;
	position:absolute;
	z-index:1;
}
	 
#menu_r li {
	width:200px;
	height:200px;
	float:left;
	opacity:0.7;
}

.box{width:150px; height:150px; 
     background-color:coral;
     position: relative; top:0; left:0;}
</style>

</head>

<body>



<div id="container">
	<div id = "home">HOME </div>
  
	<ul id ="menu">     
		<li><img src="th_bg1.jpg" /></li>
		<li><img src="th_bg2.jpg" /></li>
		<li><img src="th_bg3.jpg" /></li>
	</ul>
</div>


<div id="container_r">
    
	<div id = "home_r">HOME-r </div>
  
	<ul id ="menu_r">     
		<li><img src="th_bg1.jpg" /></li>
		<li><img src="th_bg2.jpg" /></li>
		<li><img src="th_bg3.jpg" /></li>
	</ul>
   
</div>

 
<div class="box"></div>
<script>
  


   $("#home").mousemove(function(e){  
	var pos = e.pageY - 
	          parseInt($("#container").css("height"))/2+"px";
	$("#container").css({"top":pos});

   }); 
         
   

   $("#home_r").toggle(
       function(){
          $("#menu_r").stop().animate({left:"0px"}); 
       },
       function(){
          $("#menu_r").stop().animate({left:"600px"}); 
       }

   );
   $("#menu_r li").hover(
       function(){
           $(this).animate({opacity:1},300);
       },
       function(){
           $(this).animate({opacity:0.7},300);
       }
   );

   $("#home_r").mousemove(function(e){
      var pos1 = e.pageY - 
                parseInt($("#container_r").css("height"))/2 + "px"
      $("#container_r").css({"top":pos1});
   });
	 
   $(".box").mousemove(function(e){
       var posx = e.pageX - parseInt($(".box").css("width"))/2+"px"
       var posy = e.pageY - parseInt($(".box").css("height"))/2+"px"
       $(this).css({"top":posy,"left":posx});
   }); 

</script>
</body>
</html>

 

toggle.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> toggle </title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<style>
div {
	 width:200px; height:100px; background:#F00;}

.box01{ margin-top: 100px;
	   background-color: blueviolet;}	 
</style>

</head>

<body>

<div></div>

<div class="box01">box01</div>

<script>

$("div").toggle(
	function () {
		$(this).css({"background-color":"yellow"});
	},
	function () {
		$(this).css({"background-color":"black"});
	},
	function () {
		$(this).css({"background-color":"green"});
	},
	function () {
		$(this).css({"background-color":"black"});
	}
);
	
$(".box01").toggle(
	function(){
		$(this).stop().animate({width:"500px"},1000);
	},
	function(){
		$(this).stop().animate({width:"800px"},1000);
	},
	function(){
		$(this).stop().animate({width:"200px"},1000);
	}
	
);	
</script>
</body>
</html>

 

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> ToolTip 도움말 효과 </title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>


<style>
* {padding:0px; margin:0px;}
body {
	margin:20px auto;
	padding:0;	
	width:400px;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
}
p{ line-height:1.5; margin-bottom:5px;}

#tip {
	position:absolute;
    width:300px;
     color:#FFF;
	 padding:5px;
	display:none;
	
	background:#05184D;
	               border-radius: 5px;
               -moz-border-radius: 5px;
               -webkit-border-radius: 5px;
}



</style>
</head>

<body>

<div>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a <a href="#" title="There are many variations of passages of Lorem Ipsum available passages of Lorem Ipsum available passages of Lorem Ipsum available passages of ">galley</a> of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<p>
Contrary to popular belief, <a href="http://www.lipsum.com/" title="img/site.jpg" class="img">Lorem Ipsum</a> is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
</div> 




<!------------------------ jQuery 코드 ----------------------->
<script>
var tempTitle;
var type;
$("a").hover(function(e){
	tempTitle = $(this).attr("title");
	type = $(this).attr("class");
	console.log(tempTitle)
	$(this).attr("title","");
	
	if(type =="img"){
		tempImg = "<img src='"+tempTitle+"' width='100px' height:'100px'/>"
	}
	
	
	$("body").append("<div id='tip'></div>");
		if(type =="img"){
	     $("#tip").html(tempImg);
		 $("#tip").css("width","100px");
		} else{
		 $("#tip").text(tempTitle);
		}
	     var pageX = $(this).offset().left -20;
		 var pageY = $(this).offset().top - $("#tip").innerHeight();
		 
 
		 
		 $("#tip").css({left:pageX+"px", top:pageY +"px"}).fadeIn(500);
		
	}, function(){
		$(this).attr("title",tempTitle);
		$("#tip").remove();
	});
	
</script>

</body>
</html>

 

'코리아 IT아카데미 > Javascript·Jquery~~~' 카테고리의 다른 글

9일차 | 화면확대축소, kwicks 라이브러리 네비바, 마우스 휠, 나이스 스크롤, 니드팝업  (0) 2022.03.30
7일차 | 퀵메뉴가 있는 슬라이드배너, 좌우,상하,디졸브 슬라이드배너  (0) 2022.03.30
6일차 | 자동 슬라이드 배너, 자식부모관계, 박스사이즈, 스크롤값, 드래그값  (0) 2022.03.17
5일차 | 기본적인 갤러리, 일반적인 슬라이드 갤러리  (0) 2022.03.17
4일차 | jquery(가로메뉴, 세로메뉴 , 애니메이션, 풀다운 메뉴)  (0) 2022.03.17

관련글

티스토리툴바