화면 이동 비율을 그대로 유지하면서 스크롤링 시차 jQuery 플러그인

Question

나는 Scrolling Parallax jQuery plugin을 사용하여 this site에서 "배경"이미지 (실제로 CSS 배경 이미지가 아님)를 스크롤하고 있습니다.

이미지 가로 세로 비율을 유지할 수 있습니까? 즉, 이미지를 스쿼시하지 않고 모든 최신 브라우저에서 여전히 사용할 수 있습니까?

이미지 CSS를 height:auto으로 설정하는 설정을 시도했지만 Chrome 및 Safari에서 작동하는 스크롤 효과가 중지됩니다.

bgWidth : 'auto' 설정을 시도했지만 이미지가 브라우저 창보다 좁습니다. 또한

다른 플러그인이나 즉,이 효과, 페이지 내용에 다른 속도로 배경 이미지 스크롤을 가지고, 또한, 전체 이미지를 표시하지만, 과거 이동하지를 구현하는 방법에 열려 ...

미리 도움을 청하십시오!

Answer 1

너비가 뷰포트의 100 %가되도록 자동으로 설정되기 때문에 변경하지 않으면 늘어납니다.

사용이 :

$.scrollingParallax('img/clouds.png', { 
    bgHeight : '250%', 
    staticSpeed : .25, 
    staticScrollLimit : false, 
    bgWidth: 'auto' 
}); 

위의 여기 행동에서 볼 수있다 : 비 뻗어 배경 이미지는 항상 왼쪽 부동 때문에 jsFiddle이

---

, 나는 이렇게 약간의 jQuery 선 (善)을 채찍질 창 크기 조정 이벤트 중에도 항상 이미지가 뷰포트의 가운데에 배치됩니다. 즉, 이미지는 모든 브라우저에서 가로 세로 비율을 유지하면서 최대 이미지 크기 또는 축소로 확장됩니다.

$(function() { 

    // Specify your background image here. 
    var bgMain = 'http://indigobrazilianportuguese.com/2012/wp-content/uploads/Home_bg1600.jpg'; 

    $.scrollingParallax(bgMain, { 
     bgHeight : '200%', 
     staticSpeed : 0.25, 
     staticScrollLimit : false, 
     // Important to set to 'auto' so Aspect Ratio for width is preserved because height defined above is fixed. 
     bgWidth: 'auto' 
    }); 

    // These two lines is for page load. 
    // The variable will calculate CSS 'left' for the background image to center it in the viewport. 
    // First, horizontal viewport size is checked via $(window).width() 
    // Then, image width is determined by searching for image's unique filepath/filename. 
    // Once the different is known, this value is then divided by 2 so that equal space is seen on left and right side of image which becomes the variable value. 
    var bgMainHcenter = ($(window).width() - $('body img[src="' + bgMain + '"]').width()) /2 ; 
    $('body img[src="' + bgMain + '"]').css('left', bgMainHcenter + 'px'); 

    // Just like above, it's repeated during Window Resize Event. 
    $(window).resize(function() { 
     bgMainHcenter = ($(window).width() - $('body img[src="' + bgMain + '"]').width()) /2 ; 
     $('body img[src="' + bgMain + '"]').css('left', bgMainHcenter + 'px'); 
    }); 

}); 

여기에 직접보기 :jsFiddle

Answer 2

좋아요. 홈페이지에 따르면 너비와 높이를 %로 설정할 수 있으므로 먼저 시도해 보았습니다.