Question

我正在使用Wordpress主题在Bridge上，当用户在我设置的视差背景上滚动时，我想做出缩放效果。

这是我的CSS：

.parallax {
        /* Set a specific height */

    overflow: hidden;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    }

.parallax img{
    position: fixed;
    top: 0%;
    left: 50%;
    max-width: 200%;
    width: 100%;
    transform: translateX(-50%);
}

还有我的HTML：

<div id="fly-over-state" class="vc_row wpb_row section vc_row-fluid  parallax full_screen_section" style="background-image:url(image.png); text-align:center;"><div class=" full_section_inner clearfix"><div class="wpb_column vc_column_container vc_col-sm-3"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div><div class="wpb_column vc_column_container vc_col-sm-9"><div class="vc_column-inner "><div class="wpb_wrapper">
    <div class="wpb_text_column wpb_content_element  parallax__plane__text">
        <div class="wpb_wrapper">
            <h3 style="text-align: center;"><strong>Some Text</strong></h3>
<h2 style="text-align: center;"><strong style="font-size: 44px!important;">Some more text</strong></h2>

        </div> 
    </div> </div></div></div><div class="fly-over-text wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner "><div class="wpb_wrapper">
    <div class="wpb_text_column wpb_content_element  display__on__mobile">
        <div class="wpb_wrapper">
            <h3 style="text-align: center; color: #eaeaf6; font-size: 17px;"><strong>Texty text text</strong></h3>

        </div> 
    </div> 
    <div class="wpb_text_column wpb_content_element  display__on__mobile">
        <div class="wpb_wrapper">
            <h3 style="text-align: center; font-size: 22px!important; letter-spacing: 3px; color: #eaeaf6;">Texty text</h3>

        </div> 
    </div> </div></div></div></div></div>

然后是我的JS：

jQuery(window).scroll(function() {
  var scroll = $(window).scrollTop();
    $("#fly-over-state img").css({
        transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')'
    });
});

同样，我希望图像在滚动时能够放大，但可惜没有。要进行详细说明，请参见this tutorial，这是我遵循的构建方法。

我想知道自从我在wordpress上以来是否错过了div之类的东西？我的JS文件是zoom.js，现在我在Sources上检查了Chrome Developer Tools，因此显示出来，所以我不确定在哪里出错。

视差背景上的缩放效果未生效

0 个答案: