amanda의 공간입니다

HTML  CSS/* .active 클래스명 주고 애니메이션 스타일링, 아래는 예시 */.item_01.active .item_btm .con_wrap:before{ animation: triangleChartArrow 0.5s 1.5s linear forwards;}.item_01.active .chart_wrap:before{ animation: triangleChart 1s 0.5s linear forwards;}.item_01.active .chart_wrap:after{ animation: triangleChartTxt 1.5s 2s linear infinite; opacity: 1; -webkit-transition: opacity 0.5s 2s; trans..

HTML go to section 1 go to section 2  CSS/* navigation */.navi_wrap{ position: relative; z-index: 10; height: 97px;}.navi_wrap.fixed .navi_menu{ position: fixed; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 1200px;}.navi_menu{ display..

HTML 아코디언 1 아코디언 1 콘텐츠 내용 아코디언 2 아코디언 2 콘텐츠 내용  CSS.acco_conbox { overflow: hidden; border-radius: 32px; -webkit-box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 6px 15px 0px rgba(0, 0, ..

HTML 모달 띄우기 모달 팝업 콘텐츠  CSS/* modal */body.ofh { overflow-y: hidden;}#dim { display: none; position: fixed; top: 0; left: 0; z-index: 10001; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);}.modal_contents { display: none; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10002; width: 9..

let prevScrollpose = window.pageYOffset; window.addEventListener("scroll", function() { let currentScrollPose = window.pageYOffset; if (prevScrollpose > currentScrollPose) { document.getElementById("bnr_btm").style.bottom = "60px"; // 스크롤 올릴 때 } else { document.getElementById("bnr_btm").style.bottom = "0px"; // 스크롤 내릴 때 } prevScrollpose = currentScrollPose; });}

swiper 플러그인을 탭에 삽입했는데탭이 바뀌면 스와이퍼가 작동하지 않는 이슈 발생 구글링하여 아래 코드로 해결 ! // swiper for auto play on tab menudocument.addEventListener('DOMContentLoaded', function () { let tabSliders = document.querySelectorAll('.my_swiper'); tabSliders.forEach(function (slider, index) { let sliderId = index + 1; let mySwiper = new Swiper(slider, { observer: true, observeParents: true, slidesPerView: 1, spaceBetwee..

html   css#snow_wrap{ position: absolute; top: 0; left: 0; width: 1920px; height: 100%;}#snow_wrap canvas{ position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}  js// snow animation$(()=>{ (function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window...

html 3   css.lyrics_count{ width: 345px; margin: 0 auto; text-align: left;}.lyrics_count span{ display: inline-block; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; color: #000; font-size: 16px; font-weight: 700; vertical-align: middle;}.lyrics_count span + span{ margin-left: 6px;}.lyrics_co..