js41 애니메이션 - CSS Intro animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝.. 2022. 9. 7. 이펙트 응용하기 | 페럴럭스 이펙트 첫 번째 페럴럭스 이펙트 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. 요소 크기 위치 및 크기를 표현하는 속성 및 메서드 속성 및 메서드 설명 element.clientWidth 요소의 가로값(margin, border 미포함) element.clientHeight 요소의 세로값(margin, border 미포함) element.clientTop 요소의 Y축 값(부모 기준) element.clientLeft 요소의 X축 값(부모 기준) element.offsetWidth 요소의 가로값(border, padding 포함) element.offsetHeight 요소의 세로값(border, padding 포함) element.offsetTop 요소의 Y축 값(문서 기준) element.offsetLeft 요소의 X축 값(문서 기준) element.getBoundingClientRect().. 2022. 9. 1. 슬라이더 이펙트 두번째 - 좌우로 보여주기 이미지 좌우로 움직이기 이번 슬라이더 이펙트는 slider__inner 클래스 div 을 만들어서 img의 width * 갯수 로하여서 전체 width값을 잡아줍니다. 또한 상위 slider__img 를 이용해 overflow: hidden; 을 주어서 넘치는 영역을 안보이게합니다. js를 이용하여 sliderInner.style.transition = "all 0.6s" 을 주어서 애니메이션 효과를 넣고 setInterval 이용하여 slider__inner 의 위치를 img의 width 값에 맞게 변경해줍니다. 또한 Gasp 와 jquery 를이용하여 만들어봤으니 자세한 내용은 아래에있는 소스보기를 통하여 봐주시면되겠습니다. 원본 소스 보기 원본 사이트 보기 2022. 8. 29. 슬라이드 이펙트 첫번째 - 이미지 보여주기 슬라이더 이펙트 이번 슬라이더 이펙트는 img 파일의 스타일을 opacity 1 과 opacity 0 을 이용하여 하나씩 봅니다. 선택 자를 이용하여 slider__wrap, slider__img, slider 을 불러와 slider 의 마지막 이 올경우 다시 첫번째 이미지를 보여주게됩니다. 마지막으로 화면안에 소스보기를 통한 소스를 볼수있습니다. 원본 소스 보기 원본 사이트 보기 2022. 8. 29. 이전 1 2 3 4 5 6 7 다음 728x90 반응형
