JAVASCRIPT STEP 50 - TRANSITION 알고리즘 - 2

★ 알고리즘 5

• 이동하는 마우스를 따라 고양이를 이동.
• 마우스의 괘적을 기록하는 큐 역할의 배열이 필요.
• let pathX = [];
• let pathY = [];
• pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 고양이의 좌표로 지정.

■ HTML 코드

<img src="https://drive.google.com/uc?export=download&id=1koqwCjLLt8ClJTOmxq3xFJ-vBP2z8gIy" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1R8r-4CyguFnrkXIytSWINCc0h31G8vRh" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1fQMz-PMZTvGmd5OS13jWgCfsZiaaggTP" class="cat">
<img src="https://drive.google.com/uc?export=download&id=10WLacpiAP-kU2L8vKYhb5Scyk0--fMIx" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1xv-zE6HfD4e8EirUq7wQ__TV3oVa9kQ1" class="cat">
<img src="https://drive.google.com/uc?export=download&id=11ZiyhzBCegpX8KreLv1gYmQjp1tcL4E2" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1eOwMZU3RJvkP_n8-I6wxaGfBup_0SwIn" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1l3SjqNOkcgr_LsSIPh3fSWXzwP_Qt83B" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1x9mfOXShpJppOag-aCMlAn0316W99kpo" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1TeVDQTUSsUuCYMWUd8rJ6rD5j5SD73Aw" class="cat">
<img src="https://drive.google.com/uc?export=download&id=13g2V5Cka1uhdPIGjoaNn0f8clGi71rV7" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1CtycyymQARHGgGCH-lViqomdsW1JNsq1" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1aBc2_UgrOeUhUKhiBgFSjs-v3j58iDc-" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1AFZvCciCJoEkYDadcm1vkorwpfWkM0Oq" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1OVFJga9NKzXt2VA37L7QrVqLcwBEx2vT" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1vFRQuM-srcT6dgtEOESOF2i7R46UVhRe" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1c4b08akVn8vG95eQo_ROA02xvF82TIOM" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1KCbE0rQc-Foq98zOgn5uiMcb3GG81AB_" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1nRLvTYXhiN0nwVn1y8VC9n1-oJNVqjJF" class="cat">
<img src="https://drive.google.com/uc?export=download&id=1LeRxj_0tT9qUzVymJ_70sWw2iqPa6VUI" class="cat">
<img src="https://drive.google.com/uc?export=download&id=15rZlOHWQTyuPFqIJs8_90R6W5JOOrVcv" class="cat">

■ CSS 코드

<style>
    #main, .main {
        position: static;
    }
    .cat { position: absolute; left:0px; top: 0px; display: none; }
</style>

■ JavaScript

<script>
    var cats;
    var pathX = [];
    var pathY = [];

    window.onload = function() {
        cats = document.getElementsByClassName("cat");
        for (var i=0; i<cats.length; i++) {
            cats[i].style.zIndex = (cats.length-i);
        }
    };

    window.onmousemove = function() {
        pathX.push(event.clientX);
        pathY.push(event.clientY);

        if (pathX.length > cats.length) {
            pathX.shift();
            pathY.shift();
        }

        moveCat();
    };

    function moveCat() {

        for (var i=0; i<cats.length; i++) {
            if (pathX[i] != null) {
                cats[i].style.left = pathX[i] - 64 + "px";
                cats[i].style.top = pathY[i] - 64 + "px";
                cats[i].style.display = "block";
            }
        }

    }

</script>

■ 실행 결과

마우스 커서를 이동하면서, 해당 이미지들이 따라 옴.

 

★ 알고리즘 6

• 이동하는 마우스를 따라 고양이를 이동.
• 마우스의 괘적을 기록하는 큐 역할의 배열이 필요.
• let pathX = [];
• let pathY = [];
• pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 고양이의 좌표로 지정.

■ HTML 코드

<div id="box">
    <img src="https://drive.google.com/uc?export=download&id=1koqwCjLLt8ClJTOmxq3xFJ-vBP2z8gIy" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1R8r-4CyguFnrkXIytSWINCc0h31G8vRh" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1fQMz-PMZTvGmd5OS13jWgCfsZiaaggTP" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=10WLacpiAP-kU2L8vKYhb5Scyk0--fMIx" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1xv-zE6HfD4e8EirUq7wQ__TV3oVa9kQ1" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=11ZiyhzBCegpX8KreLv1gYmQjp1tcL4E2" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1eOwMZU3RJvkP_n8-I6wxaGfBup_0SwIn" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1l3SjqNOkcgr_LsSIPh3fSWXzwP_Qt83B" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1x9mfOXShpJppOag-aCMlAn0316W99kpo" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1TeVDQTUSsUuCYMWUd8rJ6rD5j5SD73Aw" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=13g2V5Cka1uhdPIGjoaNn0f8clGi71rV7" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1CtycyymQARHGgGCH-lViqomdsW1JNsq1" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1aBc2_UgrOeUhUKhiBgFSjs-v3j58iDc-" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1AFZvCciCJoEkYDadcm1vkorwpfWkM0Oq" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1OVFJga9NKzXt2VA37L7QrVqLcwBEx2vT" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1vFRQuM-srcT6dgtEOESOF2i7R46UVhRe" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1c4b08akVn8vG95eQo_ROA02xvF82TIOM" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1KCbE0rQc-Foq98zOgn5uiMcb3GG81AB_" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1nRLvTYXhiN0nwVn1y8VC9n1-oJNVqjJF" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=1LeRxj_0tT9qUzVymJ_70sWw2iqPa6VUI" class="cat">
    <img src="https://drive.google.com/uc?export=download&id=15rZlOHWQTyuPFqIJs8_90R6W5JOOrVcv" class="cat">
