如何实现固定位置背景滚动/显示效果？ jQuery插件可用？ [英] How to achieve fixed position background scroll/reveal effect? jQuery plugin available?

问题描述

我想知道是否有人知道是否有一个jquery插件，或者如何实现这种效果，在时尚标签 krystalrae.com

I was wondering if anyone knows if there is a jquery plugin, or how to achieve this sort of effect that is visible on the 'collection' section of fashion label krystalrae.com

屏幕捕获视频

非常感谢任何提示或推送正确的方向！

Any tips or nudges in the right direction would be greatly appreciated!

谢谢！

推荐答案

所有你需要的是一些高度与窗口相同的div，具有属性 background-attachment：fixed; 的不同背景图像。

You can do this with CSS. All you need is some divs that are the same height as the window, with different background images with the property background-attachment: fixed;.

#one
{
    background: url(http://images.buzzillions.com/images_products/07/02/iron-horse-maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

#two
{
    background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

http://jsfiddle.net/Kyle_/mbhLN/

这篇关于如何实现固定位置背景滚动/显示效果？ jQuery插件可用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！