본문 바로가기
반응형

분류 전체보기126

리스트 롤링 만들기 리스트가 순차적으로 롤링되는 코드입니다. 롤링 리스트 리스트11111111111111 리스트22222222222222 리스트3333333333333333 리스트4444444444444 리스트5555555555555 리스트6666666665 리스트777777777 리스트88888888 리스트999999999 ul, li { margin: 0; padding: 0; } #wrap { padding: 50px 100px; background: gold; width: 600px; } #roll { background: #fff; border: 1px solid red; height: 350px; overflow: hidden; } #roll ul { position: relative; } #roll li { b.. 2019. 9. 27.
스크롤했을때 나타나는 이미지 처음엔 안보이다가 스크롤을 했을때 스르륵 나타나는 이미지를 ES6를 사용해 만들어 봤습니다. .img { position: relative; background: url(http://lorempixel.com/output/nightlife-q-c-400-400-3.jpg) 50% / cover; width: 400px; height: 400px; } .fill { position: absolute; left: 0; top: 0; z-index: 5; background: #ddd; width: 100%; height: 100%; transform-origin: 100% 0; transition: all 1s ease; } .img.on .fill { transform: scaleX(0); } functi.. 2019. 9. 26.
스크롤 상태 표시바 만들기 본문의 상단에 진행상태를 표시해주는 상태표시바를 만드는 소스입니다. Scroll Indicator 본문내용.... body { margin: 0; font-size: 28px; } .header { position: fixed; top: 0; z-index: 1; width: 100%; background-color: #f1f1f1; } .header h2 { text-align: center; } .progress-container { width: 100%; height: 8px; background: #ccc; } .progress-bar { height: 8px; background: #4caf50; width: 0%; transition:all .3s ease; } .content { paddin.. 2019. 9. 26.
플로팅 배너 푸터에서 멈추기 스크롤하는동안 따라다니는 배너가 푸터영역에서 멈추는 코드입니다. footer banner * { margin:0; padding:0; } main { position:relative; } #content { height: 1500px; } footer { background: #333; height: 300px; font-size: 30px; color: #fff; } #banner { position: fixed; right: 20px; bottom: 50px; width: 50px; height: 100px; background: salmon; box-shadow: 0 0 10px rgba(0, 0, 0, .6); } #banner.on { position: absolute; bottom: 350px.. 2019. 9. 26.
스크롤 하단 체크하기 스크롤 이벤트 중 영역의 마지막 체크하기 Lorem ipsum dolor.... 끝까지 읽어주세요 동의합니다 #notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; padding: 5px; border: 2px #7FDF55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border: #2A9F00 solid 2px; border-radius: 5px; } .noti { margin: 0; color: red; } function read() { var box = $('#rules'); var chkBox = $('#agree'); var n.. 2019. 9. 26.
풀페이지 만들기 스크롤이 될 섹션들을 만들어줍니다. section1 section2 section3 section4 간단하게 스타일도 입혀줍니다. html, body { width: 100%; height: 100%; padding: 0; margin: 0; } #wrap { position: fixed; width: 100%; height: 100%; background: gray; } #wrap .section { position: relative; width: 100%; height: 100%; } 스크롤 이벤트를 이용하여 만들고 트윈맥스로 애니메이션을 주었습니다. var sectionWrap = $('#wrap'); var section = $('.section'); var sectionLen = section... 2019. 9. 26.
반응형

티스토리툴바