본문 바로가기
반응형

분류 전체보기48

[HTML소스포함] 클릭으로 박스 이동하기, JavaScript 예제 클릭으로 박스 이동하기 CSS 애니메이션 예시 이동 [HTML소스포함] 1. CSS 부분: - #box: ID가 "box"인 요소에 스타일을 적용합니다. - transition: 트랜지션(애니메이션) 속성을 설정하여 요소의 스타일 변화에 대한 애니메이션을 지정합니다. 여기서는 left 속성에 1초 동안의 트랜지션을 설정했습니다. 2. HTML 부분: - : "이동" 버튼이 있고, 클릭 시 moveBox() JavaScript 함수를 호출합니다. - : 이동할 박스 요소입니다. 3. JavaScript 부분: - moveBox(): 버튼 클릭 시 호출되는 JavaScript 함수로, "box" 요소의 left 속성을 변경하여 박스를 오른쪽으로 200px 이동시킵니다. 이 코드는 사용자가 "이동" 버튼을 클.. 2023. 12. 8.
[HTML소스포함] "Canvas 게임", JavaScript 예제 "Canvas 게임" Canvas를 사용하여 만든 간단한 게임 자바스크립트로 게임을 어떻게 만들 수 있는지 알아볼 수 있습니다. "Canvas 게임" See the Pen 게임 by Yami LEE (@Yami-LEE) on CodePen. 요소를 사용하여 공이 움직이는 기본적인 그래픽 애니메이션 요소를 사용하여 2D 그래픽을 그리고, 공을 움직이는 기본적인 애니메이션을 만듭니다. setInterval 함수를 사용하여 draw 함수를 주기적으로 호출함으로써 애니메이션 효과를 구현합니다. ㅇ[HTML소스포함] 마우스따라 움직이는 눈동자, JavaScript [HTML소스포함] 마우스따라 움직이는 눈동자, JavaScript [HTML소스포함] JavaScript으로 만든 마우스따라 움직이는 눈동자 눈동자가.. 2023. 12. 7.
[HTML소스포함] 마우스따라 움직이는 눈동자, JavaScript 예제 [HTML소스포함] JavaScript으로 만든 마우스따라 움직이는 눈동자 눈동자가 마우스를 따라 움직임 See the Pen 눈동자 by Yami LEE (@Yami-LEE) on CodePen. 코드블럭 -> JavaScript로 마우스 이동에 따라 눈동자를 움직이는 효과를 구현하였습니다. 주석을 통해 코드의 각 부분에 대한 설명을 추가했습니다. ㅇ[HTML소스포함]JavaScript로 텍스트 애니메이션 [HTML소스포함]JavaScript로 텍스트 애니메이션 HTML 삽입 미리보기할 수 없는 소스 [HTML소스포함] JavaScript 로 구현한 마우스를 올리면 텍스트가 회전하고 컬러가 변경되는 텍스트 애니메이션 텍스트 애니메이션 마우스를 올리면 텍스트가 회전 title.kr 2023. 12. 7.
[HTML소스포함] 텍스트 애니메이션, JavaScript 예제 HTML 삽입 미리보기할 수 없는 소스 [HTML소스포함] JavaScript 로 구현한 마우스를 올리면 텍스트가 회전하고 컬러가 변경되는 텍스트 애니메이션 텍스트 애니메이션 마우스를 올리면 텍스트가 회전하고 컬러가 변경됩니다. 소스입니다. See the Pen Untitled by Yami LEE (@Yami-LEE) on CodePen. --> 코드블럭 호기심과 재미 ㅇ [HTML소스포함]JavaScript로 시계만들기 [HTML소스포함]JavaScript로 시계만들기 HTML과 CSS를 이용하여 시계의 모양을 만들고, JavaScript를 이용하여 시계의 시간을 실시간으로 업데이트합니다. 코드블럭 --> HTML 블럭 --> HTML 삽입 미리보기할 수 없는 소스 title2.tistory.com .. 2023. 12. 7.
728x90
반응형

티스토리툴바