17. (jquery/제이쿼리) Jquery 사용해 animate 애니메이션 동작 수행 실시

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

투케이2K

17. (jquery/제이쿼리) Jquery 사용해 animate 애니메이션 동작 수행 실시 본문

Jquery

17. (jquery/제이쿼리) Jquery 사용해 animate 애니메이션 동작 수행 실시

투케이2K 2021. 6. 27. 14:12

/* =========================== */

[ 개발 환경 설정 ]

개발 툴 : Edit++

개발 언어 : jquery

/* =========================== */

[소스 코드]

<!DOCTYPE HTML>
<!-- 표시 언어 지정 -->
<html lang="ko">

<!-- 헤더 정의 부분 -->
<head>
    <title>HTML TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    

    <!-- 내부 CSS 스타일 지정 -->
    <style>
		/* 
		[CSS 요소 설명] 
		1. font-family : 폰트 표시 형태 스타일 지정
		2. width : 가로 크기 지정
		3. height : 세로 크기 지정
		4. margin : 마진 (외부) 여백 설정
		5. padding : 패딩 (내부) 여백 설정
		6. border : 테두리 (선) 표시 설정
		7. background : 배경 표시 설정
		8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)
		9. float : 정렬 기준 설정
		10. div : 레이아웃 표시 블록
		11. position : 레이아웃 위치 정렬 설정	
		12. opacity	: 객체 투명도를 설정
		*/

				    			 	
    	
		/* html, body 영역 스타일 지정 */
		html, body{
			width : 100%;
			height : 100%;
			margin : 0;
			padding : 0;
			border : none;	
			
			/* 스크롤바 표시 지정 */
			overflow : auto;					
		}

		
		
		/* body 스크롤바 메인 스타일 지정 */
		body::-webkit-scrollbar {
			/* 스크롤바 너비 지정 */
			width: 10px;
			
			/* 스크롤바 배경 색상 지정 */
			background-color: #c1c1c1;
		}
		/* body 스크롤바 thumb 스타일 지정 */
		body::-webkit-scrollbar-thumb {					
			/* 스크롤바 thumb 색상 지정 */
			background-color: #444444;
		}



		/* div 스타일 지정 */
		#div_one_container {
			width : 30%;
			height : 20%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #ff00ff;
					
			/* 컨테이너 배치 정렬 실시 */
			float : top;
			position : relative; 
			top : 10%;
			left : 0%;

			/* display 설정 : p 태그 수직 정렬 */
			display : table;

			/* 투명도 설정 */
			opacity: 1;
		}		
		#div_one_txt {
			/* 텍스트 가로 정렬 지정 */
			text-align : center;
			
			/* 텍스트 색상 지정 */
			color : #ffffff;
			
			/* 텍스트 굵기 지정 */
			font-weight : bold;
			
			/* 텍스트 사이즈 지정 */        	
			font-size : 150%;
        	
			/* 텍스트 수직 정렬 실시 */        	        	 	
			display : table-cell;
			vertical-align : middle;
		}



		/* div 스타일 지정 */
		#div_two_container {
			width : 30%;
			height : 20%;
			margin : 0 auto;
			padding : 0;
			border : none;
			background-color : #0000ff;
					
			/* 컨테이너 배치 정렬 실시 */
			float : top;
			position : relative; 
			top : 15%;
			left : 0%;

			/* display 설정 : p 태그 수직 정렬 */
			display : table;

			/* 투명도 설정 */
			opacity: 1;
		}		
		#div_two_txt {
			/* 텍스트 가로 정렬 지정 */
			text-align : center;
			
			/* 텍스트 색상 지정 */
			color : #ffffff;
			
			/* 텍스트 굵기 지정 */
			font-weight : bold;
			
			/* 텍스트 사이즈 지정 */        	
			font-size : 150%;
        	
			/* 텍스트 수직 정렬 실시 */        	        	 	
			display : table-cell;
			vertical-align : middle;
		}
		      				                          
    </style>

        
    <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>    


    <!-- 내부 JS 스타일 지정 -->
    <script>

    	/*
    	[JS 요약 설명]
    	1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다
    	2. 제이쿼리에서는 animate() 메소드를 이용하여 사용자가 직접 원하는 이펙트 효과를 정의할 수 있습니다
    	3. animate() 메소드는 여러 CSS 속성을 이용하여 새로운 이펙트 효과를 만들어 줍니다
    	*/


    	/* html 최초 로드 및 이벤트 상시 대기 실시 */
    	$(window).load(function(){
    		console.log("[window onload] : [start]");

    		//애니메이션 동작 이벤트 호출
    		One_Animation();
    		Two_Animation();
    	});	



    	/* 이벤트 함수 정의 */
    	function One_Animation(){
    		console.log("");
    		console.log("[One_Animation] : [start]");
    		console.log("");

    		$("#div_one_container").animate(
    			{ //1초간 애니메이션 진행
    				opacity : 0.5
    			}, 1000, function(){ //1초 애니메이션 완료 후    				
    				$("#div_one_container").animate({ opacity : 1 }, 500); //다시, 애니메이션 변경
    				//$("#div_one_container").css("opacity", "1"); //즉시, 변경    				
    			}    		
    		);
    	};


    	/* 이벤트 함수 정의 */
    	function Two_Animation(){    		
    		console.log("");
    		console.log("[Two_Animation] : [start]");
    		console.log("");

    		// 기존 객체 left 값 저장 실시
    		var originalX = $("#div_two_container").css("left");
    		originalX = originalX.replace("px", "");
    		var beaforeX = originalX - 50;
    		console.log("");
    		console.log("[Two_Animation] : [originalX] : " + originalX);
    		console.log("[Two_Animation] : [beaforeX] : " + beaforeX);
    		console.log("");

    		$("#div_two_container").animate(
    			{ //1초간 애니메이션 진행
    				left : beaforeX,
    				opacity : 0.5
    			}, 1000, function(){ //1초 애니메이션 완료 후    				
    				$("#div_two_container").animate({ left : originalX, opacity : 1 }, 500); //다시, 애니메이션 변경
    				//$("#div_two_container").css("left", originalX); //즉시, 변경 
    				//$("#div_two_container").css("opacity", "1"); //즉시, 변경   				
    			}    		
    		);
    	};

    </script>

