본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

분류 전체보기176

#검색결과

총 176개를 찾았어요 ^^b

/

스크롤시 패럴렉스 효과의 2번째 예시를 구현해보자! 패럴렉스 이펙트_02 구현하기 스크롤을 내릴때 각 요소의 위치마다 번호에 show를 붙여 해당 속성의 스타일을 불어넣는 에제를 구현해보도록 하겠습니다! 동작원리 말로만 설명해드리면 이해가 어려울 수 있기에 하단의 사진을 통해 설명해드리겠습니다. HTML 작성 스크롤을 내릴때마다 선택되는 메뉴를 구현하기 위해 하단의 구조를 HTML에 추가시켜줍니다.. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 CSS 작성 간단한 CSS 를 통한 살을 붙여줍니다. /* parallax__nav */ #parallax__nav { position: fixed; right: 20px; top: 20px; z-index: 2000; background-color: rgba(0, 0, 0, 0.4); padd..
2022. 9. 8.
CSS 애니메이션 : 걸어가는 이미지 만들기! CSS 이미지 애니메이션 각각의 장면을 연속적으로 등장시켜 움직이는듯한 애니메이션을 줄 수 있습니다! CSS 하단의 CSS 백그라운드 포지션이 최대 본인이 적용하려는 이미지의 해상도에 맞게끔 설정해줍니다! .step { height: 700px; background: #7e7e7e; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(https://github.com/kimsangjunv1/coding/blob/main/animation/img/ani1.jpg?raw=true); border-radius: 0; position: absolute; left: 50%; top: 50%; transform: tr..
2022. 9. 8.
CSS 애니메이션 : 요소의 움직임! SVG로 도형 만들어보기 svg 태그안에 rect를 point로 수치를 조정해 도형을 구현해낼 수 있는데 한번 이번 시간에는 해당 부분에 대하여 학습해봅시다! animation 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝나고 난 뒤 어떤 값을 적..
2022. 9. 8.
svg를 이용해 애니메이션을 구현해보자! SVG ANIMATION svg에 애니메이션을 줄 수도 있습니다 해당 부분에 대하여 학습해봅시다! 기초적인 애니메이션 stroke-width 값을 조정하는 애니메이션을 만들어 기존에 만들어둔 벡터 도형(선)에 애니메이션을 불어넣습니다! HTML 하단의 HTML 코드를 입력하여 기초 뼈대를 잠아주고 대신 stroke-width값이 조절 가능한 애니메이션이 동작 할 수 있도록 stroke-width값을 각각 도형에 알맞게 넣어줍니다. CSS : KEYFRAMES CSS 작성시 stroke-width 값을 조절하는 애니메이션을 만들어 줍시다! .ani1 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; stroke: #880E41; stroke-wid..
2022. 9. 7.
728x90
반응형

#HASH_TAGS

-

1

다크모드 울적하니 꽃을 달아봤습니다 scroll-snap-align 오징어 두마리 포획 완료 scroll-snap-type 필터선택자 숙제가 다양해서 너무 좋아요 오징어 한마리 수확 완료! 제이쿼리 JQuery 테스트테스트 오늘도 웹표준은.. 오늘 조업 마감했습니다. 메서드 테스트 Method 멈추지 않는 ' j ' 시리-즈 오징어 1Kg 당 3000원 슬라이드 결과 : 월요일 공부 오늘은 내가바로 오징어! 코딩 선택해주세요 화사한가요? 코드 이건 또 뭐람 ImageSlideEffect 내일은 즐거운 월요일 HTML

티스토리툴바