document.addEventListener('DOMContentLoaded', function () { var loopSection = document.querySelector('.해당섹션'); function handleScroll() { var rect = loopSection.getBoundingClientRect(); var isOnScreen = rect.top = 0; if (isOnScreen) { loopSection.classList.add('active'); } else { loopSection.classList.remove('active'); } } window.addEventListener('scroll', handleScroll); handleScroll(); // Check ..

swiper slide에서 slidesPerView랑 loop 같이 썼는데 loop가 작동 안하는 이유 slidesPerView : 4, 이런식으로 쓰면 class swiper-slide의 갯수를 slidesPerView의 배수로 맞춰줘야한다 (4, 8, 12 ...)

{ const sections = [ { class: ".onewrap", start: 300 }, { class: ".twowrap", start: 1000 }, { class: ".threewrap", start: 1600 }, { class: ".fourwrap", start: 2200 }, { class: ".fivewrap", start: 2800 }, { class: ".sixwrap", start: 3400 } ]; sections.forEach((section, index) => { gsap.to(`.alv-three-hori-wrap${section.class}`, { scrollTrigger: { trigger: ".alv-nine-div-section", markers: false, ..

import * as THREE from "./three.module.js"; import { OrbitControls } from './three/examples/jsm/controls/OrbitControls.js'; export default function example() { // Create a scene, camera, and renderer const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(win..

1. cdn 가져오는 법 https://greensock.com/docs/v3/Installation (1) 제일 상단 메뉴 docs > installation 섹션에 들어간다 (2) 필요한 효과를 체크 한 후 Browser code부분에 있는 script 코드를 헤더부분에 붙여넣는다. https://cdnjs.com/libraries/gsap gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers GSAP is a JavaScript library for building high-performance animations that work in **every** major brows..

window.onload = function() { setTimeout(function() { window.scrollTo(0, 0); }, 0); }; 페이지가 완전히 로드된 후 스크롤을 최상단으로 이동시키는 코드

1. camera.position.set(x, y, z) 2. camera.rotation.set(z, y, x) 카메라 position / rotation의 set값에 들어가는 값이 각각 다르다 camera.position.set은 x (좌우) y (상하) z (앞뒤) 값이지만 camera.rotation.set은 z (yaw / heading) : z축을 기준으로 좌우방향으로의 회전 y (pitch / attitude) : y축을 기준으로 상하방향으로 회전 x (roll / bank) : x축을 기준으로 차체나 물체의 좌우기울임, roll각은 비행기 날개가 좌우로 기울어지는 동작 tip : camera.rotation 값을 숫자로 / x, y, z 순서대로 적고싶을 때 var euler = new T..

먼저, HTML의 body 태그에 스크롤 이벤트 리스너를 추가합니다: 그리고 JavaScript에서 checkScrollPosition 함수를 다음과 같이 정의합니다: function checkScrollPosition() { // 문서의 높이와 창의 스크롤 위치를 계산 const totalHeight = document.body.scrollHeight; const scrollPosition = window.scrollY + window.innerHeight; // 스크롤이 끝까지 내려갔는지 확인 if (scrollPosition >= totalHeight) { // 스크롤 위치를 처음으로 되돌림 window.scrollTo(0, 0); } }

let/const/var 설명 재할당 여부 재선언 여부 범위 let 값이 변하는 변수 O X 블록 레벨 스코프 const 값이 변하지 않는 상수 X X 블록 레벨 스코프 var 값이 변하는 변수 O O 함수 레벨 스코프 블록 스코프를 활용해서 코드를 짜는게 권장된다. 전역 범위 되도록X const는 선언과 동시에 초기값을 가지고 있어야 한다. 재할당/재선언 재선언 var box1 = document.getElementsByClass(’box’); 재할당 box1 = document.getElementsByClass(’box’);

초기화 되는 이유 : gsap타임라인을 사용하지 않고 여러개의 독립적인 애니메이션을 연속적으로 실행하려면, 각 애니메이션의 시작 값이 이전 애니메이션의 종료 값과 일치해야한다. 그렇지 않으면 애니메이션 간에 불연속성이 발생한다. 해결하는 방법 GSAP 타임라인 사용: 타임라인을 사용하면 여러 애니메이션을 서로 연결할 수 있으며, 각 애니메이션의 시작과 종료를 정확히 제어할 수 있습니다. 이로 인해 간단하게 순차적인 애니메이션을 구현할 수 있습니다. 위치와 회전 값 저장: 애니메이션의 종료 시점에서 위치와 회전 값을 저장하고, 다음 애니메이션의 시작 값으로 사용할 수 있습니다. 이렇게 하려면 애니메이션의 종료 시점을 감지하고 해당 값을 수동으로 설정해야 할 수도 있습니다. 콜백 함수 사용: GSAP에서는 ..

dom트리 : 웹 문서 안에 있는 요소들간의 부모 자식 관계를 계층구조로 나타낸 것 각각의 요소들을 node라고함 요소노드의 속성노드는 자식노드이다 getElementById() getElementsByClassName() > 반환 값이 2개 이상일 수 있음 getElementsByTagName() > 반환 값이 2개 이상일 수 있음 querySelector(”#ID”) / querySelector(”.ClassName”) / querySelector(”p”) .addEventListener(’동작’,함수(이벤트 타겟)); queryselector(선택자) 한 개의 값을 반환함 / 반환 값이 여러 개일 경우 제일 처음 요소를 선택함(ex.class) queryselectorAll(선택자 또는 태그) 반환..

cos, sin함수를 사용해서 x, z 좌표를 설정하는 이유 card.position.x = 1 * Math.cos(angle); card.position.z = 1 * Math.sin(angle); 원의 중심을 기준으로 일정 각도만큼 거리가 떨어져 있기 때문이다. 각도가 중요하지 않고 거리만 사용할거면 그냥 상수 써도 되는데 45도씩 증가 + 이동하면서 카드가 배치되어 있기 때문에 cos, sin 함수를 이용한다 card.position.y = 1 * Math.tan(angle); position y값을 설정할 때에는 tan를 사용한다 오답노트 이번 모델링에게 각도를 부여했는데 원하는대로 되지 않았음. 카드가 모두 앞면을 바라보게 설정되어있었는데, 시계바늘처럼 배치하고 싶은 경우 각각의 카드에 다른 값..