본문 바로가기

웹 개발 공부 컨텐츠134

다수 원 회전 애니메이션 다수 원 회전 애니메이션 CSS를 사용해 다수의 원을 회전시키는 간단한 애니메이션 효과 입니다. See the Pen 올챙이 by mbynae (@mbynae) on CodePen. 이번 애니메이션은 여러개의 원이 8자 형태로 계속 움직이는 애니메이션 효과입니다. 5개의 원이 회전하는데 각각 크기와 투명도를 다르게 하고 애니메이션에 딜레이를 주어 하나의 원이 잔상효과를 갖는 느낌으로 움직이도록 했습니다. ※ 애니메이션 딜레이 animation-delay : 애니메이션의 움직임에 주어진 지연 시간을 가지고 움직이도록 합니다. 2022. 9. 26.
패럴랙스 이펙트 04 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 04 - 나타나기 스크롤 바를 내릴 때 마다 컨텐츠에 애니메이션이 발동하는 효과합니다. 1. HTML 및 CSS 파트 HTML은 이전과 같지만 CSS에 텍스트와 이미지가 움직이는 효과가 추가됩니다. 소스보기 -HTML 파트- 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛을 모른다. 06 section6 폼은 일시적이지만, 클래스는 영원하다.. 2022. 9. 26.
패럴랙스 이펙트 03 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 03 - 숨김 메뉴 스크롤 위치에 따라 메뉴 바 등 숨겨진 창이 등장하는 효과입니다. 1. 메뉴 바 및 탑 버튼 만들기 스크롤에 따라 나오게 될 메뉴 바와 탑 버튼 제작입니다. 기본적인 구성은 이전 패럴랙스 이펙트 효과와 같고 탑 버튼이 추가되었습니다. 소스보기 -HTML 파트- 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 Top 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 section2 피할수 없으면 즐겨라. 03 section3 1퍼센트의 가능성, 그것이 나의 길이다. 04 section4 꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다. 05 section5 .. 2022. 9. 24.
슬라이드 이펙트 04 슬라이드 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이드 이펙트 04 - 이미지 슬라이드 버튼 이미지 내에 있는 버튼을 클릭 시 이미지가 좌/우로 이동하는 슬라이드 효과입니다. 1. 좌/우 버튼 만들기 클릭 시 이미자가 좌/우로 이동할 수 있도록 좌측과 우측에 각각 버튼을 만들어 줍니다. 기본적인 코드는 슬라이드 이펙트 03와 같으며 버튼이 추가되었습니다. 소스보기 -HTML 파트- prev next -슬라이드 버튼 CSS- .slider__btn a { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(0,0,0,0.4); text-align: cen.. 2022. 9. 24.
슬라이드 이펙트 03 슬라이더 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이더 이펙트 - 로테이션 효과 02 위치가 리셋되지 않고 일정 시간 간격으로 이미지를 자동으로 바꿔 출력해주는 효과입니다. 슬라이더 이펙트 02와 기본적인 효과는 같지만 마지막 사진 이후 로테이션이 될때 오른쪽 처음으로 돌아가지 않고 계속 좌측으로 로테이션이 되도록 하는 효과입니다. ▶ CSS 파트 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; hei.. 2022. 9. 24.
마우스 이펙트 효과 04 마우스 이펙트 자바스크립트를 이용한 마우스 효과 만들기 입니다. 마우스 이펙트 04 - 이미지 효과 마우스가 이미지 안에서 움직일 때 이미지가 살짝 커지며 이동하는 효과입니다. 1. 이미지 세팅 가운데에 이미지를 하나 넣고 마우스 커서가 될 원 하나를 만드는 간단한 작업입니다. 소스보기 ▶ CSS 파트 /* mouseType */ #mouseType {} .mouse__cursor {} .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; overflow: hidden; } .mouse__wrap figure.. 2022. 9. 23.
마우스 이펙트 03 마우스 이펙트 자바스크립트를 이용한 마우스 효과 만들기 입니다. 마우스 이펙트 03 - 조명 효과 원 모양의 커서 안에 숨겨진 뒷 배경이 보이는 효과 입니다. 1. 원 만들기 우선 커서가 될 큰 원 하나를 만듭니다. 원을 만들 때 원 안에 배경이 들어가 있어야 합니다. html 파트는 마우스 이펙트 01을 그대로 사용합니다. 소스보기 //CSS /* mouseType */ #mouseType {} .mouse__cursor {} .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; overflow: hidde.. 2022. 9. 22.
마우스 이펙트 02 마우스 이펙트 자바스크립트를 이용한 마우스 효과 만들기 입니다. 마우스 이펙트 02 - 마우스 따라다니기(GSAP) 이번 효과는 마우스 이펙트 01과 같지만 스크립트를 GSAP로 만드는 작업입니다. GSAP GSAP는 GrennSock에서 개발한 애니메이션 효과를 쉽게 사용할 수 있도록 제공하는 타임라인 기반의 애니메이션 자바스크립트 라이브러리로 애니메이션 스크립트를 보다 쉽게 사용할 수 있도록 해줍니다. 또한 GSAP를 사용하면 자바스크립트로 구현할 때 보다 좀 더 애니메이션 효과가 부드러워지는 느낌이 납니다. GSAP 설치에 대한 설명은 이쪽을 참조해 주세요. 소스보기 const cursor = document.querySelector(".mouse__cursor"); const cursor2 = d.. 2022. 9. 22.
패럴랙스 이펙트 05 페럴랙스 이펙트 자바스크립트를 이용한 페럴랙스 효과 만들기 입니다. 페럴랙스 이펙트 05 - 이질감 효과 스크롤바 위치에 따라 텍스트와 이미지 등이 서로 다르게 움직여 이질감이 느껴지게 하는 효과입니다. ▶ 코드 이질감 효과는 스크롤 좌표값에 오프셋 좌표값을 뺀 값에 약간의 조정을 한 값을 각 컨텐츠에 적용합니다. 스크롤 좌표값과 오프셋 좌표값은 화면에 보이는 좌표값이기 때문에 거의 같아 빼면 0에 가깝게 되지만 오차가 항상 발생해 0이 되진 않습니다. //CSS 코드 #parallax__nav { position: fixed; right: 20px; top: 20px; z-index: 2000; background-color: rgba(0,0,0,0.4); padding: 20px 30px; borde.. 2022. 9. 21.
콜백 함수 콜백 함수 다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수입니다. (첫번째가 다 끝난 후 2번째가 실행되도록 하는 함수 로딩 소스가 다 끝나고 메인 소스가 나오도록 하는 그런 기능) : 첫번째 함수가 실행 -> 두번째 함수가 실행 기본 형태 콜백 함수는 그 자체로 특별한 선언이나 문법적 특징을 가지고 있진 않지만, 특정 이벤트가 발생할 때 호출할 수 있어 다양하게 많이 사용됩니다. 기본 형태 function func(); fuction callback(str){ str(); } callback(func); { function func(){ document.write("함수가 실행되었습니다.1"); } function callback(str){ //인자값을 마치 함수인거처럼 실행문으로 사.. 2022. 9. 20.
재귀 함수 재귀 함수 함수가 직접 또는 간접적으로 자신을 호출하는 함수입니다. 재귀함수란? 함수가 직접 또는 간접적으로 자신을 호출하는 프로세스를 재귀함수하며, 함수 안에 자신의 함수를 넣어 불러옵니다. 재귀함수는 종료 지점을 설정하지 않고 그냥 함수만 넣게되면 무한으로 실행되어 스택오버플로우가 발생할 수 있습니다. 기본 형태 function func(){ func(); } func(); { //반복적으로 function func(num){ //num : 인자 혹은 파라미터 if(num 2022. 9. 20.
비구조화 할당 / 객체구조분해 할당 비구조화 할당 비구조화할당이란 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식입니다. ▶ 문법 const {키1, 키2, 키3} = {값1, 값2, 값3}; = 변수 { const obj = { a: 100, b: 200, c: "javascript" } const {a, b, c} = obj; document.write(a); document.write(b); document.write(c); } 결과보기 객체구조분해할당 구조 분해 할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식입니다. ▶ 문법 const {키1: 변수1, 키2: 변수2, 키3: 변수3} = {값1, 값2, 값3}; = 변수 { con.. 2022. 9. 20.

광고 준비중입니다.