8/1 개발일지

정명환·2022년 8월 1일

대구 ai 스쿨

목록 보기

67/79

1. 학습한 내용

스크립트를 이용한 img 태그 접근 및 속성 값 변경

 const logo = document.querySelector('.logo img');
                logo.src = "./img/toco-common/logo-Resoft-white.png"
                const ham = document.querySelector('.ham img');
                ham.src = "./img/toco-img1/icon-menu.svg"

querySelector를 이용해 .logo클래스의 img를 가져와서 logo에 지정
logo의 src주소를 변경하는 방식으로 이미지를 바꿔보았습니다.

참고 사이트 : https://tamagotch.tistory.com/26

메뉴바 스크롤 시 변경

   $(window).on('scroll',function(){
            if($(window).scrollTop()){
                $('#gon').addClass('active');
                const logo = document.querySelector('.logo img');
                logo.src = "./img/toco-common/logo-Resoft.svg"
                const ham = document.querySelector('.ham img');
                ham.src = "./img/toco-common/company_N_busines_N_yard-menu.svg"
                $("#gon").css('transition',".5s");
            }else{
                $('#gon').removeClass('active');
                const logo = document.querySelector('.logo img');
                logo.src = "./img/toco-common/logo-Resoft-white.png"
                const ham = document.querySelector('.ham img');
                ham.src = "./img/toco-img1/icon-menu.svg"
            }
        });

window객체를 사용해 scroll시 값을 받아오는 scrollTop()함수를 사용하여 if문이 0이면 false 그 외 숫자가 들어오면 true인 성질을 이용해 active라는 클래스(메뉴바 배경 및 글씨색 변경)와 이미지 변경을 추가하였습니다. 그리고 매끄러운 변화를 주기위해 transition도 넣어 주었습니다.

참고 사이트 : https://100ah.tistory.com/entry/jquery-%EB%A9%94%EB%89%B4%EB%B0%94-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%82%B4%EB%A0%B8%EC%9D%84%EB%95%8C-scrollTop

지연함수 사용

  if($(window).scrollTop()==0){
        setTimeout(function() {  $('#gon').removeClass('active');
        $('.logo').attr('src','./img/toco-common/logo-Resoft-white.png');
        const logo = document.querySelector('.logo img');
        logo.src = "./img/toco-common/logo-Resoft-white.png"
        const ham = document.querySelector('.ham img');
        ham.src = "./img/toco-img1/icon-menu.svg"}, 500);
        $("#gon").css('transition',".5s");
        }

지연함수를 사용해 메뉴바가 내려오는 효과로 글씨가 먼저 나와 가리는 현상을 수정하였습니다. 다른 애니메이션을 사용하거나 라이브러리를 찾아보는 방법도 있지만 지금은 이러한 방법으로 시차를 두어 글을 나중에 나오게 하였습니다. 그리고 스크롤이 가장 위에 있을때만 이러한 작업이 필요했기 때문에 scrollTop()==0일 때만 작동하게 하였습니다.

참고 사이트 : https://webisfree.com/2014-04-08/[javascript]-%EC%8B%9C%EA%B0%84-%EC%A7%80%EC%97%B0-%ED%95%A8%EC%88%98-%EC%9D%BC%EC%A0%95-%EC%8B%9C%EA%B0%84-%EB%92%A4-%EC%8B%A4%ED%96%89%EC%8B%9C%ED%82%A4%EA%B8%B0-settimeout()-%7B%7D