http://trend21c.com/archives/scroll.html 텍스트 스크롤 trend21c.com 참고(밑 참조) 사이트 분의 데모 1위 2위 3위 4위 5위 6위 7위 8위 9위 10위 출처: https://trend21c.tistory.com/327 [나를 찾는 아이:티스토리]

var targetElement = document.querySelector('.p_Category'); // 이벤트 리스너를 등록하여 스크롤 감지 window.addEventListener('scroll', function() { // 특정 요소의 위치와 크기를 가져옵니다. var rect = targetElement.getBoundingClientRect(); if (rect.top = 0) { targetElement.classList.remove('on'); } else { targetElement.classList.add('on'); } });

부모 내에서 자식을 우측 정렬 하고 싶을 때 자식 {display:flex; margin-left:auto}

보호되어 있는 글입니다.

스크롤 하다가 원하는 요소가 화면에 출력되면 trnasform해서 x좌표 이동 드래그로도 transform x 이동 가능 html css .image-container{ display: flex; flex-direction: row; /* 이미지를 가로로 배치 */ width: 150%; /* 이미지 컨테이너의 가로 크기를 이미지 두 개의 너비로 설정 */ transition: transform 0.5s ease-in-out; } .land_ti_wrap .left_box .image-container .img_box { flex: 1; /* 각 이미지 박스가 동일한 너비를 가지도록 설정 */ padding: 0; margin-top: 0; } script let isMouseDown = false; l..

transform으로 밑으로 보냄, opacity로 덜 지저분하게 함 .fade-in-element{border: 1px solid #E4E4E4; position: relative; opacity: 0; transform: translateY(100px); transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;} 같은 클래스 명 2개가 같이 동시에 올라와야 하는 상황 document.addEventListener("DOMContentLoaded", function() { // Get the elements you want to fade in var fadeElements = document.querySelectorAll('.fade-in-e..