Sunday, 15 June 2014

javascript - I am having trouble with a Js code for a parallax effect -


I am trying to create a parallax effect where the image of the landing page still remains, the body below The paragraph comes in the picture above and above. I have this work, where it works but the image still moves and then a white spot appears at the top.

JS:

  function scrollfosor (scroll, height footer) {console log (scrolly); Console.log (heightFooter); If (scroll ua; = height footer) {$ ('footer') CSS ({'bottom': '0 pixels'}); } And {$ ('footer'). CSS ({'bottom': '-' + heightfooter + 'px'}); }} $ (Window) .load (function) {var windowhit = $ (window). Height (), footer has = $ ('footer'). Height (), height document = (window height) + ($ ('') height ()) - 20; $ ('# Scroll-animate, # scroll-animate-main') CSS ({'height': height document + 'px'}}  

Thanks for any help!

  $ ('header'). Css ({'height': windowHeight + 'px', 'line-height': WindowsHigh + 'PX'}); Scrollfooter (window sql wy, footer hight); Window. Button = function () {var scrolls window = scrollY; $ ('# Scroll-animate-main') CSS ({'top': '-' + scroll + 'px'}); $ ('Header'). CSS ({'background-post-y': 50 - (scroll * 400 / height document) '%'}); Scrollfooter (scroll, footer hight);}});  

You actually have to use JQuery to have a vertical effect on an HTML page is not needed . Simple CSS can satisfy your needs.

  .performfact {background-color: // color you wanted or use background-image: url (your link); Height: // Your height-background-repeat: no-repeat; -WebKit-Background-Size: Cover; -MOZ-BACKGROUND-SHAPE: COVER; -o-background-shape: cover; Background size: cover; Status: fixed; // Fixed picture is not converted to relative otherwise the width of effect will be lost: 100%;}. ParallaxTitle {// If you do not need to keep the title in your image font-size: 80px; Color: # IA; Margin-Top: 10%; Text align: center;}. Your content {max-width: 100%; Status: Relative; Top: 400px; Padding: 0 pixels; Font-size: 20px; Background-color: #fff;}  

You only need to compare your website to the sort below, you can make some advance amendments to meet your requirement.


No comments:

Post a Comment