728x90 scss6 [HTML/SCSS] Swiper로 만드는 자연스러운 슬라이드 이동 효과 Swiper 슬라이더를 활용한 부드러운 애니메이션 Swiper 슬라이더에서 현재 슬라이드에는 'swiper-slide-active' 클래스가 추가됩니다. 참고: https://swiperjs.com/swiper-api#parameters 이 swiper-slide-active 클래스에 스타일을 주면 현재 액티브된 슬라이드에만 스타일을 적용할 수 있습니다. 각 슬라이드의 item div에 padding-top을 주고 흑백 필터(grayscale)를 적용했습니다. .item { width: 100%; height: 100%; padding-top: 2.5rem; filter: grayscale(0.8); } position: absolute;로 자식 요소들을 원하는 레이아웃대로 꾸며 위와 같이 만들었습니다... 2024. 1. 29. [CSS/javascript] 스크롤 하면 줄어드는 헤더 (How To Shrink Navbar on Scroll) 스크롤 높이가 100이 넘어가면 gnb에 변경 후 스타일이 적용된 fixed 클래스를 추가하여 헤더 크기를 줄이는 코드이다. &.fixed { padding: 1rem 0; background-color: #fff; .gnb-wrap { .gnb-logo {max-width: 14rem;} .gnb-list {font-size: 1.8rem;} } } See the Pen Untitled by sel (@wimmwell) on CodePen. 2023. 6. 22. [HTML/SCSS/jQuery] 모바일 내비게이션 메뉴 만들기 with 애니메이션 메뉴(햄버거 버튼) 클릭시 내비게이션이 슬라이드 되는 모바일 GNB 코드이다. 닫기 버튼 애니메이션에 노력을 기울임ㅋㅋ 클래스를 통해 영역을 left -100%에서 0%로 주면 슬라이드 된다. 여기에 transiton을 적용해면 자연스럽다. 닫기 버튼은 span으로 만들고 transform을 주어 메뉴버튼에서 닫기버튼으로 전환되게 만들었다. 그나자나 SCSS를 사용하다보니 CSS로 스타일링을 하려면 너무 귀찮다. SCSS 왕편함! &.on { left:0%; .btn_gnb__inner { transform:rotate(180deg); -webkit-transform:rotate(180deg); span { &:nth-of-type(1) {transform:rotate(45deg) translate(4p.. 2023. 2. 16. [HTML/SCSS] CSS로 ON&OFF 온/오프 스위치 만들기 (input 체크박스) input[type="checkbox]를 통해 만든 온/오프 스위치 :checked가 되면 CSS 변화가 일어난다. See the Pen ON & OFF Switch using input:checkbox by sel (@wimmwell) on CodePen. 2023. 2. 7. [HTML/SCSS/JS] Spliting.js 및 transformation 연습 이 것의 주제는 무엇인가 나도 알 수 없다 해리포터 신문지 보고 문득 움직이는 신문지를 만들고싶어져서 시도해봤다. HARRY POTTER 부분은 SVG로, UNDESIRABLE은 Splitting.js로, No.1 부분은 이미지로 마크업해 각각 애니메이션을 주었다. 신문지에 마우스를 오버하면 타이틀에 matrix3D transformation이 일어남 Splitting.js는 Codepen의 Shaw라는 분의 코드를 활용했다. 이미지는 그냥 늘어지다가 사라지며, 바디 배경이 바뀌고 커서에 해리포터 이미지 url을 넣었다. 정말 이것저것 해본 잡스러운 애니메이팅 연습ㅋㅋㅋㅋㅋ See the Pen splitting.js practice by sel (@wimmwell) on CodePen. 2023. 1. 30. [HTML/CSS] :has() selector를 활용한 투명 카드 CSS Codepen에서 :has 챌린지가 뜨길래 :has 셀렉터를 이용한 코드를 만들어봤다. 요소:has() 셀렉터는 그 요소에 특정 하위 요소가 있는지를 찾는다. 태그로 찾을 수도 있고 ex) :has(+p) 클래스 이름으로 찾을 수도 있다 ex) :has(.inner__text) MDN에 좋은 예제가 있으니 참고하면 좋다. https://developer.mozilla.org/en-US/docs/Web/CSS/:has :has() - CSS: Cascading Style Sheets | MDN The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argu.. 2023. 1. 11. 이전 1 다음 728x90
