javascript - 別のdivをクリックしてWebページの背景画像を変更およびkenburnズームする

Question

別のdivをクリックして、Webページの背景画像であるケンバーンズームを変更する必要があります。

その方法を教えてください。

ここでコードを確認してください

$(document).ready(function () {

    $('.box1').on('click', function () {

        $('.kenburns').addClass('zoom');
    });
});

Answer 1

cssを次のように変更する必要があります

.kenburns.zoom {
    -webkit-transform: scale(2) rotate(0.1deg);
    -moz-transform: scale(2) rotate(0.1deg);
}

デモ:フィドル

HTMLマークアップがフィドルと同じ場合

$(document).ready(function () {
    $('.box1').on('click', function () {
        $(this).parent('.kenburns').addClass('zoom');
    });
});

.kenburnsその子孫ではなく、要素にズームトランジションを追加する必要があります