[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translateZ(0); } } .test_obj { position: relative; animation: fadeInLeft 1s; } 테스트 중입니다. 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translateZ(0); } } .test_obj { position: relative; animation: fadeInUp 1s; } 테스트 중입니다. 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translateZ(0); } } .test_obj { position: relative; animation: fadeInDown 1s; } 테스트 중입니다. 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 이벤트 실행 var i = 0; var txt = '테스트 중입니다.'; var speed = 100; function test() { if (i

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 @keyframes marquee_1 { 0% { left: 20%; } 100% { left: -80%; } } @keyframes marquee_2 { 0% { right: 100%; } 100% { right: 0; } } @keyframes marquee_3 { 0% { left: 70%; } 100% { left: -30%; } } .marquee .outer { positio..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 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 28 29 30 31 32 33 34 35 36 37 @keyframes marquee { 0% { left: 0; } 100% { left: -100%; } } .marquee .outer { overflow: hidden; } .marquee .outer .inner { position: relative; display: flex; width: 200%; } .marquee .outer .inner:nth-child(1) { animation: marquee 5s linear infinite; } .marquee .ou..

[즐거'웅'코드] 목차 CSS 예제 소스 구현 예시 CSS 1 2 3 .obj { animation-play-state: paused; } 예제 소스 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 28 29 30 31 32 33 34 35 36 37 38 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-i..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 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 28 29 30 31 32 33 34 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .spinner { width: 70px; height: 70px; border: 7px..

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 영상 풀스크린 function video_fullscreen() { document.getElementById("video_obj").requestFullscreen(); } 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 영상 일시정지 $('.video_pause').on('click', function () { $('#video_obj').trigger('pause'); }); 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 영상 재생하기 $('.video_start').on('click', function () { $('#video_obj').trigger('play'); }); 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 영상 일시정지 function video_pause() { document.getElementById("video_obj").pause(); } 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 영상 재생하기 function video_start() { document.getElementById("video_obj").play(); } 구현 예시

[즐거'웅'코드] 목차 예제 소스 구현 예시 예제 소스 1 2 3 4 5 6 7 8 9 10 음소거 ON/OFF $('.video_mute').on('click', function () { $('#video_obj').prop("muted", !$('#video_obj').prop("muted")); }); 구현 예시