All geek questions in one place

Dynamic Scrolling Background

Here is a link to what I will link to: http://beckabney.com/test.html

I'm having problems getting the background image to work as I would like.

I want the background to automatically change depending on the width of the window that it is already doing right. If you shrink your window, you will see the background shrink.

Here is the problem. If you make your window wide (short), then the background will change and be too high so that you can no longer see the top of the background (since the background is at the bottom). I want the background to be top when you are at the top of the page, and when you scroll down, it will move slowly to be lower. . It looks like the background effect of an Android phone when you move left and right. Of course, keep in mind that I still want the background to automatically change 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; }

This may require some kind of javascript or jquery.

+6
source share
8 answers

Well, that was fun, thanks!

Hope you don't mind me taking the liberty of using percentages to make my life a little easier and maybe the script a little more reliable as I can reliably use a float with percentages.

What I did was that the layout, html and css follow the rules that you need for proper bg animation, they remained basically the same as yours.

Then it was only about calculating the calculations necessary for the correct properties, to determine the percentage that you were on top, *20 actually represents the number of spaces "left" to fill the background image in percent (since the background height is 80% )

I moved the calculations to a function so that I could call this when scrolling and resizing the window, making sure it is triggered on any event that somehow changes the window ...

Didn't do extensive testing, but worked in Chrome and I'm tired: p

I believe this is what you are looking for:

http://jsfiddle.net/sg3s/RSqrw/15/See edit 2

If you want a different way to draw, just start the beginning of the background of the page at the top and change this:

http://jsfiddle.net/sg3s/RSqrw/14/ See edit 2

Edit:

As a bonus, and since I never wrote a jquery script as a "plugin", I decided to convert it to one. What I came up with should be easy to use and use!

http://jsfiddle.net/sg3s/RSqrw/52/ See Edit 3

Functionality successfully tested in Chrome mode, Firefox 3.6, IE9 +

Edit 2:

After reading the question again, checking whether I did it correctly, I noticed that I didn’t quite do what you need, so I updated the link in the first edit, in which you can add a plugin in which you can have several options for scrolling the background It preserves my “old” interpretation, and also does what you want ... Read comments in the code for some additional descriptions.

Edit 3:

As I started working today, I was concerned about the fact that my plug-in "try" was a bit bloated. And, as you mentioned in the commentary, this did not quite meet the requirements.

So, I rewrote it just to do what you want, and not much more, tested in Chrome Firefox, IE9 +, etc. etc. This script is much cleaner.

http://jsfiddle.net/sg3s/vZxHW/

You can choose to have the background stick on top or bottom if the height fits into the window. Nothing else, but this is more than enough to make some pretty cool stuff: p

+5
source

Exact solution: Fiddle: http://jsfiddle.net/srGHE/2/show/

View source

Thanks for the call. Below is a solution that meets all the requirements, including recommended, but optional (with instructions for removing them). I show only 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 */

CSS version explanation:

  • margin-top:45px is not required in the background, since you are completely positioning the element.
  • All elements that are unlikely to appear more than once should be selected using the id ( # ) selector. This selector is more specific than a class selector.


HTML (changes) : All class attributes are replaced with id . There were no other changes. Remember to enable the jQuery framework , because I implemented your wishes with jQuery.


JavaScript (new):
Note. I added a function that you did not request, but it seems logical. The code will automatically reserve a sufficient margin on the left side of the window to always display the background. Remove anything between the marked comments if you do not 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(); });

JavaScript code explanation
The background size is determined by calculating the ratio of background and document width . The width property is used because it is the most reliable method to calculate.

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

Optionally, the code determines whether the left margin needs to be adjusted (so that the background is visible in a narrow window).

Finally, if the background arrow is taller than the body of the document, the background moves accordingly, taking into account the scroll position. The arrow starts at the top of the document and moves up as the user scrolls (so that the bottom of the arrow will be the bottom of the page when the user scrolls fully down). If there is no need to move the background, because it already fits well, the background will be located 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 in the right place.

If you have other questions, feel free to ask them.

+3
source

Well, I'm not sure if you understand you and why you want to do this, but you can try adding 2 backgrounds (see http://www.css3.info/preview/multiple-backgrounds/ ), one with the top bg, and the other with the bottom bg, but I think that if the page is not too long, this will cause problems, so another answer with pure CSS looks like this: first add 3 horizontal divs with 100% width. The top div will have your top bg, and its height, the middle div will be transparent, and the height of the auto and the bottom div will have your bottom bg and its height. All divs will have 0 z-index. Then create a higher z-index div to act like a container and you will be set. If I understand your question correctly, then what is close, I can come up with for this. With this, I'm sure you can do it with jQuery with better results.

0
source

Using jQuery, I was able to give you what I think you are asking:

 $(window).scroll(function() { var h = Math.max($(document).height(), $(window).height()); var bottom = h - $(".background").height() - $(window).height(); $(".background").css("top", (($(window).scrollTop() / h) * bottom) + "px"); });

EDIT: Forgot to consider how scrollTop reports position.

0
source

Or maybe:

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

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

The function is as simple as

 $("body").backgroundparallax();

Ask if you will earn it.

0
source

@abney as I understand it, your question may be what you want http://jsfiddle.net/sandeep/RSqrw/60/

for this you only need css:

 #background { position: fixed; width: 100%; height:100%; top: 0; left:0; z-index: -1; }
0
source

The solution to your problem is a good, easy Scott Robin plugin. You can get additional information, download it and make your life easier for all your projects by visiting the project page here .

0
source

Source: https://habr.com/ru/post/897556/

More articles:


All Articles