4

HTML を使用して、別のものの上にある「オープニング」効果を作成したいと考えています。いくつかの調査の後、方法を見つけました（JSFiddleを参照）。

円のサイズを変更すると、背景画像が少し移動するという問題が発生しました。

背景画像を静止させる方法を理解するのを手伝ってくれる人はいますか。

  1. 円内の画像は、開くときに同じズーム レベルを維持する必要があります。
  2. 円は中央に配置し、下半分はウィンドウの外に出す必要があります。

サークルcssはこれです：

.circle {
    width: 0px;
    height: 0px;
    z-index: 10;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    left: 50%;
    -moz-transform: translate(-50%, 50%);
    -webkit-transform: translate(-50%, 50%);
    bottom: 0;
    -moz-transition: all 1.5s;
    -webkit-transition: all 1.5s;
}

JSFiddle: http://jsfiddle.net/GmvUQ/2/

アップデート、

もう少し説明しましょう。私の質問が十分に明確ではないことに気付きました。作成したい効果のスクリーンショットがいくつかあります。

最初のフレーム: 1コマ目

2コマ目 2コマ目

全体の効果はすでに機能していますが、トランジションが進行中 (画像の円が大きくなったり小さくなったり) すると、円の内側の画像が少し動きます。

これはおそらく、Javascript / CSS ポジショニングによって実行する必要がある計算のためです。

サイズ変更の移行中にこの画像を完全に静止させる方法を教えてください。

ありがとう！

4

3 に答える 3

1

デモ: http://jsfiddle.net/GmvUQ/5/

更新された HTML

<div>
    <div class="buttons">
        <button onclick="changeboleto(0)">Click here</button>
        <button onclick="changeboleto(500)">Click here</button>
        <button onclick="changeboleto(1000)">Click here</button>
    </div>
    <div class="circle girl">
    </div>
    <div class="circle lamborghini">
    </div>
</div>

each 内のネストされた</div>要素を削除したことに注意してください.circle。代わりに、それぞれに追加のクラスを追加しましたbackground-image。

更新された CSS

.circle {
    width: 250px;
    height: 250px;
    z-index: 10;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-origin: content-box;
    background-position: center center;
}
.lamborghini {
    background-image: url(http://www.hdwallpapers.in/walls/2013_wheelsandmore_lamborghini_aventador-wide.jpg);
}
.girl {
    background-image: url(http://www.hdwallpapers.in/walls/colorful_background_girl-normal5.4.jpg);
    top: 50%;
}

.buttons {
    position: relative;
    z-index: 5;
}

.circle両方の画像セットに共通しているため、ほとんどの CSS をクラスに移動しました。background-*属性の値に特に注意してください。

更新された JQuery

function changeboleto(pix) {
    circleHeight = pix;
    circleWidth = pix;
    
    $('.circle').animate({
        'width' : circleWidth,
        'height': circleHeight
    }, 1500, 'linear');
    
    //css('width', circleWidth).css('height', circleHeight);
    changeCircleBackgroundToWindow();
}

function changeCircleBackgroundToWindow() {
    windowWidth = $(window).width();
    windowHeight = $(window).height();
    
    $(".circle > div").animate({
        'width' : windowWidth,
        'height': windowHeight
    }, 1500, 'linear');
    $(".circle > div").animate({
        'width' : windowWidth,
        'height': windowHeight
    }, 1500, 'linear');
    
    //$(".circle-background").css("width", windowWidth).css("height", windowHeight);
    //$(".circle-background2").css("width", windowWidth).css("height", windowHeight);
}

JQuery と CSS トランジションを混在させるのではなく、すべてのアニメーションを JQuery にまとめました。

関数を使用しanimate()、イージング メソッドを指定しました。デフォルトのイージングは​​ ですが、一定のペースでアニメーションが進行するのでswing使用しました。linear

編集

上記のソリューションには、アニメーションに合わせて画像を拡大縮小できる CSS が含まれています。ただし、画像が全体を通して同じ「ズームレベル」にとどまるように要求しています。

これを実現するには、CSS から次の行を削除するだけです。

.circle {
    ...
    background-size: cover;
    ...
 }
于 2013-10-29T17:00:04.093 に答える