1

Scrolling Parallax jQueryプラグインを使用して、このサイトの「背景」画像（実際にはcssのbackground-imageではありません）をスクロールしています。

画像のアスペクト比を維持することは可能ですか？つまり、画像を押しつぶさずに、最新のすべてのブラウザで機能させることはできますか？

bgHeight : 'auto'画像のcssをに設定するように設定しようとしましheight:autoたが、これによりChromeとSafariでのスクロール効果が機能しなくなります。

設定もしてみbgWidth : 'auto'ましたが、ブラウザのウィンドウより画像が狭くなっています。

また、他のプラグインまたはこの効果を実装する方法を開きます。つまり、背景画像をページコンテンツに対して異なる速度でスクロールさせ、画像全体を表示しますが、それを超えてスクロールしないようにします...

助けてくれてありがとう！

4

2 に答える 2

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

于 2012-06-21T21:42:11.993 に答える
0

わかりました。彼らのホームページによると、幅と高さの％を設定できるので、最初にそれを試してみて、どうなるか見てみましょう。

于 2012-06-21T20:41:54.683 に答える