Summary 1. js 코드 function handleScroll() { const elements = document.querySelectorAll('.on-screen'); elements.forEach(element => { if ( element.getBoundingClientRect().y > window.innerHeight ) { // 각 요소의 위치와 스크린 높이 비교 // css 스타일에 변화 적용 element.style.opacity = "0"; element.style.transform = 'translateY(70px)'; } else { element.style.opacity = "1"; element.style.transform = 'translateY(0px)'; } })..

스크롤을 내렸을 때 내가 원하는 위치로 조정되는 부드러운 사용성을 경험해 봤을 것이다. 이것은 간단히 css을 활용해 구현이 가능하며 이를 snap scroll이라 부른다. ( 스냅 스크롤 ) snap scroll 모듈을 사용하지 않으면 사용자가 직접 스크롤을 내렸을 때 화면 컨텐츠가 개발자가 생각했던 위치에 정확히 오지 않거나, 화면의 위치를 계속 측정하면서 스크롤을 특정 위치로 옮기려할 경우 많은 js 코드가 소모되기 때문에 snap scroll css을 활용하면 스크롤 조작을 편리하게 사용할 수 있으며, 정확한 정보전달 및 유저의 사용성 향상에 도움된다. Summary 1. 부모와 자식 요소의 height을 동일하게 설정 2. 부모 엘리먼트 css 설정 overflow-y : scroll ; scr..

결 론 ::-webkit-scrollbar { height: 0px; width: 5px; } ::-webkit-scrollbar-thumb { background-color: rgb(170, 165, 165); border-radius: 30px; } 👀 Safari / Chrome 환경에서 동작하는 스크롤은 ::-webkit-scrollbar 을 이용해 CSS 조절이 가능하다. 사진은 CSS를 적용하지 않은 기본 스크롤바 화면으로, 간단한 css 적용을 통해 날씬이로 거듭날 수 있다. Result See the Pen by wkddkdud (@angpeng) on CodePen. 1. ::-webkit-scrollbar _ 스크롤바 전체 영역 조절 ::-webkit-scrollbar { height:..

React, css, javascript를 활용한 간단한 로딩 스크린 애니메이션 - 한번 알아두면 평생 써먹는, 사용자에게 더욱 친화적 환경 제공을 위한 프로젝트 속 필수 코드 ! 😋 [ 활용 프로젝트 ] 1. Feed Loading 화면 구현 | 구현 단계 및 실제 코드 단계 ( skeleton : 골격, 해골의 의미 ) skeleton 컴포넌트 생성 ( vscode에서 단축키 사용해 rafce - const 리액트 함수 또는 rfce - fcuntion 리액트 함수 생성 ) component 내부 함수에 실제 구조를 div 태그 이용해 만들고 나머지는 css에서 끝낸다 rafce 사용한 경우 [ const 함수 ] export default function skeleton({ type }) { con..