반응형 애니메이션4 [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 삽입 미리보기할 수 없는 소스 [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. 디즈니 애니메이션 영화추천, 소울, 삶의 의미를 찾는 이야기 "인생은 가능성으로 가득 차 있어" "현재의 모든 순간을 소중히 살아갈 거예요" 디즈니와 픽사의 최신 장편 애니메이션 영화 "소울" 은 삶의 의미를 찾는 이야기입니다. 이 영화는 재즈 뮤지션을 꿈꾸는 조가 죽어서 영혼의 세계로 가게 되면서 벌어지는 이야기를 그립니다. 재즈 피아니스트가 되기를 꿈꾸는 중학교 음악 교사 Joe Gardner가 우연히 영혼의 세계로 가는 이야기입니다. 조는 다시 지구로 돌아가기 위해 여정을 떠나고, 그 과정에서 삶의 진정한 의미를 깨닫게 됩니다. 2020년 11월 미국에서 개봉되었으며 비평가와 상업적 성공을 거두었습니다. 이 영화는 아카데미 시상식에서 최우수 애니메이션 장편 영화상, 최우수 오리지널 스코어상, 최우수 사운드상, 최우수 사운드 믹싱상, 최우수 사운드 편집상을 수.. 2023. 5. 11. 이전 1 다음 728x90 반응형
