effect11 이펙트 응용편 - 페럴럭스 오번째 페럴럭스 이펙트5 이번 페럴럭스 이펙트는 이질감 효과를 나타냈습니다. 원본 소스 보기 원본 사이트 보기 js 코드 설명 이질감을위해 offset1 변수를 만들어 현제 보이는 스크롤 탑 값과 각 요소의 offsetTop 값을 뺀 오차만큼 translateY 를 주어서 스크롤이 내려갈때마다 살짝 움직이는 이질감 효과를 만들었습니다. 조금더 자연스러운 효과를위해 gsap를 사용하여 훨씬 자연스럽게 했습니다. function scroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTo.. 2022. 9. 20. 이펙트 응용 편 - 페럴럭스 이펙트 두 번째 페럴럭스 이펙트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. 검색 이펙트 두번째 검색 이펙트 html 태그, css 속성, javascript 의 메서드 를 검색하여 찾아볼수있습니다. 원본 사이트 보기 원본 소스 보기 1.HTML 코드 HTML에서 js를 동작하기위한 class이름과 input등을 적절히 사용하여 사용자가 알아보기쉽게 표현해야합니다. 코드 보기 indexOf()를 이용하여 CSS 속성 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드 기타 등등 유형 별로 검색해보세요! 전체 속성 갯수 : 0 accent-color : 특정 요소에 색상을 지정할 때 사용됩니다. align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적.. 2022. 8. 17. 이펙트 응용 편 | 퀴즈 만들기 네번째 웹디자인 기능사 퀴즈 풀기 웹 디자인 기능사 필기 기출문제를 JS를 이용해서 간단한 퀴즈 프로그램을 만들었습니다. 퀴즈의 답을 입력하고 정답 확인하기 버튼을 누르면 답이 나타나게 됩니다. 원본 소스 보기 1.HTML 코드 HTML에서 js를 동작하기위한 class이름과 input등을 적절히 사용하여 사용자가 알아보기쉽게 표현해야합니다. 코드 보기 정답입니다! 틀렸습니다! 정답 확인하기 2.CSS 코드 CSS는 앞서 마크업한 HTML 코드를 디자인및 js동작할때 태그에 추가할 class를 만듭니다. 코드 보기 :root { --black: #1c1419; } * { margin: 0; padding: 0; box-sizing: border-box; } *::before *::after { content: .. 2022. 8. 8. 이전 1 2 다음 728x90 반응형
