Select

서론 마지막 효과로 소리를 적용해보 겠습니다. HTML 오디오 태그를 추가해준뒤 어트리뷰트로 보이는거처럼 추가해 줍니다. 오디오태그 자동재생은 브라우저에서 막아둔곳이 많아서 다음과 같이 자바스크립트를 수정해 줍니다. const beeSound = document.getElementById("bee-sound"); const [body] = document.getElementsByTagName("body"); function play() { if (!beeSound instanceof HTMLAudioElement) return; if (beeSound.paused) { beeSound.play(); } else { body.removeEventListener("click", play); } console..

서론 에셋을 화면에 불러와서 날라니는 CSS 애니메이션 까지 적용했는데 움직이지를 않으니까 뭔가 썰렁하네요 CSS variable 하고 트랜스폼 프로퍼티를 이용해서 똥파리가 날라다니는 효과를 추가할게요. CSS 부분 :root { --x: 0; --y: 0; --facing: -1; } CSS파일 최상단에 위에 내용을 추가합니다. 똥파리의 좌표값과 바라보는 방향을 나타냅니다. .control { position: fixed; top: 0; left: 0; width: 100px; z-index: 999; pointer-events: none; transform: translate(var(--x), var(--y)) scaleX(var(--facing)); } 제일 마지막줄 트랜스폼만 추가해줬습니다 자바스..

서론 저번시간에 작업해둔 이미지 스프라이트를 HTML에 불러와서 CSS 애니메이션을 적용해보겠습니다. HTML 구조 잡기 적절한 폴더에다가 index.html 파일을 생성해준뒤 HTML 기본 구조를 잡아 줍니다. body 태그안에 div 엘리멘트를 생성해준뒤 .control 클래스 값을 줬습니다. 그리고 그안에 div 일리멘트와 .bee 클래스값을 줬습니다. .controll 엘리멘트에다가 포지션 fixed를 줘서 .bee를 조종 해주기 위해서 구조를 이렇게 잡았습니다. CSS 적용하기 .control { position: fixed; top: 0; left: 0; width: 100px; z-index: 999; pointer-events: none; } 가장위에 보이게하기위해서 z-index:999로..

서론 이번시간의 최종목표는 원하는 효과를 위해 필요한 에셋 구하기 입니다. 필요한 에셋은 화면에 뿌려줄 이미지와 소리파일이 필요합니다. 에셋을 구할때는 CC0 저작권인지 꼭 확인합니다. 적절한 이미지 찾기 구글에서 여기저기 돌아다니면서 조건에 충족하는 이미지를 아래 사이트에서 찾았습니다. 똥파리로 할려고했는데 잘안보여서 말벌로 작은 변경이 있습니다. 그림에 보시는거처럼 저작권 CC0 합격 사이트에 들어가셔서 링크를 누르시면 다운로드 됩니다. https://opengameart.org/content/red-horned-bee-fly-game-sprites-character Red horned Bee Fly Game Sprites Character FREE GAME ASSET: Red Horned Bee G..

이프로젝트의 최종목표는 제가 웹 프론트엔드 기본기술(HTML, CSS, JS)을 사용해서 화면에 똥파리가 위이잉 소리를 내면서 날라다니는 효과를 만드는 과정을 일지로 기록하는 것 입니다. 왜 하필 똥파리? 똥파리가 갑자기 화면에 나타나서 위이이잉 소리를 내면서 날라다니면 황당하고 웃기지 않을까해서 똥파리를 선택 하게 됐습니다. 시작의 의미로 프로젝트 폴더를 만들고 폴더명을 'flying-fly'로 지었습니다.

소개 슬라이더 아이템수가 바뀔때마다 애니메이션 키프레임을 다시 계산 해주는게 번거로워서 SCSS를 이용하여 계산 부분을 함수화 시켰습니다. 아래사진은 완성된 슬라이더 모습입니다. 본론 HTML 구조 입니다 // .scene는 최상위 엘리멘트 입니다 // .slider는 자식들로 .item을 가집니다. // .item은 각각의 .slider 아이템들을 나타냅니다 // 첫번째 .item 엘리멘트를 마지막에 추가합니다. // 첫부분과 끝부분 엘리멘트를 똑같이 해주면 // 슬라이딩 애니메이션이 반복될때 무한히 반복하는 효과를 줄수 있습니다. 1 2 3 1 SCSS 부분 입니다. // 각변수들은 색갈을을 나타냅니다. $slider:#FFF493; $primary:#87E892; $secondary:#A1E3FF;..

Intro We are going to create a slider that automatically adjusts animation keyframes based on number of items to rotate through items, using only HTML5 and SCSS. Below example demonstrates desired outcome. Breakdown Let's make make our initial HTML structure as following. // .scene is a wrapper for .slider // .slider contains all the items. // .item selects each item // Duplicate the first item,..

https://doc.babylonjs.com/features/es6_support ES6 - Babylon.js Documentation Introduction The NPM package manager is one of the best way to define and organize your project's dependencies. Parallel to traditional javascript development (including a script in a 'script' HTML Tag), using npm packages allows you to use tools like Webp doc.babylonjs.com npm install webpack webpack-cli webpack-dev-s..