'분류 전체보기' 카테고리의 글 목록 (7 Page)

본문 바로가기

[D+50] canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기 국비지원 D+50 - canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기 - canvas를 사용해 스크롤에 반응하는 이미지 애니메이션 적용하기 canvas를 사용해서 스크롤에 따라서 이미지가 움직이는 효과를 적용해 보려고 한다. 일단 3가지 단계별로 순차적으로 진행해 보도록 하자. 0 > 이미지 파일 준비하기 1 > html에 canvas 태그 추가 2 > canvas 태그에 대한 CSS 설정 3 > canvas 컨트롤 기능들을 추가 0 > 이미지 파일 준비하기 나는 스크롤을 할때마다 사과가 돌아가는 것같은 효과를 보이기위해 동영상을 프레임별로 쪼개서 이미지로 저장해 image폴더안에 넣어주었다. 1 > html에 canvas 태그 추가 먼저 body안에 canvas태그를 넣어주었으며 id.. 2022. 12. 1.

[D+49] Front-end 미니프로젝트 5일차 : 스크롤 애니메이션 구체화 국비지원 D+49 Front-end 미니프로젝트 5일차 - 스크롤 애니메이션 구체화 - 오늘 한 일 - section0에 대한 스크롤 애니메이션 추가(구체화) 및 테스트 파일 구성 및 내용 • index.html - 메시지 4개의 스크롤 애니메이션을 동작시키기 위해 주석을 해제해 주었다. Real Apple Pro 온전히 빠져들게 하는 빛깔 나의 건강을 채워주는 향기 깨끗한 자연의 신선함 새롭게 입가를 찾아온 매혹 • main.js - 스크롤이벤트를 좀더 구체화하기 위해서 기존 함수를 좀 더 구체화 해주었다. (() => { let yOffset = 0; // 스크롤 위치값 let currentSection = 0; // 현재 섹션 번호 // 필요한 이유 - yOffset이라는값을 가지고 각 섹션에 대한.. 2022. 11. 30.

[D+49] 이미지, 캔버스 국비지원 D+49 - 이미지, 캔버스 - 이미지 우리가 HTML, CSS, javaScript를 사용해서 이미지를 넣어준다고 생각했을 때 기존에 우리가 text-animation을 넣는다고 단순하게 생각하면 안된다. 예를들면, 내가 3개의 section중에서 0번째 섹션창에 이미지를 넣는다고 설정해보자. 이때 화면의 해상도나 내가 설정한 윈도우 창의 크기에 따라서 section0의 크기는 변하게 될 것이고, 이에 따라서 내가 넣은 이미지의 크기와 동작 범위도 변화해야 한다. 그렇기 때문에 이미지를 넣을때, 절대적인 값을 넣어주는 것이 아니라 상대값을 넣어서 window창의 크기에 따라서 이미지 크기나 애니메이션 실행범위가 설정되도록 해주어야 한다는 것을 명심해야 한다. • 이미지 압축 이미지는 작은 픽셀.. 2022. 11. 30.

[D+48] Front-end 미니프로젝트 4일차 : 스크롤 애니메이션 추가 국비지원 D+48 Front-end 미니프로젝트 4일차 - 스크롤 애니메이션 추가 - 오늘 한 일 - 스크롤위치에 따라 현재섹션 위치와 섹션위치에 따른 Y의 상대값을 구하도록 설정 - section0에 대한 스크롤 애니메이션 추가 및 테스트 파일 구성 및 내용 • style.css - 스크롤 애니메이션에서 나타났다 사라졌다를 위해서 초기에 불투명도를 0으로 설정해주었다. .section0-message { opacity: 0;/* 불투명도 : 0 */ font-size: 4.5rem; font-weight: bold; width: 100%; height: 6rem; left: 0; top: 5em; text-align: center; } • index.html - 각메시지마다 이벤트를 걸어주기 위해서 클.. 2022. 11. 28.

[D+48] Animation 복습 국비지원 D+48 - Animation 복습 - Animation 복습 • 애니메이션 기능 구현 - 지속적으로 CSS갑승ㄹ 바꾸어 적용하는 기법 ex) 지속적으로 opacity 값을 바꿈 → fade-in, fade-out 점점나타남 : fade-out 점점사라짐 : fade-in • 애니메이션의 구현 - CSS의 값의 범위 : 시작값, 종료값 ex) 0, 0.1, 0.2, ~, 1.0 - 기준값의 범위 : 시간, 스크롤값 * CSS값과 기준값은 독립적이기 때문에 기준값을 그대로 CSS값으로 적용할 수는 없다. * 기준값에 따라 CSS값을 적용하기 위해 기준값의 "비율"을 구한 뒤 그 비율에 따라 CSS값을 반영한다. rate = value / totalvalue = 현재값 / 기준 CSS값 = ((va.. 2022. 11. 28.

[D+47] CSS Animation 개념 국비지원 D+47 - CSS Animation 개념 - CSS Animation 개념 • Animation이란? - CSS에서의 애니메이션은 어떤 값을 연속적으로 바꾸는 것을 의미하며, 정해진 범위 내에서 얼마만큼 값이 적용되는지를 나타낸다. - 이때, 애니메이션을 적용할때에는 범위가 필요하는데 범위값을 절대값으로 설정했을 경우에 해상도가 다른 곳에서 애니메이션을 동작했을 때 다른 결과값이 나올 수 있기 때문에 비율로 계산해서 애니메이션을 적용해야 한다. • Animation 구하기 - STEP01 ) 비율을 구하기 비율(rate) = 현재값(value) / 기준(totalValue) 특정영역에 대한 절대값을 구하게 되면 다른 해상도를 가진 모니터에서는 다른 결과값을 가질 수 있기 때문에 우리는 화면에 .. 2022. 11. 28.

이전 1 ··· 4 5 6 7 8 9 10 ··· 101 다음

티스토리툴바