JAVASCRIPT STEP 49 - TRANSITION 알고리즘 - 1

★ 알고리즘 1 

• 스크롤바 이동에 따라 배경색을 바꾸기

■ HTML 코드

<div class="section">
    <h1>Index</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, commodi, natus ex, iste fugiat provident doloremque mollitia numquam nulla perferendis ab. Repudiandae ullam veniam sit dolor quibusdam nemo excepturi impedit.</p>
 </div>

 <div class="section">
    <h1>About me</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et eius possimus recusandae repellat labore in officia eligendi quas sit non ipsum dolorem temporibus sed, enim omnis voluptas, dicta repellendus qui. Culpa, repellat. Earum doloremque neque ullam beatae quia iste id, facilis quos veniam sint similique asperiores culpa hic minus cupiditate maiores praesentium magnam dolorum inventore delectus. Natus, magni saepe doloribus architecto animi earum dolorem ipsam perferendis voluptates molestiae molestias nostrum ducimus. Consequatur, possimus voluptas sapiente iusto nostrum impedit mollitia velit quibusdam natus, accusantium, nobis laboriosam amet! Dolorum culpa, nihil sunt doloremque corrupti, reiciendis voluptatum cupiditate dicta, dolorem expedita similique pariatur.</p>
 </div>

 <div class="section">
    <h1>Career</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil illum voluptas aut architecto similique quo accusantium deleniti assumenda impedit minima error repellat id, ad nisi accusamus deserunt enim numquam voluptatum esse iusto consequatur consequuntur labore. Asperiores repellat, quam, est iure laboriosam sit ea tempora beatae accusantium neque earum quod ab.</p>
 </div>

 <div class="section">
    <h1>Portfolio</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, pariatur. Dolorum voluptatibus enim magni ex. At amet rerum atque delectus? Veniam delectus sunt beatae. Est rem fugiat placeat suscipit vitae praesentium dolore. Tenetur itaque illum facere quaerat nulla eos animi! Eos deserunt saepe enim, ea laborum, velit obcaecati quisquam harum molestias minus laudantium maxime minima. Reiciendis minima at natus fugit. Officia, repudiandae? Amet ratione obcaecati voluptatibus cumque excepturi quis? Nemo tenetur odit deserunt mollitia beatae quas accusamus laudantium vero sequi, rem nostrum? Earum ipsum dignissimos ad nobis maiores accusantium officia perspiciatis aspernatur! Eos pariatur hic saepe dolor in itaque voluptate commodi. Maxime excepturi exercitationem culpa consequatur error tempora eum consectetur officia, voluptate voluptates doloremque. Fugit rerum molestiae, inventore quidem dolorum quibusdam nam tenetur sapiente libero quasi sequi perspiciatis cupiditate earum non nihil beatae sint in architecto, ipsa magni error qui placeat. Earum temporibus quam velit iste blanditiis tempore nam porro.</p>
 </div>

 <div class="section">
    <h1>Education</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore accusamus numquam quis libero vel harum eligendi laboriosam, debitis, modi rem minus beatae eum, reiciendis obcaecati fuga similique. Qui quo beatae voluptate assumenda nostrum quidem nihil, est magnam debitis consectetur, sequi fuga repudiandae animi in quia molestias consequatur, reiciendis modi laudantium architecto hic amet a neque. Reiciendis ducimus excepturi suscipit repellendus. Minus, expedita earum quia quas amet cupiditate officia maxime ducimus enim a vero voluptatem fugiat omnis repellat ut quisquam laborum ipsam ipsa. Eius magni ipsa maiores aliquid deleniti distinctio, praesentium esse eos, optio officiis accusamus delectus. Mollitia temporibus minima, sit natus blanditiis nisi ipsum excepturi, ipsa magnam aperiam hic animi placeat! Consequuntur maiores suscipit accusantium nostrum ut architecto perferendis cum molestias, odit, aperiam quaerat illum molestiae asperiores soluta! Maxime adipisci quod eaque quibusdam illo? Totam ad cum quisquam suscipit magnam molestiae earum doloremque, numquam asperiores harum voluptate iusto quod exercitationem animi incidunt optio quaerat aliquid. Debitis id magnam quibusdam totam quam dicta minima eveniet nam labore temporibus, minus veniam sequi explicabo! Soluta quae, quos ab officia a, doloremque, culpa voluptas perspiciatis aliquam rem sit? Quo praesentium assumenda numquam libero in eius cupiditate debitis voluptates excepturi, ipsam distinctio dicta molestiae consequuntur.</p>
 </div>

■ CSS 코드

<style>
body { 
   margin: 0; 
   transition: all 1s;
}

.section {
   width: 800px;
   margin: 0px auto;
   border-left: 1px solid black;
   border-right: 1px solid black;
   padding: 20px;
   padding-bottom: 400px;
   border-bottom: 1px solid black;
}
</style>

■ JavaScript

