반응형 제이쿼리9 계산기 만들기 기본적인 계산기를 만들었습니다. 계산기 caption { font-size: 32px; } table { width: 320px; border-collapse: collapse; } table, th { background: #333; } th { padding: 0 10px 0 0; height: 80px; } td { padding: 0; height: 75px; border: 1px solid #333; text-align: center; } th>input { padding: 0; width: 100%; border: none; background: #333; color: #fff; text-align: right; font-size: 48px; } td>input[type='button'] { .. 2019. 10. 2. TweenMax 텍스트 애니메이션 TweenMax로 텍스트가 순차적으로 보이는 애니메이션을 만들었습니다. 한글자씩 제어하기 위해 lettering.js 도 같이 사용했습니다. Hello, Tweenmax Splittext animation test! #wrap { max-width: 300px; } #cont { font-size: 30px; font-weight: bold; color: #333; } #cont .txt { display: block; float: left; } #cont .txt1 { color:#6271fd; } #cont .txt2 { color:#8b72fa; } #cont .txt3 { color:#121280; } #cont .txt span { display: block; float: left; positi.. 2019. 10. 2. 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. 플로팅 배너 푸터에서 멈추기 스크롤하는동안 따라다니는 배너가 푸터영역에서 멈추는 코드입니다. 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. 이전 1 2 다음 반응형
