Hello 100A

간단하게 자주 사용하는 슬라이드 갤러리입니다. https://unpkg.com/swiper/swiper-bundle.css https://unpkg.com/swiper/swiper-bundle.min.js 세팅 하시는거 잊지마시고, js에서 spaceBetween 는 사이간격을 slidesPerView로 몇개씩 보여주고 싶은지 설정해주면 됩니다. 이미지 비율은 이미지 크기에 상관없이 일정하게 나오게 하기위해 padding-bottom을 이용해 비율을 정했습니다. 100% - 가로와 세로 비율 1:1 50% - 가로와 세로 비율 1:0.5 로 보면 됩니다. loop:true 는 제가 html에 작성한 슬라이드는 5개인데 그 뒤로 복제해 가며 계속해서 슬라이드가 될 수 있게 해줍니다. transition을 ..

홈페이지의 배너에 자주 사용되는 scroll down 기능입니다. keyframe을 사용하여 자연스럽게 계속 반복 애니메이션 되도록 작업했습니다. css의 scroll-behavior 를 이용하여 scroll down을 클릭시에 부드럽게 아래 섹션으로 스크롤 이동 되도록 했습니다. See the Pen Untitled by baekah (@baekah) on CodePen.

코드펜으로 작성했습니다. https://codepen.io/baekah/pen/GRENBwJ See the Pen Untitled by baekah (@baekah) on CodePen.

마우스 오버시 수직으로 flip 되는 아주아주 간단한 css소스 입니다. HTML FRONT BACK CSS .content{ width:500px; height:100vh; background:#333; margin:0 auto; } .circle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; perspective: 600px; } .circle .front, .circle .back{ position:absolute; top:0; left:0; width:100%; height:100%; backface-visibility: hidden; border-radius:50px;..

사이드바 모바일이나 반응형 웹에서 자주 사용하는 사이드바입니다. 사이드바는 css 만으로 동작이 되니 사이드바만 사용시에는 js파일이 없으셔도 됩니다. 아코디언메뉴는 jquery로 작업했으며 1.4.4로 작업했습니다. 사이드바 width는 70%이며 사이즈 변경시에는 .sidebar 에서 width와 left 값 둘다 변경하셔야합니다 html코드입니다. HELLO hello1 hello2 hello3 hello4 hello5 hello6 GOODBYE bye1 bye2 bye3 GOODNIGHT goodnight1 goodnight2 goodnight3 css코드입니다. .content{height:100vh; background:#ccc; margin:0 auto; position:relative;} ..

초간단 progress bar 소스입니다. Click me! .progress-area{ width:500px; height:50px; background:#e1e1e1; border:3px solid #b1b1b1; margin:30px; position:relative; } .progress{ position:absolute; width:100%; height:100%; left:0; top:0; } .progress.on{ background:#b1b1b1; animation:progress 3s linear; animation-fill-mode:forwards; } .btn{ width:200px; height:50px; background:#b1b1b1; text-align:center; lin..

javascript로 짠 간단한 타이머 프로그램입니다. Timer Timer 시작 일시정지 let txtArea = document.querySelector('h2'); let startEl = document.querySelector('.startbtn'); let stopEl = document.querySelector('.stopbtn'); let state = false; let timer; let count=0; let timerId; timer = { run: function (){ clearTimeout(timerId); txtArea.textContent = count++; timerId = setTimeout(timer.run, 1000); }, stop: function(){ clear..

jQuery로 만든 초간단 아코디언 메뉴입니다. 다운 버튼을 누르면 display:none 시켜놓은 대메뉴에 포함된 서브메뉴가 자연스럽게 슬라이드 다운되며 나옵니다. 내용도 간단하고 소스도 단순하니 긴 설명없이 소스 올려두겠습니다. HTML 소스 입니다. HELLO hello1 hello2 hello3 hello4 hello5 hello6 GOODBYE bye1 bye2 bye3 GOODNIGHT goodnight1 goodnight2 goodnight3 CSS 소스입니다. body{ padding:50px; } .cate{ width:300px; position:relative; border-style:solid; border-width:1px 1px 0 1px; border-color:#000; } ..

이번에는 스크롤 바를 내렸을때 메뉴바의 스타일이 변하는 코드를 작성해 보았습니다. 아래의 그림과 같이 스크롤을 내렸을때 메뉴바의 높이, 로고의 크기 메뉴의 폰트크기가 부드럽게 변경됩니다. 아래는 CSS 코드입니다. 스크롤이 내려갔을때 .active 클래스를 addClass 해줍니다. 그렇기 때문에 변경되는 스타일은 .active를 포함하고 스타일을 지정해줍니다. body,html{ margin:0;padding:0; font-family:'Montserrat',sans-serif; } .container{ width:100%; height:1500px; background-image:url('bg.png'); } #header{ position:fixed; width:100%; box-sizing: bo..

간단한 마우스 오버 애니메이션을 소개합니다. 영역에 마우스가 오버가 되면 아래의 그림과 같이 둥둥 뜨는듯하면서 그림자가 퍼지는 듯한 애니메이션입니다. HTML 코드입니다. circle-box 영역에 마우스가 오버가 되면 ICON에 애니메이션이 발동됩니다. ICON CSS 코드입니다. animation : circlemove 1.5s infinite linear; (circlemove의 속성대로 1.5초동안 애니메이션이 발동되고 무한루프로 속도는 일정하게) html,body {width:100%;height:100%;margin:0px;padding:0px;font-family:sans-serif;} .container{width:100%;height:100%;background:#000;} .circle..