저는 자바 스크립트를 처음 사용하고 신형입니다.자바 스크립트 애니메이션을 시도하는 중
기본적으로 내가 얻으려고하는 것은 바닥 글에서 페이지 중앙으로 이미지가 올라가는 것입니다. CSS를 사용하여 이미지를 만드는 방법을 알아 냈습니다. 하지만 페이지 자체가로드 될 때 페이지를 표시하고 싶었습니다.
누구든지 올바른 방향으로 나를 가리키거나 몇 가지 예를 보여줄 수 있다면 매우 감사하게 생각합니다. 사전에
감사합니다,
조
그래서 당신은 페이지가로드되는 동안/전에 애니메이션을 수행 할? 대부분의 최신 브라우저는 아무것도 애니 메이팅하기 전에 웹 사이트를로드합니다.
하지만 대안이 있습니다. 물론 애니메이션을 제외하고는 대부분의 콘텐츠를 페이지 밖으로 남겨 둘 수 있습니다. 웹 사이트가로드되면 애니메이션이 시작되고 AJAX를 사용하여 콘텐츠를 얻을 수 있습니다.
즉, 애니메이션이 실행되는 동안 콘텐츠가로드됩니다.
지금 데모를 만들고 있습니다 ... 기다려주세요! 나는 페이지가로드 될 전까지 자바 스크립트가 실행될 때까지 기다릴 window.addEventListener('load', init, false);을 사용했습니다 http://jsfiddle.net/gWhtQ/
:
여기 데모입니다.
로드 된 후 페이지가 정상적으로 실행되는 동안 다른 파일을 가져 오는 XMLHttpRequest 개체가 생성됩니다.
콘텐츠가로드되면 document.getElementById('content').innerHTML = xmlhttp.responseText;을 사용하여 응답을 추가합니다.
내용을 언급하지 마십시오. 방금 사용 가능한 임의의 CSS 파일을 사용했습니다.
와우!고마워요. 팀,이게 내가 찾고 있던 바로 그거야. 행운을 빌어 요, 다시 한번 감사드립니다. – user1987330
대단히 환영합니다! 스택 오버플로에서는 동일한 질문을 가진 사람들을 위해 답변을 수락 할 수 있습니다. 답의 왼쪽에있는 큰 "V"를 클릭하십시오. –
자바 스크립트를 처음 시작하는 경우 jQuery과 같은 라이브러리를 사용하여 애니메이션을 시작하는 것이 더 쉽습니다.
jQuery를 사용하면 브라우저 차이점, 준비된 이벤트 등을 걱정하지 않고 jQuery가 애니메이션 작업을하는 데 더 많은 관심이 있다면 code on GitHub을 확인할 수 있습니다. .
감사합니다. 훌륭한 자원! – user1987330
jQuery 및 Addy Osmani's post을 확인하시기 바랍니다. 페이지가로드되는 동안 애니메이션을 수행하려면 이미지를 HTML 본문의 맨 위에 놓아야 브라우저가 멈추고 페이지의 나머지 부분보다 먼저로드됩니다. 그런 다음 스크립트에서 요소가 DOM에 있는지 테스트 한 다음 애니메이션이 시작될 때 테스트를 시작할 수 있습니다. 그러나 이것은 실제로 성능을 저해 할 것입니다. jQuery를 사용하여 쉽게 테스트 할 수있는 페이지가로드 된 후에 애니메이션을 수행하는 것이 좋습니다. 이렇게하면 이미지를 HTML 몸체의 어느 곳에 나 배치 할 수 있으며 스크립트를 맨 끝에 배치하여 로딩 시간을 향상시킬 수 있습니다. Paul Irish는 애니메이션 작업에도 good post을 가지고 있습니다.
[** animate.css **] (https://github.com/daneden/animate.css) 및 [** jQuery.transit **]에서 배울 수있는 훌륭한 프로젝트가 두 개 있습니다. (https://github.com/rstacruz/jquery.transit). 그들의 소스 코드는 도움이 될 것입니다. –