라이브러리

swiper는 슬라이드 라이브러리로 웹 페이지 내의 요소를 슬라이드 할 수 있는 기능을 추가할 수 있습니다. 아래 예시처럼, 화살표 버튼을 누르면 다음 슬라이드로 이동하거나 자동으로 슬라이드가 넘어가게 할 수도 있는 것이다.다양한 메소드와 설정을 지원해서 사용하기 매우

GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다.일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다.하지만!! 사용자

어떤 애니메이션 효과를 만들지 만큼 중요한 것이언제 효과를 보여줄 것인가이다.내 화면은 사이트 헤더 쪽에 있는데 푸터 쪽에서 애니메이션이 실행되는 사태를 막아야 한다. 그렇기 때문에 ScrollTrigger가 중요하다.공식 사이트 혹은 CDN 혹은 npm 등 편한 방법

프로젝트 작업중 이미지들이 위의 핀터레스트 이미지들 처럼 배열을 하고 싶어져 css로 고군부트를 했는데...masonry라는 간단한 라이브러리를 알게되어 정리를 하려고 한다.아래의 링크로 들어가 js를 복붙하여 사용한다.🔗 masonry.js 링크width의 고정법

웹사이트 스크롤을 할 때 마우스 휠에 따라 살짝 살짝 끊기는 형태를 많이 보았을 것이다.이런 부분이 없이 스무스~하게 스크롤이 되도록 하는 라이브러리를 찾아 기록해두려 한다.위의 이미지와 같이 일반적인 스크롤 할 때의 모습은 이러하다.lenis 라이브러리를 사용한다면

요즈음 사이트에서 많이 볼 수 있는 스크롤(wheel)시에섹션별로 페이지가 넘어가도록 하는 기능을 정리해보려고 합니다. 지금은 그냥 영역을 나누기만 해서 간단하지만 나중에 포트폴리오를 작성할 때는<div> 태그 안에다가 원하는 내용을 작성! (css는 생략)우리가

lozad.js는 이미지 지연 로딩에 특화된 Intersection API 구현 사례라고 할 수 있다.복잡한 설정 필요 없이 이미지 태그에 라이브러리가 요구하는 속성을 추가한 후옵저버 인스턴스를 생성하면 이미지 지연 로딩이 간단히 구현된다.이것이 전부다. lozad.j

기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우, AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있다. AOS 라이브러리는 자바스크립트를 깊게 몰라도 쉽게 사용할 수 있다는 장점이 있다.시간 투자 대비 가성비는 모든 스크롤 애니메이션 라이

## 카메라 셋팅 카메라의 경우 기본적으로 PerspectiveCamera를 사용하는데 [three.js 카메라 문서](https://threejs.org/docs/?q=cam#api/ko/cameras/PerspectiveCamera)를 보면 이해하기 편하다! ![

3D로 움직이는 웹사이트에 관심이 생겼고, 그것이 바로 thress.js라는 라이브러리로 사용이 가능하다고 알게되어, 바로 온라인 강의를 신청하였다. three.js에서는 스크립트를 불러올 때 모듈방식으로 많이 불러온다고 한다. (물론 일반 자바스크립트에서도 유용)많은

geometry(기하학)라는 변수에 BoxGeometry를 활용하여 (1,1,1)예를 들어 1m,1m,1m인 박스 형태를 구현한다.material(재질)라는 변수에 MeshBasicMaterial를 활용하여 색상을 넣어주는데color의 경우에는 0xf00000 라고도

자바스크립트로 웹 프로그래밍을 하다 보면 자주 Alert 함수를 사용하게 됩니다.Alert는 사용자에게 알림을 주고자 할 때 정말 자구 사용하는 컴포넌트 입니다.다음과 같이 자바스크립트의 alert는 아주 기본적인 브라우저 UI를 제공하고 있습니다.하지만 우리는 이런

예제 코드를 통해 Three.js의 기본 구조를 파악해 봅시다. 크게 네 가지 순서로 작성합니다.scene(3D 공간)을 생성합니다.더 설정해 준다면 여러 scene을 생성할 수 있고, 배경색 등 여러 조건을 설정할 수 있습니다. 사실 Object는 particles

<canvas>는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 <img> 요소처럼 보입니다. 실제로 <canvas> 요소에는 width와 height의 두 속성만 있습니다. 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여 설정할 수도 있

브라우저 창 사이즈 변경에 대응 해당 코드는 ⭐️ 구역만 수정된 부분으로 해당 구역만 집중해서 보면 된다! 1. 리사이징 ⭐️ 이벤트 ⭐️ 우선적으로 addEventListener로 리사이징 이벤트가 진행될 때 함수가 실행되도록 설정한다! ⭐️ 리사이징 함수 ⭐️

해당 코드는 ⭐️ 구역만 수정된 부분으로 해당 구역만 집중해서 보면 된다!setClearAlpha는 renderer의 투명도를 설정할 수 있다.setClearAlpha(0)은 투명 정도가 0을 뜻하고setClearAlpha(1)은 투명 정도가 100을 뜻한다.setCl

작업하기에 앞서 카메라의 위치값에서 x,y를 주석처리 해준다. (이렇게 되면 정육면체의 정면 모습만 보이는 형태가 나타남)그 후 애니메이션을 페인팅 해주는 draw 함수를 생성한다!draw 함수에 기존에 셋팅해두었던 renderer.render(scene,camera)

6번과 같이 애니메이션을 작동할 때 성능부분에서 문제가 있을 수 있다!각각 사용자마다 다른 기기로 열어보게 되는데 그 기기마다 성능차이가 있을 수 있기 때문에좋은 컴퓨터에서는 모르지만 좋지 않은 컴퓨터에서는 버벅임이 있을 수 있다!그 부분을 잡는 방법 2가지가 있는데

작업에 시작하기에 앞서 fog(안개)를 뜻하는 건 정말 뿌연 연기자체를 만드는 것이 아닌원근감 효과를 주기 위해 멀리 떨어져 있는 mesh가 안개가 낀것처럼 뿌옇게 보이는 효과를 의미한다!해당 코드는 ⭐️ 구역만 수정된 부분으로 해당 구역만 집중해서 보면 된다!작업하기

three.js에서 transform 기능에 대해서 더 심도있는 코드를 정리해보려고 한다!기존에 mesh의 position 값을 변동하기 위해서 mesh.position.y = 2;와 같이 진행했었는데,set을 활용하면 더욱 간단하게 위치값을 변동할 수 있다. 코드를

일단 작업 시작 전에 간단하게 편리한 기능을 셋팅해두려고 한다. three.js답게 드래그할 때 움직이거나 휠을 돌렸을 때 줌, 아웃이 되도록 하는 기능인데해당과 같이 npm이나 webpack을 사용할 때는 import로 ⭐️ 부분을 추가해 넣어주면 된다. 아니라면

three.js에는 작업하기 용이하게 해주는 여러 유틸리티가 있는데 그 걸 셋팅하는 방법을 정리하려고 한다!작업하기에 앞서 조명을 추가로 작업해주려 한다.기존에 셋팅했던 DirectionalLight는 태양광 처럼 위에서 아래로 떨어지는 직접적인 조명인데AmbientL