How to achieve fixed position background scroll/reveal effect? jQuery plugin available?

a 夏天 提交于 2019-11-29 22:40:58

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/

HERE you will find your plugin!

It is Parallax effect.

A great way to explore these things is to open the page using the firebug plugin in firefox, or the developer console in chrome, and look at the page source.

It also helps, if you try something, and then post what you're having trouble with.

You can also achieve the effect using the jQuery plugins:

  1. http://gsgd.co.uk/sandbox/jquery/easing
  2. http://www.smoothdivscroll.com
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!