jquery 스프라이트 애니메이션 반응성

2 개의 이미지 GIF 애니메이션을 스프라이트로 대체하려고합니다. 문제는 내가 반응 형 디자인을 사용하고 있다는 것입니다. 따라서 창 크기가 변경되면 전체 "시스템"이 더 이상 작동하지 않습니다. GIF가 나쁘고 CPU가 먹지만, 오른쪽으로 비늘이납니다.jquery 스프라이트 애니메이션 반응성

내 질문 - 아무 해결책도 찾지 못했지만 실제 창에서 창 크기를 가져올 수 있으며 오른쪽 높이, 너비로 이미지 크기를 조정할 수 있으며 물론 첫 번째 이미지에서 두 번째 이미지로 "점프"를 변경합니다. 등등. 이미지 크기가 1200로 설정되어이 코드에 따라서

var scrollUp = (function() { 

    var timerId; 

    return function (height, times, element) { 
    var i = 0; 
    timerId = setInterval(function() { 
     if (i > times) 
     i = 0; 
     element.style.backgroundPosition = "0px -" + i * height + 'px'; 
     i ++; 
    }, 100 ); 
    }; 
})(); 

scrollUp(1200 , 6, document.getElementById('anim'))

- 디스플레이는 1980x1200이지만, 디스플레이의 변화에 따라, 크기 1200 잘못되면, 바로 이잖아 - 그것은 실제 디스플레이 크기이어야한다 - 상기 같은 시간에 이미지는 그 크기로 조정되어야합니다.

이렇게 할 수 있나요? 아니면 누구든지 반응 형 스프라이트 애니메이션에 대해 더 좋은 아이디어를 갖고 있습니까?

어쩌면 css3?

감사합니다.

출처

2013-03-22 ad2003

CSS 미디어 쿼리를 사용하여 중단 점에서 화면 크기 변경에 응답하지 않는 이유는 무엇입니까? –

$(window).resize(function myAss(){ //when window is resizing it starts 
    var wid = $(window).width(); 
    //or 
    var wid = $("#someid").width(); 
    //or 
    var wid = $(".someclass").width(); 
    $("#yourdiv").css("width",wid*0.5); //your div will be 50% of the received width. do same with the height if you want. 
}

출처

2013-04-26 08:01:08 George

감사합니다! 나는 그것을 시도 할 것이다. – ad2003

난 단지 CSS로했다. 스프라이트에 (예를 들어) 5 개의 이미지가있는 경우 background-size를 500 %로 설정하십시오. 그것은 나를 위해 일했습니다. Working example.

출처

2013-06-11 22:33:30 user2476397

LazyLou을 확인하고 v1.1을 확인하십시오. 나는이 플러그인의 개발자이고 v1.1에 애드온 아키텍처를 추가 할 계획입니다. 플러그인의 첫 번째 애드온은 애니메이터입니다.

출처

2013-12-21 22:07:47 ozanmuyes

jquery 스프라이트 애니메이션 반응성

답변

관련 문제