</head>


<body>

<!-- 컨테이너 생성 -->
<div id = "div_one_container">
	<p id = "div_one_txt">ONE</p>
</div>

<!-- 컨테이너 생성 -->
<div id = "div_two_container">
	<p id = "div_two_txt">TWO</p>
</div>

</body>

</html>

/* =========================== */

[결과 출력]

/* =========================== */

[요약 설명]

[CSS 요소 설명]

1. font-family : 폰트 표시 형태 스타일 지정

2. width : 가로 크기 지정

3. height : 세로 크기 지정

4. margin : 마진 (외부) 여백 설정

5. padding : 패딩 (내부) 여백 설정

6. border : 테두리 (선) 표시 설정

7. background : 배경 표시 설정

8. overflow : 범위를 벗어난 콘텐츠 표시 여부 설정 (스크롤)

9. float : 정렬 기준 설정

10. div : 레이아웃 표시 블록

11. position : 레이아웃 위치 정렬 설정

12. opacity : 객체 투명도를 설정

[JS 요약 설명]

1. window onload : 웹 브라우저 로딩 완료 상태를 나타냅니다

2. 제이쿼리에서는 animate() 메소드를 이용하여 사용자가 직접 원하는 이펙트 효과를 정의할 수 있습니다

3. animate() 메소드는 여러 CSS 속성을 이용하여 새로운 이펙트 효과를 만들어 줍니다

/* =========================== */

[파일 첨부]

a_test_animation.html

0.01MB

/* =========================== */

저작자표시

'Jquery' 카테고리의 다른 글

19. (jquery/제이쿼리) append , empty 사용해 특정 객체에 동적으로 요소 추가 및 전체 자식 삭제 수행 실시 (0)	2021.06.27
18. (jquery/제이쿼리) 요소 추가, 변경, 삭제 관련 메소드 모음 - append , replace , remove (0)	2021.06.27
16. (jquery/제이쿼리) 범용 (universal), 배열 (array), 파싱 (parse) 관련 유틸리티 종류 모음 (0)	2021.06.22
15. (jquery/제이쿼리) 마우스 (mouse) , 키보드 (keyboard), 입력 양식 (input) 이벤트 종류 모음 (0)	2021.06.22
14. (jquery/제이쿼리) each 사용해 json 데이터 key , value 데이터 확인 실시 (0)	2021.06.22

'Jquery' Related Articles

Comments

투케이2K

17. (jquery/제이쿼리) Jquery 사용해 animate 애니메이션 동작 수행 실시 본문

17. (jquery/제이쿼리) Jquery 사용해 animate 애니메이션 동작 수행 실시

'Jquery' 카테고리의 다른 글

티스토리툴바