본문 바로가기

JavaScript131

이펙트 응용편 - 마우스 이펙트 두번째 마우스 이펙트2 이번 마우스 이펙트는 mousemove 이벤트를 이용하여 브라우저 요소의 좌표 값과 속성을 제어하는것을 배웠습니다. 마지막으로 화면안에 소스보기를 통한 소스를 볼수있습니다. JS 설명 gsap를 써서 마우스커서가 움직이게 작동했습니다. 코드 보기 window.addEventListener("mousemove", (e) => { gsap.to(cursor, { duration: 0.3, left: e.pageX - 5, top: e.pageY - 5 }); gsap.to(cursor2, { duration: 0.8, left: e.pageX - 15, top: e.pageY - 15 }); }); 원본 소스 보기 원본 사이트 보기 2022. 9. 19.
이펙트 응용 편 - 페럴럭스 이펙트 두 번째 페럴럭스 이펙트2 이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다. 원본 소스 보기 원본 사이트 보기 scroll관련 코드들 간단요약 먼저 scrollTop 에 조건을 걸어 모든 웹브라우저에 스크롤값을 구합니다. let scrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY; scroll.innerText = Math.round(scrollTop); content__item 클래스를 이용해 각 요소의 offsetTop 값을 찾아서 #parallax__dot 에있는 li 에 효과를 입혀줍니다. 또한 forEach는 0부.. 2022. 9. 8.
이펙트 응용하기 | 페럴럭스 이펙트 첫 번째 페럴럭스 이펙트 offsettop 와 scrollTop을 이용하여 메뉴 선택창이 해당 메뉴에 진입되었을때 색이 바뀌는 효과를 만들어 보았습니다. 하지만 이런경우는 대부분 과부화를 일으키기 때문에 조심히 사용하는게 좋을것 같습니다. 원본 소스 보기 원본 사이트 보기 scroll관련 코드들 간단요약 먼저 scrollTop 에 조건을 걸어 모든 웹브라우저에 스크롤값을 구합니다. let scrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY; scroll.innerText = Math.round(scrollTop); 이제 각 section 에 있는 아이디값을 찾아 이전에 구한 scrollTop 와 세션에있는 of.. 2022. 9. 6.
이펙트 응용편 | 마우스 이펙트 첫 번째 마우스 이펙트 이번 마우스 이펙트는 mousemove 이벤트를 이용하여 브라우저 요소의 좌표 값과 속성을 제어하는것을 배웠습니다. 마지막으로 화면안에 소스보기를 통한 소스를 볼수있습니다. 원본 소스 보기 원본 사이트 보기 2022. 9. 6.
jQuery - mouseenter / movesover 차이점 mouseenter / movesover 차이점 MouseOver/Out : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함됨 MouseEnter/Leave : 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됨 예시 See the Pen jquery19 by hmm365 (@hmm365) on CodePen. 1번 div의 경우는 회색 영역에만 영향을 줍니다. 1번의 경우는 마우스를 우선 회색 div 범위내에 올리면 p태그로 감싸여 있는 글씨 부분의 배경이 노랑색으로 변하는걸 확인하실 수 있습니다. 그리고 다시 연두색 영역인 p태그 영역으로 마우스를 가져다 놓으면 최종적으로 하양색 선이 생기는걸 확인하실 .. 2022. 9. 5.
jQuery : 속성 관련 메서드 attr()관련 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({"href": "http://icoxpublish.com", target:"_blank"}); 콜백 함수 $("a").attr("href", function(index, h){ //index는 각 a 요소의 index 0, 1, 2 //h는 각 a 요소 href 속성1 return attribute(속성) // 각 a 요소의 속성을 생성 및 변경합니다. }); ... 다음 네이버 네이트.. 2022. 9. 5.
728x90
반응형

자바스크립트 사진

JavaScript

자세히보기