Search code examples
csshtmlparallax

Trying to add Parallax scrolling to a website that is already designed. It isn't working for some reason. Can someone assist?

I'm trying to add Parallax Scrolling to a website that is already designed. It isn't working for some reason. Can someone assist? The tutorial that I was using is this one.

https://www.youtube.com/watch?v=D75WTf_Y738&list=PLG77V5Yi8Ih_yRxLPALtog4AtVyHEuRwf&index=10

This is the script that I wrote:

 <script>
        function parallax(){
            var intro_section = document.getElementById ('intro_section');
            intro_section.style.top = -(window.pageYOffest / 10)+'px';
        }
    window.addEventListener("scroll", parallax, false);
    </script>

This is the HTML section that I am trying to add the effect to. 

 <div id="intro_section" class="clearfix">
        <div id="Intro_section_container" class="clearfix">
            <p id="We_Know_Why_You’re_Here" class="animated fadeIn" data-wow-delay=".2s">
            We Know Why Your Here
            </p>
            <p id="text" class="animated fadeInUp" data-wow-duration=".2s" data-wow-delay=".2s">
            <span id="textspan2">The computer network at the heart of your small business is glitchy, loses data, refuses to sync with your mobile devices, or runs slower than a turtle with a limp. Sound about right&#x3f;</span><br />
            </p>
            <p id="text1" class="animated fadeInUp" data-wow-duration=".5s" data-wow-delay=".3s">
            HOW DID WE KNOW&#x3f;
            </p>
            <p id="text2" class="animated fadeInUp" data-wow-duration=".5s" data-wow-delay=".4s">
            <span id="textspan3">CloudPoint Technology&#x27;s Managed IT Services clients USED to have those same problems too.&nbsp;</span><br />
            </p>
            <div id="find_out_button" class="clearfix wow fadeIn">
                <p id="Find_out_more_about_us">
                Learn More About Us
                </p>
            </div>
        </div>
    </div>

This is the CSS related to this section.

 #intro_section {
   float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 100%;
background: url("img/abstrack_bg.jpg");
background-position: 5% 0%;
background-repeat: no-repeat 0px 50px;
background-attachment: fixed;
-webkit-background-size: cover;
background-size: cover;
display: block;
margin-bottom: 0px;
padding-bottom: 8%;
margin-right: auto;
padding-top: 8%;
padding-right: 0px;
padding-left: 0px;
}

#Intro_section_container {
float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 85%;
margin-bottom: 0px;
min-height: 0px;
margin-right: auto;
}

#We_Know_Why_You’re_Here {
float: none;
font-size: 746.7%;
width: 100%;
height: auto;
text-align: center;
font-weight: bold;
line-height: 100%;
color: rgb(160, 176, 187);
font-style: normal;
letter-spacing: normal;
text-decoration: none;
font-family: 'Dagny Pro';
position: relative;
top: 0px;
left: 0px;
z-index: 101;
margin-top: 0px;
margin-left: auto;
clear: none;
min-height: 0px;
text-shadow: rgba(100, 124, 140, 0.709804) 0px 3px 3px;
margin-right: auto;
margin-bottom: 0px;

}

I can put up a live feed of the dev website if needed.

I appreciate any help that I can get. Thanks in advance.

Solution

  • there is typo at

        intro_section.style.top = -(window.pageYOffest / 10)+'px';

    it should be

        intro_section.style.top = -(window.pageYOffset / 10)+'px';

    also you should add

    position:fixed;

    to css of intro_section

    here I made a demo at http://jsfiddle.net/qbfdwom5/