CSS3变换的背景图像视差位置计算（在页面加载时]

Question

我正在使用CSS来预加载背景图像，而我等待视差加载。

我一直在使用github中的库进行javascript视差滚动设计（但是...在此site上，随着图像在幻灯片之间的滑动，您会看到图像跳跃），但是我注意到了当image和page top之间存在偏移时，图像的positionY与background-position: center center; background-size: cover;不匹配。我不确定如何修复它。

[如您在屏幕快照中所见，background-image具有0.5的不透明度，以显示positionY在CSS3呈现background-image至DIV的方式与JavaScript如何使用transform在[ C0]和IMG（理想情况下，这些图像应彼此对齐，这将解决“图像跳转”问题）

Mirror DIV

现在，如果变换为（-81px元素上的translate3d(0px, -81px, 0px)，则为预期结果。

IMAGE

Parallax JS Script

您可以在这些GIFS中看到“图像跳转”的效果

Parallax INIT Script

Parallax (with Opacity Background)

本节应该算出图像的长宽比

Parallax (without Opacity Background)

对于this.imageWidth = this.boxWidth; this.imageHeight = this.boxWidth / this.aspectRatio | 0; this.offsetLeft = 0; margin = this.imageHeight - imageHeightMin; if (this.positionY == 'top') { this.offsetBaseTop = imageOffsetMin; } else if (this.positionY == 'bottom') { this.offsetBaseTop = imageOffsetMin - margin; } else if (!isNaN(this.positionY)) { this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, -margin); } else { this.offsetBaseTop = imageOffsetMin - margin / 2 | 0; }; = positionX center positionY center

[此部分是计算IMAGE相对于MIRROR的位置的部分（据我所知this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;是正确的，但是mirrorTop被offsetTop关闭）

26px

HTML

        this.visibility = 'visible';
        this.mirrorTop = this.boxOffsetTop - scrollTop;
        this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
        this.offsetTop = 0;
        this.offsetTop = (this.offsetBaseTop - this.mirrorTop);
        this.offsetTop = this.offsetTop * (1 - this.speed);

具有DATA属性的HTML

<div class="slides main-slideshow-slide slide-5df2b37fd9bd5 pagecommand_slideshow_slide_item frm_slideshow_pagecommand_slideshow_slide_item cls_instance_cycle_slide_5df2b37fd9d09 omne-text-parallax-parent cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">
    <!--  -->
    <!--  -->
    <!--  -->
    <!--  -->
    <div id="parallax-window-slide-5df2b37fd9bd5-0" class="omne-text-parallax-window" style="display: block;">
        <img src="http://www.professionaldevelopment.co.nz/bealetrucking/image/slideshow_images/banner01.jpg" class="parallax-slider-image" alt="banner01.jpg" style="display: none;">
    </div>
    <!--  -->
    <div class="widget-omne-slide-bgsplit omne-slide-bgsplit_img ">
        <div class="omne_slider_bg_con">
            <div class="omne_slide_bg_image" style="background-image: url('http://www.professionaldevelopment.co.nz/bealetrucking/image/slideshow_images/banner01.jpg'); width:1365px; height:400px;">
                <div class="omne_slide_bg_text">
                </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>

我不确定是否应该用DATA ATTRIBUTE来解决差异，或者是否可以改进MATH ..以使视差加载时图像对齐。

我不确定这是否相关，但是我的浏览器是<div class="slides main-slideshow-slide slide-5df2b5ca37504 pagecommand_slideshow_slide_item frm_slideshow_pagecommand_slideshow_slide_item cls_instance_cycle_slide_5df2b5ca3760d omne-text-parallax-parent cycle-slide cycle-slide-active" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: visible;">     <div id="parallax-window-slide-5df2b5ca37504-0" data-parallax="scroll" data-parallax_debug="false" data-image-src="http://www.professionaldevelopment.co.nz/bealetrucking/image/slideshow_images/banner01.jpg" data-position="center center" data-position-x="center" data-position-y="center" data-slider-parallax-classes="normal_image" data-box-width-element="div.cls_instance_slideshow_con_5df2b5ca37608" data-box-height-element="div.cls_instance_slideshow_con_5df2b5ca37608" data-box-element="div.cls_instance_parent_con_5df2b5ca37605" class="omne-text-parallax-window" style="display: block;"> <div class="parallax-mirror" style="visibility: visible; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; height: 400px; width: 1920px; display: block; transform: translate3d(-8.5px, 90px, 0px);"><img src="http://www.professionaldevelopment.co.nz/bealetrucking/image/slideshow_images/banner01.jpg" class="parallax-slider-image normal_image parallax-slider" alt="banner01.jpg" style="visibility: visible; position: absolute; height: 562px; width: 1920px; max-width: none; transform: translate3d(0px, -108px, 0px);"></div> </div>  <div class="widget-omne-slide-bgsplit omne-slide-bgsplit_img "> <div class="omne_slider_bg_con"> <div class="omne_slide_bg_image omne_noparallax" style="width:1365px; height:400px;"> <div class="omne_slide_bg_text"> </div> </div> </div> </div> <div style="clear:both;"></div> </div>，分辨率是firefox

Answer 1

1920x1080

现在可以设置为this.imageHeight = this.boxWidth / this.aspectRatio | 0;，请参阅google-chrome-2019 css更新

也更改with和height from的所有实例>

this.imageHeight = "auto"对此"width:1365px; height:400px;"

这应该解决您的长宽比问题。

CSS3变换的背景图像视差位置计算（在页面加载时]

问题描述投票：-2回答：1

1个回答

最新问题

CSS3变换的背景图像视差位置计算（在页面加载时]

问题描述 投票：-2回答：1

1个回答

最新问题

问题描述投票：-2回答：1