반응형 jQuery17 TweenMax 눈내리는 효과 트윈맥스를 사용하여 눈내리는거 같은 효과를 만들어봤습니다. * { margin:0; padding:0; box-sizing:border-box; } section { position:relative; background:#333; height:500px; overflow:hidden; } .circle { position:absolute; width:8px; height:8px; border-radius:50%; } .circle1 { background:green; } .circle2 { background:snow; } .circle3 { background:salmon; } $(function(){ var $win = $(window), $section = $('section'), $hei = $s.. 2019. 9. 28. 스크롤 상태 표시바 만들기 본문의 상단에 진행상태를 표시해주는 상태표시바를 만드는 소스입니다. 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. 농구게임 만들기 책을 보며 만든 농구게임입니다. 컴퓨터와 사용자가 번갈아 슛을 하고, 컴퓨터의 2,3점 슛은 랜덤으로 발생합니다. 2점슛이 들어갈 확률은 50%, 3점슛은 33% 으로 되어있습니다. 남은 슛 횟수 10 컴퓨터 0 사용자 0 컴퓨터부터 시작합니다. 컴퓨터 슛하기 사용자 2점 슛 3점 슛 var shotLeft = 10; var shotLeftNum = $('#shot_left'); var computerTurn = true; var txt = $('#txt'); var btnShootComputer = $('#shoot_computer'); var comSroreNum = $('#computer_score'); var comScore = 0; var btnShootUser2 = $('.btn_user2').. 2019. 9. 26. 이전 1 2 3 다음 반응형
