Please help me with my Html/CSS/JavaScript! (Parallax Scrolling)

Discussion in 'HTML & Website Design' started by Kyle Berry, Dec 4, 2016.

0
  1. #1
    I have been trying to figure out how to make a parallax scrolling website for at least 6 hours in the past two days and I just cannot seem to understand why my code will not work. I have tried so many different things to get my site to have parallax scrolling. Finally after so much frustration I just decided to copy EXACTLY what a YouTube tutorial told me to do and it still... won't... work... I will be deeply grateful if someone helped me to figure out why my code won't work the way I would like it to.

    The YouTube tutorial that I copied from was:

    Here was my code html/JavaScript:
    /////////////////////////////////////////////
    <!DOCTYPE html>
<html>
<head>
<title>Parallax</title>
<script>
  var ypos,image;
  function parallex()
  {
    ypos = window.pageYOffset;
    image = document.getElementById('image');
    image.style.margin-top = ypos*.5 + 'px';
  }
  window.addEventListener('scroll', parallex);
</script>
<link rel="stylesheet" type="text/css" href="parallaxstyle.css">
</head>
<body>
  <img id="image" src="image2.jpg" height: "710px" width="100%"; />
  <div id="content"></div>
</body>
</html>
    Code (markup):

    ////////////////////////////////////////////////
    Here was my CSS:
    ////////////////////////////////////////
    * {
  margin: 0px;
  padding: 0px;
}
#image {
  position: relative;
  z-index: -1;
}
#content {
  height: 750px;
  width: 100%;
  margin-top:-10;
  background-color:#4dbbac;
  position: relative;
  z-index:1;
}
    Code (markup):

    //////////////////////////////////////////
     
    Last edited by a moderator: Dec 4, 2016
    Kyle Berry, Dec 4, 2016 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hi. You still need to fix a couple there e.g. add a meta tag for character encoding type and fix invalid html attribute coding for image.
    And for the parallex to work:
    image.style.top = ypos*.5 + 'px';
    Code (JavaScript):
    instead of:
    image.style.margin-top = ypos*.5 + 'px';
    Code (JavaScript):
     
    hdewantara, Dec 4, 2016 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    My advice? DON'T!!! If you need scriptttardery for layout, your site is accessibility trash. Some massive bandwidth wasting full screen image? IDIOTIC HALFWIT ARTSY FARTSY BULLSHIT that just makes the page slower and harder to use.

    PARTICULARLY if you're going to go the mouth-breathing dumbass route of putting a presentational image in the markup, as that then becomes 100% epic fail at web development since said image likely has ZERO blasted business in an <img> tag.

    It's a giant middle finger to speed, efficiency, usability, and accessibility, more often than not resulting in broken layouts and fat bloated slow sites that NOBODY actually wants to visit more than once.

    Just say no to parallax, no matter how many artists under the DELUSION that they know the first damned thing about "design" cream their panties over the concept!
     
    deathshadow, Dec 5, 2016 IP