4

Parallax/Scrolling Timeline プロジェクトに取り組んでおり、CSS3 Background-size カバー プロパティに問題があります。

div には次のプロパティがあります。

background: url(../images/timeline/back-6.jpg) no-repeat top center black; 
background-size: cover;
padding-top: 90px;
height: 1855px;
position: relative;

jQuery を使用して、background-attach を fixed に切り替えます。これを行うと、背景画像が「飛び込み」ます（つまり、画面の端を過ぎていた画像の一部が表示されるようになります）。これは望ましい結果ではありません。

テストでは、div を background-size: 100% カバーを使用するように切り替えることができますが、スクロール時にさまざまな垂直ジャンプの問題が発生しています。

背景を固定に切り替えたときに飛び込まないようにする方法のアイデアはありますか? （背景をスクロールするように設定すると、逆にも発生します）。

残念ながら、このコードのデモにリンクすることはできません。ページはまだ展開する準備ができていないためです。

4

2 に答える 2

0

scrollTo-Plugin などで使用したい 1 ページ レイアウトの作成中に同じ問題が発生しました。ページ レイアウトは 2 つの部分に分割されました。右側に。そこで、「background-position: fixed」と「background-size: cover」の両方を結合する一種の jquery プラグインを作成していました。背景画像を整列させるために、クラス/IDで要素を定義するだけです。

コードについて文句を言わないでください。私はjavascript/jqueryに比較的慣れていません。しかし、その作業;)そこにあります:

function fixedResize() {
    var targetEl = $('element where bg-images are in');
    var targetWidth = targetEl.width();
    var targetHeight = targetEl.height();
    var targetPosX = targetEl.offset().left;
    var targetPosY = targetEl.offset().top;
    var leftRatio = targetWidth / targetHeight;
    //console.log('TargetWidth', targetWidth, 'TargetHeight', targetHeight, 'Offset', targetPosX, targetPosY, 'leftRatio', leftRatio);
    targetEl.each(function(){

        var imgTarget = $(this);
        var url = $(this).css('background-image').replace('url(', '').replace(')', '').replace("'", '').replace('"', '');
        var bgImg = $('<img />'); // make background-image as image tag for getting width and height of the image
        imgTarget.css('background-attachment','fixed');
        bgImg.hide();
        bgImg.bind('load', function(){
            var imgHeight = $(this).height();
            var imgWidth = $(this).width();
            var imgRatio = imgWidth / imgHeight;
            $(this).remove(); // remove img Tags again

            // Calculate resize dimensions
            if (imgRatio > leftRatio) {
                var currentWidth = imgRatio * targetHeight; // image width after resize
                var currentHeight = (currentWidth/imgWidth)*imgHeight;
                var setToLeft = ((currentWidth - targetWidth)/2);
                var imgPosX = targetPosX - setToLeft;
                var imgPosY = (currentHeight - targetPosY - currentHeight/2 - targetHeight/2)* -1;
                var resizeImg = 'background-size: auto '+ targetHeight +'px;';                  

                } else if (imgRatio < leftRatio){
                    var currentWidth = targetWidth;
                    var currentHeight = (currentWidth/imgWidth)*imgHeight;
                    var imgPosX = targetPosX;
                    var imgPosY = (currentHeight - targetPosY - currentHeight/2 - targetHeight/2)* -1;
                    var resizeImg = 'background-size: '+ targetWidth +'px auto;'; // resize background
                }
            imgTarget.attr('style','background-attachment: fixed; background-position: '+ imgPosX +'px '+ imgPosY +'px;' + resizeImg);
            console.log('imgWidth', imgWidth, 'imgHeight', imgHeight, 'imgRatio', imgRatio, 'currentWidth', currentWidth, 'currentHeight', currentHeight, 'setToLeft', setToLeft);
            console.log('imgPos', imgPosX, imgPosY, 'setToLeft', setToLeft, targetPosX);

        });
        $(this).append(bgImg);
        bgImg.attr('src', url);

    });
}
fixedResize(); // initiate function

$(window).resize(function() {
    fixedResize(); // initiate function for window resize (Fluid behavior)
});

または jsfiddle.net/rowphant/eXb6e/14/

于 2013-10-22T13:42:45.470 に答える