1
2
3
4
5
6
7
8
9

#win_contents {
    /*border: solid 1px red;*/
    width: 95%;
    height: 90%;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
}

1
2
3

$(() => {
    $('#win_container').draggable();
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

//index.html에서 각 아이콘 클릭시 화면전환 기능 구현
const icons = document.querySelectorAll('.iconFlex');  //총 9개의 iconFlex 클래스를 querySelectorAll 배열로 변수 지정
const popupBox = document.getElementById('popup');  //아이콘 클릭시 자연스럽게 전환될 수 있도록 popup id 변수 지정

icons.forEach((icon,index) => {  //iconFlex div를 forEach, 클릭된 icon의 순서를 알기 위해 index를 추가로 선언
    icon.addEventListener('click', () => {  //icon을 클릭하면
        popupBox.classList.add('active');  //미리 선언해둔 팝업 변수에 active클래스를 추가하여 keyframe애니메이션 재생

        //핵심 코드. popupBox에 active 클래스가 추가되고 1초 후 내부 코드 실행
        setTimeout(() => {
            /*
            * index페이지 전환 코드
            * 각 서브 페이지 이름은 1~9.html로 지정해 두었음
            * forEach에서 선언한 index값은 클릭한 icon의 순서
            * querySelectorAll로 불러온 배열은 0부터 시작하므로 클릭한 index에 1을 더함
            * 최종적으로 백틱을 사용하여 클릭한 icon에 대한 순서(index)값+1.html 파일을 1초 후 열도록 프로그래밍
            * ex. 6번째 아이콘을 클릭 -> index값은 5 -> 5+1 => 6.html 1초 후 전환
            * */
            window.location.href = `./${index + 1}.html`;
        }, 1000);
    })
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!--SVG 중 일부-->
<path id="bezier-control" d="M10.5 327C73 251.167 243.3 99.5 424.5 99.5C605.7 99.5 776.667 250.833 839.5 326.5" stroke="#D0D0D0" stroke-width="1.5"/>

<!--버튼-->
<div id="btn-cluster">
    <button class="graph-btn"><img src="./sources/05motion/bezier_1.webp" alt="bezier_1"></button>
    <button class="graph-btn"><img src="./sources/05motion/bezier_2.webp" alt="bezier_2"></button>
    <button class="graph-btn"><img src="./sources/05motion/bezier_3.webp" alt="bezier_3"></button>
    <button class="graph-btn"><img src="./sources/05motion/bezier_4.webp" alt="bezier_4"></button>
</div>

 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
32
33

// svg중 bezier 부분 path, 움직일 원, 버튼 4개를 변수로 선언
const bezierControl = document.getElementById('bezier-control');
const ballObj = document.getElementById('ball');
const bezierBtn = document.querySelectorAll('.graph-btn');

// NodeList로 나열된 bezierBtn을 forEach로 풀어주기
bezierBtn.forEach((btn, index) => {
    btn.addEventListener('click', () => {
        // 버튼 순서대로 클릭시 index값을 통해 if문으로 조작
        if(index === 0) {
            /*
            * 해당 변수 내 요소의 속성값을 변경할 수 있는 메서드.
            * (변수).setAttribute(속성명, 속성값);
            * */
            bezierControl.setAttribute(
                // 해당 변수 path 내 포함된 요소 "b"에 대한 속성값을 아래와 같이 변경한다.
                "d",
                "M10.5 327C73 251.167 243.3 99.5 424.5 99.5C605.7 99.5 776.667 250.833 839.5 326.5"
            );
            // 추가된 모든 클래스를 제거
            ballObj.className = '';
        }
        else if(index === 1) {
            bezierControl.setAttribute(
                "d",
                "M10.5 327C43.5 327 132 99.5 214.5 99.5C335 99.5 332.5 326.5 839.5 326.5"
            );
            //추가된 모든 클래스를 제거하고 graph2 클래스를 add
            ballObj.className = '';
            ballObj.classList.add('graph2');
        }
    })
})