[TIL]2023.03.16 / 팀 소개 웹 사이트 project (스크롤 이벤트 추가/버튼 클릭 시 배경 변경)

목표

• 버튼 클릭시 이미지 변경하기
• 스크롤 위치에 따라 이벤트 발생되게 하여 역동적인 사이트 구축

---

참고자료

---

내용

 

스크롤 높이에 따라 애니메이션 이벤트가 발생하는 것 오늘 해결함

if문에 조건을 새로 주고 요소를 가지고 오려는 위치(class명)을 변경해주었음

//스크롤이벤트가 나타날때마다 함수를 호출하겠다
window.addEventListener("scroll", function () {
    //index.html의 teamcontents/ 일치하는 요소를 들고와라
    let backteam = document.querySelector(".teamcontents");
    //스크롤의 높이를 가져오는것
    let value = window.scrollY;
    console.log("scrollY", value);
    //스크롤 높이에 따라 애니메이션이벤트 발생
    //forwards 한번가면 안돌아옴
    if (value > 1600 || value < 684) {
        backteam.style.animation = "backslide 1s ease-out forwards"
    } else if(value > 684) {
        backteam.style.animation = "slide 2s ease-out";
    }
})

 

팀규칙 사라지는 거랑 소개합니다 사라지는게 안돼서 if를 중첩하지않고 각자 넣어보려고 스크롤 이벤트 추가함

//스크롤이벤트가 나타날때마다 함수를 호출하겠다
window.addEventListener("scroll", function () {
    //index.html의 teamcontents/ 일치하는 요소를 들고와라
    let backteam = document.querySelector(".teamcontents"); //팀목표,팀약속,팀규칙
    let backhello = document.querySelector("#teammain"); //welcome
    let showteam = document.querySelector("#teamstart"); //소개합니다
    //스크롤의 높이를 가져오는것
    let value = window.scrollY;
    console.log("scrollY", value);
    //스크롤 높이에 따라 애니메이션이벤트 발생
    //forwards 한번가면 안돌아옴
    if(value > 200) {
        backhello.style.animation = "uphello 2s ease-out forwards"; //welcome이 위로 올라가면서 사라짐
        if(value > 280) {
            showteam.style.animation = "show 3s ease-out forwards"; //소개합니다가 나타남
            if (value > 1600 || value < 410) {
                backteam.style.animation = "backslide 1s ease-out forwards" //팀규칙 등이 옆으로 사라짐
            } else if(value > 410) {
                backteam.style.animation = "slide 2s ease-out"; //팀규칙 등이 옆에서 나타남
            }
        } else if(value < 280 || value > 550) {
            showteam.style.animation = "hide 2s ease-out "; //소개합니다가 사라짐
        }
    } else {
        backhello.style.animation = "downhello 2s ease-out"; //welcome이 아래로 내려오면서 나타남
    }
})

 

css에 url로 이미지 넣었는데 이미지 전체 페이지 맞춤 해줘

.bodymain5 {
    color: rgb(255, 255, 255);
    background: url('../img/star.png') fixed;
    background-size: cover;
}

---

문제 (해결하기 어려웠던 일이나 에러)

배경이 바뀌는 버튼 만들기

---

시도 (문제가 생긴 이유와 해결하기 위해 시도해본 것들)

이미지 url 마다 class 이름을 다르게 주어 css를 만들고 버튼을 누를 때 마다 class 이름이 변경 되도록 시도 해봄(feat.탁근님)

---

해결 (최종적으로 해결이 되었을 때 시도한 것 정리)

1. 버튼을 눌렀을때 다음 이미지로 변경됨! ( 클래스명 마다 url을 다르게 준 css를 만들어 놓음= 클래스명이 바뀌면 url도 바뀌는 효과)

$(document).ready(function () {
	$('#버튼id').on('click',function() {
		$('#배경화면id').removeClass('.현재클래스명').addClass('.바꿀클래스명');
})

 

2. 버튼을 한번 클릭하면 이미지가 랜덤으로 변경됨. 하지만 더이상 버튼이 눌리지 않는 상태로 변함

$(document).ready(function () {
    show_comment();
	/*버튼 클릭시 발생*/
    $('#버튼id').on('click',function() {
        let teamclass = document.querySelector(".현재클래스명");
        let classes = ['클래스1','클래스2','클래스3']
        /*랜덤으로 classes 요소 하나 가져와서 randomClass에 저장*/
        let randomClass = classes[Math.floor(Math.random() * classes.length)];
        /*현재class명 지움 */
        teamclass.classList.remove('.현재클래스명');
        /*randomClass 값의 class명으로 추가*/
        teamclass.classList.add(randomClass);
        })
});

 

3. classes 변수에 넣은 인덱스 수 만큼 배경 변경가능(2번 클릭하면 끝)

//클래스들을 다 지움(()안에 클래스명을 따로 입력하지않음)
teamclass.classList.remove();

 

4. ... 스프레드연산자를 사용하여 버튼 클릭시 횟수 제한 없이 배경이 랜덤으로 바뀌에 함

   (같은 클래스명이 연속으로 나올 경우 사용자가 느끼기에는 버튼을 눌러도 배경이 변경되지 않는다고 느껴짐(같은사진으로 변경되는 것)) 

//... 스프레드연산자 사용하여 클래스들을 다 지움
teamclass.classList.remove(...teamclass.classList);

 

5. while문을 사용하여 현재클래스를 가져와서 randomClass와 클래스명이 같은지 확인하고 같으면 다시 랜덤 돌리게 함(feat.승호님)

$(document).ready(function () {
    show_comment();
	 
     //클릭시 발생
     $('#btn_home').on('click',function() {
         
         //id 정보를 다가져옴
         let teamclass = document.querySelector("#teammain");
         
         //현재 class를 nowclass에 저장
         let nowclass = document.querySelector("#teammain").classList
         
         //클래스 안에 클래스명들을 넣고
         let classes = ['teammain1','teammain2','teammain3']
         
         //랜덤돌리고
         let randomClass = classes[Math.floor(Math.random() * classes.length)];
         
         //똑같은지 확인하고 똑같으면
         while (randomClass==nowclass) { 
            //다시 랜덤돌리고 while로 가서 반복(조건에 맞지 않을때까지)
            randomClass = classes[Math.floor(Math.random() * classes.length)]; 

         }  
            //클래스들을 다 지우고
            teamclass.classList.remove(...teamclass.classList); 
            
            //랜덤으로 생성된 클래스의 인덱스값을 가져옴
            teamclass.classList.add(randomClass); 
         })
});

 

6. on click 밖에도 함수를 넣어서 새로고침 할때마다 새로운 배경이 뜨게 함

$(document).ready(function () {
    show_comment();
//처음부터 지정되어있는 class를 가져오지않고 랜덤으로 보여줌
let teamclass = document.querySelector("#bodymain");
let nowclass = document.querySelector("#bodymain").classList
let classes = ['bodymain1','bodymain2','bodymain3','bodymain4','bodymain5','bodymain6','bodymain7']
let randomClass = classes[Math.floor(Math.random() * classes.length)];
   teamclass.classList.remove(...teamclass.classList);
   teamclass.classList.add(randomClass);
   
   $('#btn_home').on('click',function() { //클릭시 발생
   
   ...생략(5번과 같음)...
   
   });

 

---

마무리 (내가 새롭게 알게 된 것이나 짧은 정리)

... 스프레드연산자