HTML29 사이트유형 - 배너유형2 배너 유형2 이번 배너유형은 position을 이용해 이미지 파일의 구간을 설정했습니다. 1.HTML 코드 코드 보기 배너 영역 오늘은 좋아! 오늘날씨는 너무 좋아요! 제블로그!. 구독과 좋아요! 부탁드립니다. 바로가기 2.CSS 코드 코드 보기 /* fonts */ @import url("https://webfontworld.github.io/gmarket/GmarketSans.css"); .gmark { font-family: "GmarketSans"; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, .. 2022. 9. 29. 이펙트 응용편 - 페럴럭스 육번째 페럴럭스 이펙트6 이번 페럴럭스 이펙트는 사이드 메뉴의 버튼을 클릭하면 해당하는 섹션으로 이동하며, 해당하는 섹션의 위치에 도달하면 버튼의 모양이 바뀜니다. js 코드 설명 글자 하나하나마다 효과를주기위해서 split를 이용하여 자르고 join을 이용하여 span 태그를 주었습니다. 스크롤시 해당하는 위치값이 되면 애니메이션 효과를주기위해 item.querySelector(`.split span:nth-child(${index + 1})`).style.transitionDelay = `${index * 100}ms`; 이용했습니다. //글씨 나누기 document.querySelectorAll(".split").forEach((text) => { let splitText = text.innerText; .. 2022. 9. 29. Animation - 움직이는 사진 애니메이션 만들기 애니메이션 : 움직이는 사진 움직이는 사진을 만들어 봅시다. @font-face { font-family: 'LocusSangsang'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.woff2') forma.. 2022. 9. 20. 이펙트 응용편 - 페럴럭스 오번째 페럴럭스 이펙트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. 사이트유형 - 완성본 사이트 유형 완성본 원본 소스 보기 원본 사이트 보기 이번 사이트 유형은 css를 따로 나누어서 썻습니다. 따라서 소스보기를 통해 보시면 감사합니다. 사이트 유형 반응형 목업 원본 소스 보기 원본 사이트 보기 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. 이전 1 2 3 4 5 다음 728x90 반응형
