仅使用CSS的视差滚动？ [英] Parallax scrolling with CSS only?
问题描述
我一直在做一个项目，我完成了内容。对于设计，然而，我想使用视差滚动技术。
但是，我已经能够找到它已经使用JavaScript或Jquery，而
只有CSS3才能实现视差滚动（如果需要使用HTML5），而不是使用jquery插件？
注意：这是接近我想要产生的效果（ http://jessandruss.us/ ）
我真的很喜欢 KitKat的回答，但正如Roy Prins所建议的，将它减少到裸的必需品，非常有帮助，看到精确什么是足以创建这种效果。 要产生一个非常基本的视差滚动效果，以下示例就足够了。请注意，浏览器前缀，回退，等等都没有得到解决。标记为 / *的CSS值
请参阅我的分页笔。
< html>< head& < style>
html，
body {
width：100％;
height：100％; $ b $b overflow：auto;
}
body {
透视：1px; / *例如* /
}
.background {
transform：
translateZ（ - 。4px）
scale（.6）
translateX（-104％）
translateY（-40％）
rotate（-5deg）; / *例如* /
}
.foreground {
transform：
translateZ（.25px）
translateX（50％）
scale（.75）
旋转（2deg）; / *例如* /
}
< / style>< / head>< body>
< img class =background>背景< / div>
< img class =foreground> foreground< / div>
< / body>< / html>
对KitKat答案的微小修正：
看起来不需要 transform-style：preserve-3d （至少在Chrome中），效果而取决于主体的 overflow：auto 。删除此项，视差将失败。
I have been working on a project and I am done with the content. For the design however, I am thinking of using the parallax scrolling technique.
However, all I have been able to find out about it has been with JavaScript or Jquery, whereas I am only proficient with CSS3.
Can parallax scrolling be implemented with CSS3 only(with HTML5 if needed), instead of using jquery plugins? It would be nice if I could be pointed to some tutorials for the same.
Note: This is close to the effect I want to produce(http://jessandruss.us/)
I really like KitKat’s answer, but as Roy Prins suggested, it would be very helpful to reduce it down to the bare essentials, to see precisely what is sufficient to create this effect. I’ve done so here.
To produce a very basic parallax scroll effect, the following example is sufficient. Note that browser prefixes, fallbacks, etc. have not been addressed. CSS values marked with /* e.g. */ may be changed at the designer’s discretion.
See my forked pen here.
<html><head><style>
html,
body {
width: 100%;
height: 100%;
overflow: auto;
}
body {
perspective: 1px; /* e.g. */
}
.background {
transform:
translateZ(-.4px)
scale(.6)
translateX(-104%)
translateY(-40%)
rotate(-5deg); /* e.g. */
}
.foreground {
transform:
translateZ(.25px)
translateX(50%)
scale(.75)
rotate(2deg); /* e.g. */
}
</style></head><body>
<img class="background">background</div>
<img class="foreground">foreground</div>
</body></html>
A minor correction to KitKat’s answer:
It seems that one doesn’t need transform-style:preserve-3d (at least in Chrome), and that the effect rather depends on the body’s overflow:auto. Remove this and the parallax fails.
这篇关于仅使用CSS的视差滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