</div>

■ CSS 코드

<style>
    #main, .main {
        position: static;
    }
    body { background-color: #444; }
    #box { border: 10px solid black; width: 1000px; height: 700px; margin: 50px auto; overflow: hidden; position: relative; left: 0px; top: 0px; background-color: white; }
    .cat { position: absolute; left:0px; top: 0px; display: none; }
</style>

■ JavaScript

<script>
    var cats;
    var isDown = false;
    var pathX = [];
    var pathY = [];
    var box;

    window.onload = function() {
        box = document.getElementById("box");
        cats = document.getElementsByClassName("cat");
        for (var i=0; i<cats.length; i++) {
            cats[i].style.zIndex = (cats.length-i);
        }
    };

    window.onmousedown = function() {
        isDown = true;
    };
    window.onmouseup = function() {
        isDown = false;
    };
    window.onmousemove = function() {
        pathX.push(event.clientX);
        pathY.push(event.clientY);

        if (pathX.length > cats.length) {
            pathX.shift();
            pathY.shift();
        }

        moveCat();
    };

    function moveCat() {
        for (var i=0; i<cats.length; i++) {
            if (pathX[i] != null) {
                cats[i].style.left = pathX[i] - 64 - box.offsetLeft + "px";
                cats[i].style.top = pathY[i] - 64 - box.offsetTop + "px";
                cats[i].style.display = "block";
            }
        }

    }

</script>

■ 실행 결과

박스안에서 해당 이미지들이 따라 움직이고, 영역을 벗어났을 때 사라졌다가, 다시 나타남

 

★ 알고리즘 7

• 메뉴를 구현.
• 선택된 메뉴에 따라 문서 배경색과 글자색을 바꿈.

■ HTML 코드

<nav id="menu">
    <img src="images/rect_icon01.png" class="item">
    <img src="images/rect_icon02.png" class="item">
    <img src="images/rect_icon03.png" class="item">
    <img src="images/rect_icon04.png" class="item">
    <img src="images/rect_icon05.png" class="item">
</nav>
<section id="content">
    <h1>Lorem ipsum dolor sit amet.</h1>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eligendi ipsum aut harum, officiis soluta voluptate quo adipisci quidem impedit! Minima dolore eos provident unde esse repudiandae, porro ducimus assumenda quaerat!
    <br>
    <br>
    Est omnis distinctio veniam ipsam? Dignissimos fugiat ullam rerum amet fuga quasi voluptates architecto exercitationem, repellat alias cumque eveniet corrupti deleniti voluptatum pariatur delectus dolores eos libero consequatur maxime similique?
    <br>
    <br>
    Temporibus sed quidem praesentium suscipit, vitae eligendi, fugit pariatur incidunt corporis minima excepturi recusandae amet, debitis voluptatibus? Suscipit facilis repellat placeat blanditiis. Amet cupiditate in quis quo eligendi dolore ad.
    <br>
    <br>
    Obcaecati, rerum. Et, ipsum illo dicta cupiditate, aut voluptate ullam tenetur obcaecati necessitatibus sed quis, nihil culpa! Corrupti adipisci qui ducimus cum sunt, fugit soluta nam dicta recusandae optio repudiandae!
    <br>
    <br>
    Dolor, sapiente iure. Beatae minus neque excepturi repellat quibusdam molestiae in, molestias incidunt totam hic error dolores quam voluptate commodi fugit veniam sed suscipit recusandae laboriosam. Eaque nam tempore mollitia.
</section>

■ CSS 코드

<style>

	body {
		margin: 0px;
		overflow-x: hidden; 
		overflow-y: auto;
		transition: all 1s;
	}

	section {
		transition: all 1s linear;
	}
	
	#menu {
		width: 126px;
		transform: translate(-100px, 0px);
	}
	
	#menu .item {
		float: left;
		transition: all .3s;
		cursor: pointer;
		transition-timing-function: ease-in;
		border: 1px solid white;
		margin-top: -1px;
	}
	
</style>

■ JavaScript

<script>

	var colors = ["#A67F62", "#BE4F3B", "#E7C758", "#666666", "#63AFD1"];
	var item;
	var sel;
	var n;
	var ing = false;
	var content;
	var contentColors = ["#fff", "#fff", "#444", "#fff", "#fff"];
	
	window.onload = function() {
		
		item = document.getElementsByClassName("item");
		content = document.getElementById("content");
		
		for (var i=0; i<item.length; i++) {
			
			item[i].onmousedown = function() {
				
				if (!ing) {

					ing = true;

					sel = event.srcElement;
					
					sel.style.transform = "translate(" + (screen.availWidth - 26) + "px, 0px)";
					n = sel.src.substr(sel.src.lastIndexOf(".")-1, 1);
					
					
					setTimeout(function() {
						sel.style.transition = "all 3s";
						sel.style.transform = "translate(" + (screen.availWidth - 26 + 146) + "px, 0px)";
						//sel.style.opacity = "0";
					}, 500);
					
					setTimeout(function() {
						document.body.style.backgroundColor = colors[n-1];			
						content.style.color = contentColors[n-1];
					}, 900);
					
					setTimeout(function() {
						sel.style.transition = "all 1ms";
						sel.style.transform = "translate(-100px, 0px)";	
					}, 2200);
					
					setTimeout(function() {
						sel.style.transition = "all 1s";
						sel.style.transform = "translate(0px, 0px)";	
					}, 2300);
					
					setTimeout(function() {
						sel.style.transition = "all .3s";
						sel.style.transform = "translate(0px, 0px)";	
						ing = false;
					}, 3300);
				
				}
			};
			
		}
		
	};
	
</script>

■ 실행 결과

옆의 메뉴를 클릭시, 해당 메뉴 색상으로 변경.