- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的网站上 here ,我用 CSS 和 Javascript 实现了多层视差滚动。页面上下滚动,我有 6 个图层都在视差中移动。向后的每一层以比前面的层稍慢的速度滚动。
在我单击右上角的汉堡菜单之前,此实现一直有效。
我不确定为什么在幻灯片菜单飞出后图层没有正确地堆叠在一起。
这是视差滚动的 CSS:
.layer {
background-position: bottom center;
background-size: auto;
background-repeat: no-repeat;
width: 100%;
height: 800px;
position: fixed;
z-index: -1;
}
.layer-bg {
background-image: url("http://www.reynelee.com/wp-content/uploads/2017/12/layer1.png");
}
.layer-1 {
background-image: url("http://www.reynelee.com/wp-content/uploads/2017/12/layer2.png\a ");
background-position: left bottom;
}
.layer-2 {
background-image: url("http://www.reynelee.com/wp-content/uploads/2017/12/layer3.png");
}
.layer-3 {
background-image: url("http://www.reynelee.com/wp-content/uploads/2017/12/layer4.png\a ");
background-position: right bottom;
}
这是 JS:
(function() {
window.addEventListener('scroll', function(event) {
var depth, i, layer, layers, len, movement, topDistance, translate3d;
topDistance = this.pageYOffset;
layers = document.querySelectorAll("[data-type='parallax']");
for (i = 0, len = layers.length; i < len; i++) {
layer = layers[i];
depth = layer.getAttribute('data-depth');
movement = -(topDistance * depth);
translate3d = 'translate3d(0, ' + movement + 'px, 0)';
layer.style['-webkit-transform'] = translate3d;
layer.style['-moz-transform'] = translate3d;
layer.style['-ms-transform'] = translate3d;
layer.style['-o-transform'] = translate3d;
layer.style.transform = translate3d;
}
});
}).call(this);
HTML:
<div id='hero'>
<div class='layer-bg layer' data-depth='0.10' data-type='parallax'></div>
<div class='layer-1 layer' data-depth='0.20' data-type='parallax'></div>
<div class='layer-2 layer' data-depth='0.50' data-type='parallax'></div>
<div class='layer-3 layer' data-depth='0.80' data-type='parallax'></div>
<div class='layer-overlay layer' data-depth='0.85' data-type='parallax'></div>
<!-- <div class='layer-4 layer' data-depth='0.90' data-type='parallax'></div> -->
<div class='layer-logo layer' data-depth='0.95' data-type='parallax'> <a id='portfolio-button' href="http://www.reynelee.com/my-work/">View Work</a></div> <!-- my logo-->
<!-- <div class='layer-close layer' data-depth='1.00' data-type='parallax'></div> -->
</div>
最佳答案
问题是由 transform css 属性引起的。例如,如果您应用以下规则:
#page {
transform: translateX(0);
}
您会注意到它会在不打开菜单的情况下导致同样的问题。我以前遇到过这个,但我忘记了术语的实际名称,但是应用转换会导致浏览器以某种方式对其进行不同的处理。我的建议是将此 translateX(0)
应用于 #page 元素,并根据此默认位置重新计算视差 div 的位置。我知道这不是一个完整的答案,但它应该让你继续。
关于javascript - 视差滚动 : Unwanted gap in between layers,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48308832/
我是 Keras 新手,我正在尝试获取 Keras 中的权重。我知道如何在 Python 中的 Tensorflow 中执行此操作。 代码: data = np.array(attributes, '
我正在尝试为上下文强盗问题 (https://medium.com/emergent-future/simple-reinforcement-learning-with-tensorflow-part
我尝试在单击时向 map 添加新标记,并尝试保存标题和描述以在标记悬停时显示,但出现以下错误: Cannot read property 'add Layer' of undefined Javasc
我想要一个传单图层控件,我可以在其中选择一个基础图层,并使这个基础图层本身成为一个 LayerGroup,我可以从中选择要显示的子图层。我正在考虑一个设置,我单击一个单选按钮来选择基础层(层组),然后
我在 GIMP Script-fu 和过程浏览器中遇到了一个简单的问题。 我正在尝试在具有 40 层的图像中向上/向下移动一个层。让我们调用图像 test.xcf 和所述层 Chromask-snap
我有一个(非常大的)脚本在 InDesign 中运行,该脚本在某一时刻将库资源放置到页面上,然后将其移动到特定图层。此脚本在我们这里的所有计算机上都运行良好,但仅当当时 InDesign 中没有打开其
在一些使用 tf2 的 Tensorflow 教程(例如 Neural Machine Translation with Attention 和 Eager essentials )中,他们定义了自定
现在我无法解决依赖性,怎么了? 公司会更改名称吗?但是,我在他们的网站上看到它,但没有“com.layer.atlas:layer-atlas”,但是我的应用程序包含此依赖项,谁能告诉我原因? 最佳答
我使用 Keras 并尝试将两个不同的层连接成一个向量(向量的第一个值是第一层的值,另一部分是第二层的值)。 其中一层是密集层,另一层是嵌入层。 我知道如何合并两个嵌入层或两个密集层,但我不知道如何合
我正在开发一个类来创建各种对称 AE。我现在把这个类移植到TF 2.0,比我想象的要复杂。但是,我使用层和模型的子类来实现此目的。因此,我想将多个 keras 层分组为一个 keras 层。但如果我想
我正在为 CAGradient 设置动画 let gradientChangeAnimation = CABasicAnimation(keyPath: "colors") gradientC
什么是使用 OOP 在业务逻辑对象和数据库之间分层的良好设计? 最佳答案 这些中的任何一个都可以( from Fowler's POEAA ): 数据源架构模式: 表数据网关:充当数据库表网关的对象。
我正在尝试将一些 UIImages 渲染成一张我可以保存在我的相册中的图像。但是好像 layer.renderInContext 没有考虑图层蒙版? 当前行为:照片保存,我看到了 mosaicLaye
哇,这完全令人困惑,而且 dojo 1.8 文档似乎是围绕构建层的完整 clusterf**k。有人知道那里发生了什么吗? 在构建脚本示例配置文件中,示例 amd.profile.js 有 profi
我的 spacemacs 是 0.200.3@25.1.1 每次启动spacemacs时都会收到警告,如何解决? Warnings: - dotspacemacs-configuration-laye
引用是这样的: There's no problem in Computer Science that can't be solved by adding another layer of abstr
我正在使用 Keras 并且有一个自定义层,但是当我使用它时,会发生以下错误,我不知道问题是什么。你能帮我解决这个问题吗?奇怪的是,当我在另一个系统上使用相同的代码时,没有出现此错误! import
我应该什么时候使用 Input我什么时候应该使用 InputLayer ?在 source code有一个描述,但我不确定它是什么意思。 输入层: Layer to be used as an ent
我正在尝试构建一个可以在音频和视频样本上进行训练的模型,但出现此错误 ValueError:请使用“Layer”实例初始化“TimeDistributed”层。您传递了:Tensor("input_1
我正在实现一个需要支持 mask 的自定义 tf.keras.layers.Layer。 考虑以下场景 embedded = tf.keras.layer.Embedding(input_dim=vo
我是一名优秀的程序员,十分优秀!