반응형 javascript58 3d page 만들기 3d 페이지를 만들어봤습니다. ie에서는 Edge 이상에서만 지원합니다. 터치 제스처를 구현해주는 hammer.js를 같이 사용했습니다. Desktop 3D Page page1 page2 page3 page4 .container { position: absolute; width: 100%; height: 100%; margin: 0 auto; perspective: 800px; overflow: hidden; box-sizing: border-box; } .wrapper { position: relative; width: 100%; height: 100%; margin: auto; transform-style: preserve-3d; transition-duration: 1s; } .wrapper>.pa.. 2019. 10. 8. 스크롤했을때 나타나는 이미지 처음엔 안보이다가 스크롤을 했을때 스르륵 나타나는 이미지를 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. 스코프(Scope) 자바스크립트에서 스코프란 어떤 변수들에 접근할 수 있는지를 정의합니다. 스코프엔 두 가지 종류가 있는데요, 전역 스코프(global scope)와 지역 스코프(local scope)가 있습니다. 전역스코프(Global Scope) 변수가 함수 바깥이나 중괄호 {} 바깥에 선언되었다면, 전역 스코프에 정의된다고 합니다. 전역 변수를 선언하면, 여러분의 코드 모든 곳에서 해당 변수를 사용할 수 있습니다. 심지어 함수에서도 말이죠. const hello = 'Hello CSS-Tricks Reader!' function sayHello () { console.log(hello) } console.log(hello) // 'Hello CSS-Tricks Reader!' sayHello() // 'Hello CS.. 2019. 9. 26. 호이스팅(Hoisting) var 변수의 의도치 않은 현상 if(true){ var name = 'hj'; } console.log(name); //hj for(var i=0; i 2019. 9. 26. 로또 추첨 만들기 js로 로또 추첨 만들기 Math.random을 이용해 번호를 랜덤으로 생성합니다. setInterval로 카운트다운이 된 이후에 번호가 노출되도록 했습니다. 1 2 3 4 이번주 로또 번호 추첨 번호 분석중...... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 let count = 3; let interval = setInterval(function() { if (count == 0) { clearInterval(interval); // 0이되면 인터벌종료 getNum(); // 번호생성 함수 실행 } document.getElementById('counter').innerHTML = count; count--; },.. 2019. 9. 26. javascript 끝말잇기 1 2 3 4 5 6 끝말잇기 click 끝단어와 같으면 딩동댕을 출력하고 틀리면 땡을 호출하는 소스입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 let word = document.getElementById('word'); let input = document.getElementById('in'); let btn = document.getElementById('btn'); let out = document.getElementById('out'); btn.addEventListener('click', function(e) { e.preventDefault(); if (word.textContent[word.textContent.length - 1] == inpu.. 2019. 9. 26. 이전 1 ··· 6 7 8 9 10 다음 반응형
