반응 형 애니메이션 교차 브라우저 작동

Question

저는 클라이언트 용 웹 사이트를 디자인하고 있으며 모든 페이지 상단에 애니메이션 (비대화 형)을 원합니다. 사이트는 모든 브라우저 및 장치로 액세스 할 수 있어야합니다. 해결책 찾기를 도와 주시겠습니까?

1. 시나리오 1 : Flash에서 애니메이션을 디자인하십시오. 이점 : 그것은 가볍습니다. 문제 : iPads/iPones에 표시되지 않습니다.

2. 시나리오 2 : 애니메이션을 HTML로 변환합니다 (Flash에서 createJS 용 툴킷을 사용하여 애니메이션을 HTML 문서와 .JS로 변환 함). 그런 다음 슬라이드 쇼의 iFrame에 애니메이션을 포함합니다 (저는 LayerSlider를 사용합니다). 문제 : 파이어 폭스가 인데,에 iFrames와 관련된 문제가있다. 간단히 말해서이 프레임을 다시로드하면 표시되지만, 물론 방문자가이 트릭을 수행 할 것으로 기대하지는 않는다. ?. 안드로이드에 표시되지 않습니다 플러스는 무거운 파일입니다

수 당신이하십시오. 애니메이션 GIF로 애니메이션을 변환 Problme :.) 또한 안드로이드에서는

시나리오 3 볼 수 없습니다. 어떤 브라우저에서나 애니메이션을 디스플레이 할 수있는 가장 좋은 해결책은 무엇입니까? Flash, iFrame 및 animatedGIF 내의 HTML은 용도에 맞게 제대로 작동하지 않는 것 같습니다 : 다른 제안? HTML과 iFrame은 Firefox 그것을 받아 들일 것입니다.하지만 아마도 그렇게 할 수 있습니다. 나에 대해 생각하지 않은 다른 형식?

도움을 많이 주셔서 감사합니다. 아마도 바퀴를 다시 만들려고 노력하고 있으며, 내 경험으로 정말 도움이 될 수 있습니다!

추 신 : 이상적으로 WP 사이트의 슬라이드 쇼 (LayerSlider) 내에 포함하고 싶습니다.

Answer 1

사용자 에이전트 및 운영 체제 등을 검색 한 다음 표시 할 이미지 유형을 프로그래밍 방식으로 결정할 수 있습니다. PHP를 들어

은 원래 내장 플래시 복잡한 애니메이션이다 내가 디자인하고

Answer 2

http://www.php.net/manual/en/function.get-browser.php를 참조하십시오. 해결책으로 HTML5로 변환하고 별도의 웹 페이지로 저장 한 다음 슬라이더 내에서 iFrames를 사용하여 호출합니다.

$(document).ready(function(){ 
var c = $(‘#respondcanvas’); 
var ct = c.get(0).getContext(’2d’); 
var container = $(c).parent(); 

$(window).resize(respondcanvas); 

function respondcanvas(){ 
c.attr(‘width’, $(container).width()); 
c.attr(‘height’, $(container).height());} 

respondcanvas();` 

애니메이션도 완전 반응과 모든 브라우저와 호환되는이 방법 : 위해 나는 다음 JS 파일이 조각을 추가 한 플래시 변환 도구를 사용하여 응답을 달성했다.

희망이 솔루션은 다른 사람들을 도울 수 있기를 바랍니다.