Effect/ParallaxEffect7 [자바스크립트 응용하기] 페럴렉스이펙트07_ 리빌효과 페럴렉스 효과 05 이번에는 이질감이 느껴지는 효과를 구현해보겠습니다. 이 효과를 뭐라고 설명해야할지 모르겠네요?＼（〇_ｏ）／ 그냥 이질감 효과라고 합시다 원본 소스 보기 원본 사이트 JS 소스 function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop); document.querySelectorAll(".content__item").forEach(item => { const target1 = item.querySelector(".content__item__i.. 2022. 10. 10. [자바스크립트 응용] 페럴렉스 효과 06_ 나타나기 효과 페럴렉스 효과 06 이번 시간에는 글씨가 나타나는 효과를 주겠습니다. 원본 소스 보기 원본 사이트 JS 소스 document.querySelectorAll(".split").forEach(text => { let splitText = text.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + ""; text.innerHTML = splitWrap; text.setAttribute("aria-label", splitText); }) function scroll() { let scrollTop = window.scrollY; document.querySelector("#parallax__info .scro.. 2022. 10. 3. [자바스크립트 응용하기]페럴렉스효과05_ 이질감이 드는 효과...😶 페럴렉스 효과 05 이번에는 이질감이 느껴지는 효과를 구현해보겠습니다. 이 효과를 뭐라고 설명해야할지 모르겠네요?＼（〇_ｏ）／ 그냥 이질감 효과라고 합시다 원본 소스 보기 원본 사이트 JS 소스 function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop); document.querySelectorAll(".content__item").forEach(item => { const target1 = item.querySelector(".content__item__i.. 2022. 9. 20. [자바스크립트 응용] 페럴렉스 효과04 / 스크롤에 따른 컨텐츠 애니메이션 페럴렉스 효과 04 이번에는 스크롤을 내려서 일정 위치에 도달하면 이미지box가 서서히 나타나는 효과를 만들어보겠습니다. 여태 페럴렉스효과를 함께 하셨다면 어려울 점이 없을거에요 원본 소스 보기 원본 사이트 JS 소스 // window.addEventListener("scroll", scrollProgrss); --> 쓰지않는 이유 : 과부화방지 --> requestAnimationFrame를사용함. // 재귀함수 : 함수를 실행했는데 자기자신을 또실행함. 이게 무한반복됨 // requestAnimationFrame : 일종의 재귀함수 역할을 하는데 얘는 무한루프 방지해줌 function scroll(){ let scrollTop = window.pageYOffset || document.document.. 2022. 9. 19. [자바스크립트 응용] 페럴렉스 효과03 / 스크롤변화에 따른 효과 적용하기 패럴랙스 효과 03 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 오늘은 스크롤을 내리면 상단 메뉴바가 사라지고, 스크롤을 올리면 다시 나타나는 구성으로 진행해볼 예정이구요. 추가로 페이지의 맨마지막에 도달하면 위로가기 버튼이 나타나게 스크립트를 짜줄겁니다. 생각만큼 어렵지 않으니 같이 공부해봐요! 원본 소스 보기 원본 사이트 ▶ 메뉴바를 스크롤의 변화에 따라 바로이전의 스크롤 위치값을 마지막 스크롤값에 대입시켜 현재 스크롤위치값과 비교하도록 스크립트를 만들어 줍니다. 스크롤이 위로 올라간다는 것은 현재 스크롤 위치값이 이전 스크롤위치값보다 작다.. 2022. 9. 12. [자바스크립트 응용] 페럴렉스 효과02 / 스크롤변화에 따른 효과 적용하기 패럴랙스 효과 02 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 오늘은 저번시간에 이어서 사이드바 메뉴로 구성하는 방식에 대해 알아보겠습니다. 원본 소스 보기 원본 사이트 ▶ 저번시간과 원리는 별반 다를게 없습니다. 'parallax__info span'에 현재 scrollTop값을 입력되게 해주고, 'scrollTop >= 각 섹션 offsetTop' 일때 해당되는 섹션의 메뉴버튼에 active클래스를 붙여줍니다. 또, 메뉴버튼에 해당되는 a링크에 preventDefault를 부여해서 a태그 고유기능은 막고 scrollIntoView를 주어서.. 2022. 9. 12. [자바스크립트 응용] 페럴렉스 효과01 / 스크롤변화에 따른 효과 적용하기 패럴랙스 효과 01 페럴랙스 효과에 대해서 알아보겠습니다. 패럴랙스 스크롤링은 사용자가 마우스를 스크롤할 때, 원거리에 있는 배경 이미지는 느리게 움직이게 하고, 근거리에 있는 사물 이미지는 빠르게 움직이도록 함으로써 입체감을 느낄 수 있게 만든 디자인 기법입니다. 그렇기때문에 자바스크립트의 스크롤 관련 메서드에 대해서 잘 알아야 사용할 수 있는 효과입니다. 요약하자면 스크롤변경에 따른 행동(?)을 조정하는 효과입니다. 원본 소스 보기 원본 사이트 ▶ 각 섹션의 offset값을 구해준뒤 만들어 놓은 offset__info에 넣어줍니다. '현재 스크롤값 >= 각 섹션의 offset값' 일때 메뉴바에 active클래스를 추가해서 현재메뉴가 표시되게 해주고, 나머지 메뉴바는 active를 제거하여 활성화된 액.. 2022. 9. 12. 이전 1 다음 반응형
