Mong dev blog

개발 기술/css 애니메이션 (with js)24

[Effect] 메뉴 버튼 center 효과
😊 이번 시간에는 메뉴에서 활성화된 버튼을 중앙에 배치하는 효과를 만들어보았다! 1. 미리보기 See the Pen button center efffect by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html html을 보면 전체를 감싸는 .container와 .list가 여러 개의 .btn을 감싸는 구조이다. You cliked "? " apple pineapple orange pear banana tomato orange pear 2) CSS(SCSS) (1) body에 기본 스타일 지정하기 body 내부 요소들이 수직, 수평 중앙 정렬이 되도록 flex를 사용한다. body { height: 100vh; /* 수직중앙을 위해 높이 설정 필수 */ di..
2022. 5. 22.
종이 글자 애니메이션 (with. clip-path)
1. 미리보기 See the Pen text paper animation by KumJungMin (@kumjungmin) on CodePen. 2. html A. 구조 구조는 사진과 같이 frame안에 h1태그(text)가 포함된 간단한 구조이다. SKYBLUE B. 데이터 속성 사용하기 우리는 before, after(가상 클래스)로 글자(SKYBLUE)를 만들고 효과를 줄 것이다. 하나의 방법으로 before에 content를 사용해서 글자를 지정할 수 있다. /*ex*/ &::before { content: 'SKYBLUE'; /*this!*/ } 그런데, 이 글자를 html단에서 작성하여 바로 이용할 순 없을까? 있다! html에서는 데이터 속성을 만들 수 있는데, 이 데이터를 j..
2021. 10. 22.
버튼 커서 애니메이션 (with. js)
이번 시간에는 버튼 hover시 커서를 따라 그라데이션이 나타나도록 해보았다. 1. 미리보기 See the Pen button-gradient by KumJungMin (@kumjungmin) on CodePen. 2. 코드 보기 1) html Button html 구조는 간단한다! 버튼(btn-gradient)을 추가하고, span(title)을 이용해 글자를 넣는다. 2) scss (1) (1) 글자에 스타일 설정하기 (a) 구글 폰트에서 원하는 폰트를 import하고 title에 적용한다. (b) pointer-events: none을 설정하여, 글자에 pointer 이벤트를 비활성화시킨다. @import url('https://fonts.googleapis.com/css2?family=Pa..
2021. 10. 20.
svg로 gooey animation 만들기
잠깐! 혹시 svg로 gooey 애니메이션 만들자(1)을 보시지 않으셨나요? (1)편에서 소개하는 svg로 효과를 만드는 법을 알아야 아래 내용을 이해하기 쉽습니다! 1. 미리보기 See the Pen gooey-menu-1 by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html (1) 기본 구조 html 구조는 아래 사진과 같다. 전체를 감싸는 wrap안에 1개의 button과 4개의 menu가 존재한다. 각각의 menu에는 icon이 포함되어 있다. ... (2) svg 필터 효과 만들기 1편에서 얘기했듯이 svg를 사용하여 그래픽 효과를 만들 수 있다. 이번에 만들 효과는 사진처럼 menu가 서로 들러붙은 것처럼 보이게 하는 gooey 효과이다. 먼저 ..
2021. 10. 18.
wave 애니메이션(with. text-decoration)
이번시간에는 text-decoration-line, text-decoration-color, overflow을 이용하여 간단하게 물결 애니메이션을 만들어본다. 1. 미리보기 See the Pen wave line animation by KumJungMin (@kumjungmin) on CodePen. 2. 코드 보기 1) html html 구조는 간단하다. 글자를 담을 wave 클래스 요소 하나만 생성하면 된다. 2) css (1) 기본 스타일 지정 기본적으로 html에는 margin, padding값이 부여되어 있다. 만약 margin, padding 기본값을 사용하고 싶지 않다면 0으로 지정해주면 된다. * { margin: 0; padding: 0; ... } box-sizing은 박스의 크기를 무..
2021. 10. 15.
스크롤은 부드럽게, 글자에는 이미지를 넣어보자!
이번 시간에는 scroll-behavior로 부드러운 스크롤을 만들고, background-clip으로 글자에 이미지를 넣어보자! 1. 미리보기 See the Pen scroll-behavior by KumJungMin (@kumjungmin) on CodePen.
2021. 10. 13.
글자가 그려지는 애니메이션(with, stroke-dashoffset)
이번 시간에는 stroke-dashoffset, stroke-dasharray를 사용해, svg의 text 애니메이션을 만들어본다. 1. 미리보기 See the Pen alpha-svg by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html (1) 전체 구조 content는 svg의 부모로, svg를 수직 중앙 정렬시킨다. svg 내부에서는 여러 text태그가 존재하며 글자 각각을 의미한다. (2) 전체 코드 위 그림을 코드로 보면 아래와 같다. 만약 svg태그에 대해 궁금하면 바로 (3)을 읽어보는 걸 추천 :) S V G T E S T (3) svg태그란? html에서 사용된 svg에 대해 간단히 알아보자 우리가 image로 주로 사용하는 png, jpg..
2021. 10. 11.
잔상 애니메이션을 만들어보자! (with, animation-delay)
이번 시간에는 animation-delay을 이용해, 움직이는 이미지에 잔상을 남기는 애니메이션을 만들어보았다. 1. preview See the Pen airplane playing by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html cloud는 배경으로 사용될 구름 이미지이며, 총 2개를 준비한다.(2개인 이유는 scss에서 알 수 있음) shadow-box는 비행기의 잔상, 그러니까 그림자를 담기 위한 공간이다. shadow-box에 class="shadow"인 img를 추가할 건데, 이건 js로 추가할 예정이다. airplane는 메인 이미지인 비행기이다 ✈️ 2) js 앞서 html파트에서 말했듯이, shadow-box에 자식으로 이미지 태그를 ..
2021. 10. 10.
물결치는 애니메이션을 만들어보자! (with, rotate)
이번 시간에는 물결치는 애니메이션을 만들어봅시다! 1. preview See the Pen wave_alphacon_2 by KumJungMin (@kumjungmin) on CodePen. 2. 코드 분석 1) html wrap는 wave의 부모로, 배경 역할을 한다. wave들은 물결 역할을 한다. 총 2개의 wave를 겹쳐서 사용한다. 2) scss (1) 기본 속성 부여하기 A. wrap 클래스에 기본 스타일 주기 .wrap { width: 300px; /*[1]*/ height: 300px; /*[1]*/ position: relative; /*[2]*/ border-radius : 50%; /*[3]*/ background: ...; ... } [1] 부모역할을 하는 wrap 클래스에 높이 넓..
2021. 10. 9.

티스토리툴바