<script>

    const list = document.getElementsByClassName('section');

    const s1 = list[0].getBoundingClientRect().top;
    const s2 = list[1].getBoundingClientRect().top - 100;
    const s3 = list[2].getBoundingClientRect().top - 100;
    const s4 = list[3].getBoundingClientRect().top - 100;
    const s5 = list[4].getBoundingClientRect().top - 100;

    window.onscroll = function() {
       //console.log(window.scrollY);         

       if (window.scrollY < s2) {
          console.log(1);
          document.body.bgColor = 'white';
       } else if (window.scrollY < s3) {
          console.log(2);
          document.body.bgColor = 'tomato';
       } else if (window.scrollY < s4) {
          console.log(3);
          document.body.bgColor = 'gold';
       } else if (window.scrollY < s5) {
          console.log(4);
          document.body.bgColor = 'cornflowerblue';
       } else {
          console.log(5);
          document.body.bgColor = 'yellowgreen';
       }

    };

    //좌표계와 상관없이 현재 좌표값 확인
    //console.log(document.getElementsByClassName('section')[1].getBoundingClientRect().top);

 </script>

■ 실행 결과

스크롤을 내릴때마다, 해당 위치에 따라 배경색을 다르게 함.

 

★ 알고리즘 2

• 고양이를 마우스 클릭한 장소로 이동시키시오.

■ HTML 코드

<img src="https://drive.google.com/uc?export=download&id=1koqwCjLLt8ClJTOmxq3xFJ-vBP2z8gIy" id="cat">

■ CSS 코드

<style>
    .main {
        position: static;
    }
    #cat {
        position: absolute;
        left: 0px;
        top: 0px;
        transition: all 1s;
    }

</style>

■ JavaScript

<script>

    var cat;

    window.onload = function() {

        cat = document.getElementById("cat");

    };

    window.onmousedown = function() {

        cat.style.left = event.clientX - 64 + "px";
        cat.style.top = event.clientY - 64 + "px";

    };

</script>

■ 실행 결과

마우스 커서 누를 때마다, 고양이가 따라 움직임.

 

★ 알고리즘 3

• 고양이를 마우스 클릭한 장소로 이동.
• 등속으로 이동.

■ HTML 코드

<img src="https://drive.google.com/uc?export=download&id=15rZlOHWQTyuPFqIJs8_90R6W5JOOrVcv" id="cat">

■ CSS 코드

<style>
    .main {
        position: static;
    }
    #cat {
        position: absolute;
        left: 0px;
        top: 0px;
        transition-property: all;
        transition-timing-function: linear;
    }
</style>

■ JavaScript

<script>

    var cat;
    var oldX = 0;
    var oldY = 0;

    window.onload = function() {

        cat = document.getElementById("cat");

    };

    window.onmousedown = function() {

        var dis_x = Math.abs(oldX - event.clientX);
        var dis_y = Math.abs(oldY - event.clientY);

        oldX = event.clientX;
        oldY = event.clientY;

        //c^2 = a^2 + b^2
        var duration = Math.sqrt(dis_x * dis_x + dis_y * dis_y);
        //document.title = dis_x + ", " + dis_y + ", " + (duration / 1000);
        cat.style.transitionDuration = duration / 1000 + "s";

        cat.style.left = event.clientX - 64 + "px";
        cat.style.top = event.clientY - 64 + "px";

    };

</script>

■ 실행 결과

마우스 커서를 움직여 클릭시, 해당 이미지가 빠르게 따라옴.

 

★ 알고리즘 4

• 고양이를 마우스 경로를 따라 이동.
• 왼쪽 Ctrl키를 누른채 마우스를 움직여 경로를 기록.
• 왼쪽 Ctrl키를 떼고 경로 기록을 중단.
• 시작 버튼을 눌러 고양이를 이동.

■ HTML 코드

<input type="button" value="시작" id="btn1">
	<img src="https://drive.google.com/uc?export=download&id=1CtycyymQARHGgGCH-lViqomdsW1JNsq1" id="cat">

■ CSS 코드

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

■ JavaScript

<script>

    var cat;
    var pathX = [];
    var pathY = [];
    var timer = 0;

    window.onload = function() {

        cat = document.getElementById("cat");

        document.getElementById("btn1").onclick = function() {

            console.log(pathX.length);

            timer = setInterval(function() {

                cat.style.left = pathX[0] - 64 + "px";
                cat.style.top = pathY[0] - 64 + "px";

                pathX.shift();
                pathY.shift();

                if (pathX.length == 0) {
                    clearInterval(timer);
                }

            }, 21);

        };

    };

    window.onmousemove = function() {

        if (event.ctrlKey) {
            pathX.push(event.clientX);
            pathY.push(event.clientY);
        }	

    };


</script>

■ 실행 결과

컨트롤을 눌러 마우스를 움직인 후, 버튼을 클릭 시, 이전에 움직였던 기록대로 이미지가 이동함