[html css js] 순차적으로 변경되는 공지사항 효과 크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내 [당첨자 발표] 2021 스타벅스 플래너 영수증 이벤트 스타벅스커피 코리아 애플리케이션 버전 업데이트 안내 [당첨자 발표] 뉴이어 전자영수증 이벤트 Swiper 라이브러리 이용 Swiper 라이브러리를 추가하고 html 요소의 class 명을 swiper, swiper-wrapper, swiper-slide로 구현한다. .notice .notice-line .inner__left .swiper { height: 62px; flex-grow: 1; } .notice .notice-line .inner__left .swiper-slide { height: 62px; display: flex; align-items: center; } .notice .n.. 2022. 3. 15. [html css js] 이미지 순차적으로 나타내는 효과 이미지를 순차적으로 나타내는 효과를 만들기 위해 gsap 라이브러리를 사용한다. html 코드 자세히 보기 css 코드 (요소 배치 코드는 생략) .visual .fade-in { opacity: 0; } - 기본으로 투명도를 0으로 설정 Javascript 코드 const fadeEls = document.querySelectorAll(".visual .fade-in"); fadeEls.forEach(function (fadeEl, index) { //gsap.to(요소, 지속시간, 옵션); gsap.to(fadeEl, 1, { delay: (index + 1) * 0.7, opacity: 1, }); }); .visual 클래스의 .fade-in으로 설정된 요소들을 가져온 후 각각에 요소에 다른 시간.. 2022. 2. 20. [HTML CSS JS] 우측에 고정 배너 구현하기 화면 우측 상단 부분에 고정되어 있으며 스크롤을 아래로 내릴때 사라지는 배너 구현하기 1. HTML badges 클래스 div 생성 두 개의 badge 클래스 div 생성 후 각각에 div 내에 배너 이미지 링크 2. CSS /* badges 항목을 항상 같은 위치에 놓기 위해 position 속성 absolute 설정 상위에 header의 position 속성은 fixed로 스크롤에 영향 없이 고정 속성 */ header .badges { position: absolute; top: 132px; right: 12px; } /* 배너 이미지의 코너 부분을 둥글게 마감하기 위해 border-radius 값 설정 border-radius 설정 적용을 위한 overflow : hidden 설정 배너 위에 마우.. 2022. 2. 6. [HTML CSS JS] 검색 박스 구현 (Search Box) HTML CSS JS를 활용하여 Transition 효과가 들어간 검색 박스를 구현한다. 1. HTML 구현 search 클래스 div를 생성 search div 내에 input 태그 생성 material-icons 클래스를 갖는 span 태그 생성 material-icons 클래스는 구글에서 제공하는 아이콘들을 이용하기 위한 방법으로 내용(content)로 아이콘 명을 작성하면 해당 아이콘이 삽입됨 https://fonts.google.com/icons 구글에서 제공하는 material-icons를 활용하기 위해 태그 안에 아래 코드 삽입 (삽입 위치는 js파일, css파일 위에 작성하는 것이 좋음) 2. CSS 구현 /* 높이와 하위 항목 position absolute 지정을 위한 position .. 2022. 2. 6. 이전 1 2 3 4 다음
