文章/答案/技术大牛

发布

社区首页 >问答首页 >parallax.js中的标度

问parallax.js中的标度
EN

Stack Overflow用户

提问于 2017-05-21 17:31:35

回答 1查看 1K关注 0票数 0

作为我正在进行的网络项目的一部分，我使用的是parallax.js库。我要做的是让一个图像填充整个视口，当用户在鼠标周围移动时，图像也会相应移动。

我一开始尝试使用img元素，但它基本上运行良好。我必须做一些技巧才能让它集中起来。然而，最大的问题是，它的规模没有适当扩大。如果我打开手机上的页面，或者在我的超宽显示器中最大限度地使用它，你就可以看到图像周围的背景。

<style>
.container {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scene {
    width: 100%;
    height: 100%;
}

.layer {
    width: 100%;
    height: 100%;
}

img {
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: -3%;
    width: 130%;
    height: auto;
}
</style>   

<body>
<div class="container">
            <div class="panel">
                <div class="scene">
                    <div class="layer" data-depth="1.00"><img src="https://static.giantbomb.com/uploads/original/13/137381/2859027-borderlands-lg.jpg"></div>
                </div>
            </div>
        </div>
</body>

我试着使用媒体查询在css中的width:auto和height:auto之间切换，以某种方式使其扩展，但它没有实现。在谷歌搜索之后，我遇到了background-size: cover，它基本上就是我想做的事情。然而，当我将img切换到带有背景图像的div时，出现了另一个问题。无论放大多大(读:比视口大多少)，带有图像的div都会在视口边框被切断。这意味着每当用户最轻微地移动鼠标时，背景都是可见的。

<style>
.panel {
    width: 100vw;
    height: 100vh;
    overflow:hidden;
}

.scene, .layer{
    width: 100%;
    height: 100%;
    overflow:hidden;
}

.parallaximg {
    background-image: url("https://static.giantbomb.com/uploads/original/13/137381/2859027-borderlands-lg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow:hidden;
    width:120%;
    height:120%;
        margin-left: 50%;
    transform: translateX(-50%);
}
</style>

<body>
    <div class="wrapper">
        <div class="panel">
            <div class="scene">
                <div class="layer" data-depth="1.00"><div class="parallaximg"></div></div>
            </div>
        </div>
    </div>
</body>

这两个示例的JS脚本是相同的(需要JQuery和parallax.js)：

var scene = $(".scene")[0];
var parallax = new Parallax(scene, {
    scalarX: 4,
    scalarY: 4
});

有什么办法让它起作用吗？如果没有，我将如何使img版本在所有的长宽比上适当地进行缩放？

为了清楚起见，我举了两个例子：

JsFiddle与img
JsFiddle与background-image

javascript

html

css

parallax.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-06-21 08:55:31

最后，使用以下类的绝对定位完成了这个任务：

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44099820

复制

相似问题

问parallax.js中的标度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问parallax.js中的标度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问parallax.js中的标度
EN