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'); } });

스크롤 하다가 원하는 요소가 화면에 출력되면 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..

marguee.js를 사용해서 흐르는 느낌의 슬라이드를 만들어보기 [cdn 사용] [html] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque cumque ratione provident nulla veniam nihil quaerat, illum officiis hic. Laborum in eos possimus, quo ullam nobis nam nemo fuga ipsam? [css] .marquee-wrap { width: 100%;/*본인 마음대로 조정*/ height: 130px !important; /*본인 마음대로 조정*/ overflow: hidden; /*무조건*/ } [js] $(document).ready(funct..

https://eunyoe.tistory.com/79 [jQuery] display 여부에 따른 조건문(if else) display 여부에 따라 show, hide jquery를 통해 display block, none에 따라 보여질지 숨길지 여부를 결정하는 방법입니다. 방법 1 if ($("div").css("display") == "none") { $("div").show(); //display :none.. eunyoe.tistory.com 크게 도움은 못 받았지만 언젠간 도움 받을 날을 기다리며