Fix background image in gap - skrollr -


I am creating a parallax similar to this example:

I The third image appearing on the scroll should be shown as a fixed background image and like this page, do not visit this page with sunglasses about halfway on this page:

I tried to delete transform styles and add background-attachment: fixed but no one is working idea?

Thank you!

Just referring to the exact code shown in the classic. For example, the HTML page, there are several values ​​that you Need to change in the reflected form below:

  and div class = "parallax-image-wrapper parallax-image-wrapper-100" data anchor-target = "# kitens + .gap" data - bottom-top = "conversion: translated 3D (0 px, 200%, 0 px)" data-top-fry = "conversion: translation 3D (0 px, 0%, 0 px)" & gt; & Lt; Div class = "parallax-image parallax-image-100" style = "background-image: url (images / kitteh3.jpg)" data anchor-target = "# kittens + .gap" data-bottom-top = " Conversions: Translation 3D (0 px, -100%, 0 px); " Data Top Down = "Conversion: Translation 3D (0 px, 100%, 0 pixels);" & Gt; & Lt; / Div & gt; & Lt; / Div & gt;   

You can change both pendulum-image-wrapper and pendulum-image height values ​​to 50 instead of 50. Honestly, I do not see any benefit for keeping the height or 50% height for BG image. Maybe one reason I am missing, but I hope that anyone wants a BG image to expand the entire height of the vortex because it moves towards the hidden difference.

For this reason, I just set these two classes with height: 100% in my classes, and then the additional height applied to the HTML code for each image group above Skip the sections & amp; It is not important to do this outside of # skrollr-body , but it will clear your code slightly.

Finally, the data-bottom-top attribute perpendicular-image-

in the end, for parallax-image y- Change the axis transform3d values ​​

/ code> -60% / 60% to -100% / 100% This bg image will become static because the difference exposed above it Scrolls and it can be fixed.

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -