Dynamic Background Scrolling

2019-02-04 01:13发布

站内问答 / JavaScript
2051 8 4

Here's a link to what I'll be referring to: http://beckabney.com/test.html

I'm having some trouble getting the background image to work the way I'd like it to.

I want the background to auto resize based on the width of the window, which it is already doing correctly. If you make your window smaller you'll see the background shrink with it.

Here's the issue. If you make your window wide (short) then the background will resize and go too high so you can't see the top of the background anymore (since the background is bottom positioned). I want the background to be top position when you are at the top of the page, and as you scroll down it will slowly move to be bottom positioned. Sort of like the effect of an Android phone's background when you move left and right. Of course, keep in mind that I still want the background to auto-resize when you make the window smaller.

HTML:

<body>
    <img src="http://i.imgur.com/6d5Cm.jpg" alt="" class="background" />

    <div class="banner">
        <img src="http://i.imgur.com/JptsZ.jpg" alt="" />
    </div>
    <div class="content">
        <div class="innerContent">
            testing
        </div>
    </div>
</body>

CSS:

html
{
    background-color: #70d4e3;
    height: 100%;
}

body
{
    height: 100%;
}

.background
{
    margin-top: 45px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -9999;
}

.banner
{
    margin: 0px auto;
    width: 991px;
    margin-bottom: -9px;
}

.content
{
    background: url("http://i.imgur.com/daRJl.png") no-repeat scroll center center transparent;
    height: 889px;
    margin: 0 auto;
    width: 869px;
}

.innerContent
{
    padding: 30px;
}

Maybe some javascript or jquery would be needed to achieve this.

8条回答
该账号已被封号
2楼-- · 2019-02-04 01:41

@abney; as i understand your question may that's you want http://jsfiddle.net/sandeep/RSqrw/60/

you need only css for this:

#background {    
    position: fixed;
    width: 100%;
    height:100%;
    top: 0;
    left:0;   
    z-index: -1;
}
查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
3楼-- · 2019-02-04 01:41

The solution to your issue is a nice little lightweight plugin by Scott Robin. You can get more info, download it, and make your life easier for all of your projects by visiting his project page here.

查看更多
0人赞 添加讨论(0) 举报
冷血范
4楼-- · 2019-02-04 01:42

well, I'm not sure if I understand you and why do you want to do that, but you can try adding 2 backgrounds (see http://www.css3.info/preview/multiple-backgrounds/ ), one with the top bg and another with the bottom bg but I think that if the page is not too long it will cause issues, so the other answer with pure CSS is as follows: first add 3 horizontal divs with 100% width. Top div will have your top bg and its height, middle div will be transparent and auto height and bottom div will have your bottom bg and its height. All divs will have a 0 z-index. Then create a higher z-index div to act as a container and you'll be set. If I understand your question right, that's the close I can think of to achieve that. This being said, I'm pretty sure you can do this with JQuery with way better results

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
5楼-- · 2019-02-04 01:43

Or maybe:

.background {
    margin-top: 45px;
    max-width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: -9999;
    max-height: 100%;

}
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
6楼-- · 2019-02-04 01:50

An exact solution: Fiddle: http://jsfiddle.net/srGHE/2/show/

View source

Thanks for the challenge. See below for the solution, which is complying with all requirements, including recommended yet optional (with steps on how to remove these) features. I only show the changed parts of your page, with an explanation after each section (CSS, HTML and JavaScript):


CSS (changes):

html,body{
    margin: 0;
    height: 100%;
    padding: 0;
}
body{
    background-color: #70d4e3;  
}
#background { /*Previously: .background*/
    /*Removed: margin-top: 45px;
      No other changes*/
}
#banner /*Previously: .banner; no other changes */
#content /*Previously: .content; no other changes */
#innerContent /*Previously: .innerContent; no other changes */

Explanation of CSS revisions:

  1. margin-top:45px at the background is unnecessary, since you're absolutely positioning the element.
  2. All of the elements which are unlikely to appear more than once should be selected via the id (#) selector. This selector is more specific than the class selector.


HTML (changes): All of the class attributes have been replaced by id. No other changes have been made. Don't forget to include the JQuery framework, because I've implemented your wishes using JQuery.


JavaScript (new):
Note: I have added a feature which you didn't request, but seems logical. The code will automatically reserve sufficient margin at the left side of the window in order to always display the background. Remove anything between the marked comments if you don't want this feature.

$(document).ready(function(){
    //"Static" variables
    var background = $("#background");
    var marginTop = parseFloat(background.css("margin-top")) || 0;
    var bannerWidth = $("#banner").width(); /*Part of auto left-margin */
    var extraContWidth = (bannerWidth - $("#content").width())/2; /*Same as above*/

    function fixBG(){
        var bodyWidth = $("body").width();
        var body_bg_width_ratio = bodyWidth/1920;
        var bgHeight = body_bg_width_ratio * 926; //Calcs the visible height of BG

        var height = $(document).height();
        var docHeight = $(window).height();
        var difHeight = bgHeight - docHeight;
        var scrollDif = $(document).scrollTop() / (height - docHeight) || 0;

        /*Start of automatic left-margin*/
        var arrowWidth = body_bg_width_ratio * 115; //Arrow width
        if(bodyWidth - bannerWidth > arrowWidth*2){
            $("body > div").css("margin-left", "auto");
        } else {
            $("body > #banner").css("margin-left", arrowWidth+"px");
            $("body > #content").css("margin-left", (arrowWidth+extraContWidth)+"px");
        }
        /*End of automatic left-margin*/

        if(difHeight > 0){
            background.css({top:(-scrollDif*difHeight-marginTop)+"px", bottom:""});
        } else {
            background.css({top:"", bottom:"0"});
        }
    }
    $(window).resize(fixBG);
    $(window).scroll(fixBG);
    fixBG();
});

Explanation of the JavaScript code
The size of the background is determined by calculating the ratio of the background and document width. The width property is used, because it's the most reliable method for the calculation.

Then, the height of the viewport, document body and background is calculated. If applicable, the scrolling offset is also calculated, to prepare the movement of the background, if necessary.

Optionally, the code determines whether it's necessary to adjust the left margin (to keep the background visible at a narrow window).

Finally, if the background arrow has a greater height than the document's body, the background is moved accordingly, taking the scrolling position into account. The arrow starts at the top of the document, and will move up as the user scrolls (so that the bottom side of the arrow will be the bottom of the page when the user has fully scrolled down). If it's unnecessary to move the background, because it already suits well, the background will be positioned at the bottom of the page.

When the page has finished loading, this functionality is added to the Resize and scroll events, so that the background is always at the right location.

If you've got any other questions, feel free to ask them.

查看更多
0人赞 添加讨论(0) 举报
叛逆
7楼-- · 2019-02-04 01:58

I reccomend using jQuery Background Parallax http://www.stevefenton.co.uk/Content/Jquery-Background-Parallax/

The function is as simple as 

$("body").backgroundparallax();

Ask if you don't get it to work.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)