Parallax Scrolling Issues

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Parallax Scrolling Issues

    Hi,

    I'm new to coding, I'm currently designing myself a portfolio website to showcase my design skills, I've developed a problem I hope you could help me out with!

    I've built a skeleton for a parallax scrolling index page with the idea to then link to individual projects from the portfolio section. I've spent a while on the visuals and had the scrolling working but now when I've tried to make the site responsive (using media queries to load different CSS styles) it seems to mess up now when it scrolls down to the correct section it then jumps somewhere else.

    Would you be able to look at my code and tell me if there is something I am doing horribly wrong? My website is online at Matt Wilson Graphic Designs

    I'll also upload the code here too.

    HTML

    PHP Code:
    <!doctype html>
    <
    html>
    <
    head>
    <
    meta charset="UTF-8">
    <
    meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <
    title>Matt Wilson Graphic Designs</title>
    <
    link type="text/css" rel="stylesheet" href="style.css">
    <
    link href='http://fonts.googleapis.com/css?family=Graduate' rel='stylesheet' type='text/css'>
    <
    script type="text/javascript" src="jquery.js"></script>
    <
    script type="text/javascript" src="script.js"></script>
    </
    head>

    <
    body>

    <
    nav>
        
    <
    div id="menu_wrapper">

         <
    a href="#services"><div class="menu_button">
        
            <
    p>services</p>
        
        </
    div></a>
        
        <
    a href="#about"><div class="menu_button">
        
            <
    p>about</p>
        
        </
    div></a>
        
        <
    a href="#top"><div id="logo">
        
        </
    div></a>
        
        <
    a href="#portfolio"><div class="menu_button">
        
            <
    p>portfolio</p>
            
        </
    div></a>
        
         <
    a href="#contact"><div class="menu_button">
        
            <
    p>contact</p>
        
        </
    div></a>
        
    </
    div>

    </
    nav>

    <
    section id="feature">

    <
    div id="top">

    </
    div>

        <
    div id="feature_image">
        
            <
    img src="images/greece.jpg">
        
        </
    div>
        
    <
    div class="logo_border_black">

    </
    div>
        
    </
    section>
        
    <
    section id="welcome">
        
        <
    div id="message">
        
            <
    p>HELLO AND WELCOME TO MY WEBSITE PLEASE CHECK OUT MY WORK AND SAY HELLO WHILST YOUR HERE</p>
            
        </
    div>
        
        <
    div class="bottom_border_black">
            
        </
    div>

    </
    section>

    <
    section id="services">

        <
    div class="triangle_white">
            
        </
    div>
        
        <
    div class="title_white">
        
            <
    p>services</p>
            
        </
    div>
        
        <
    div class="logo_border_white">

        </
    div>
        
        <
    div class="bottom_border_white">
            
        </
    div>
        
    </
    section>

    <
    section id="about">

        <
    div class="triangle_black">
            
        </
    div>
        
        <
    div class="title_black">
        
            <
    p>about</p>
            
        </
    div>

        <
    div class="logo_border_black">

        </
    div>
        
        <
    div class="bottom_border_black">
            
        </
    div>

    </
    section>

    <
    section id="portfolio">

        <
    div class="triangle_white">
            
        </
    div>
        
        <
    div class="title_white">
        
            <
    p>portfolio</p>
            
        </
    div>

        <
    div class="logo_border_white">

        </
    div>
        
        <
    div class="bottom_border_white">
            
        </
    div>

    </
    section>

    <
    section id="contact">

        <
    div class="triangle_black">
            
        </
    div>
        
        <
    div class="title_black">
        
            <
    p>contact</p>
            
        </
    div>

        <
    div class="logo_border_black">

        </
    div>
        
        <
    div class="bottom_border_black">
            
        </
    div>

    </
    section>

    </
    body>
    </
    html
    CSS

    PHP Code:
    * {
        
    margin:0px;
        
    padding:0px;
    }

    body {
        
    font-family'Graduate'cursive;
        
    text-decoration:none;
        
    color:#FFF;    
    }

    h1 {
        
    font-family'Graduate'cursive;
        
    font-size:37px;
        
    line-height:55px;
    }

    h2 {
        
    font-family'Graduate'cursive;
        
    font-size:20px;
        
    line-height:40px;
    }

    h3 {
        
    font-family'Graduate'cursive;
        
    font-size:16px;
        
    line-height:40px;
    }

    a:hover {
        
    color:#00739C;
    }

    /**MENU**/

    nav {
        
    position:fixed;
        
    z-index:1;
        
    width:100%;
        
    background-color:#FFF;
        
    height:70px;
        
    background-color:#0099C1;
    }

    #menu_wrapper {
        
    width:700px;
        
    margin-left:auto;
        
    margin-right:auto;
    }

    .
    menu_button {
        
    padding-top:25px;
        
    text-align:center;
        
    width:100px;
        
    height:50px;
        
    color:#FFF;
        
    float:left;
    }

    .
    menu_button:hover {
        
    color:#00739C;
    }

    #logo {
        
    width:300px;
        
    height:70px;
        
    float:left;
        
    background-image:url(images/logo.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    #logo:hover {
        
    background-position:bottom left;
    }

    /**CONTENT**/

    section {
        
    display:block;
        
    positionrelative;
        
    width:100%;
    }

    #top {
        
    width:900px;
        
    height:100px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    padding-top:70px;
        
    background-position:bottom;
        
    background-image:url(images/border_black.png);
        
    background-repeat:no-repeat;
    }

    .
    triangle_black {
        
    z-index:1;
        
    padding-bottom:70px;
        
    display:block;
        
    width:60px;
        
    height:25px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/triangle_black.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    triangle_white {
        
    z-index:1;
        
    padding-bottom:70px;
        
    display:block;
        
    width:60px;
        
    height:25px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/triangle_white.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    logo_border_black {
        
    width:900px;
        
    height:100px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/logo_border_black.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }


    .
    logo_border_white {
        
    width:900px;
        
    height:100px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/logo_border_white.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    bottom_border_black {
        
    width:900px;
        
    height:100px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/border_black.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    bottom_border_white {
        
    width:900px;
        
    height:100px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/border_white.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    title_white {
        
    width:900px;
        
    padding-top:20px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    text-align:center;
    }

    .
    title_white p {
        
    font-size:37px;
        
    color:#FFF;
    }

    .
    title_black {
        
    width:900px;
        
    padding-top:20px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    text-align:center;
    }

    .
    title_black p {
        
    font-size:37px;
        
    color:#333;
    }

    #feature {
        
    color:#333;
        
    margin-right:auto;
        
    margin-left:auto;
        
    width:100%;
        
    background-color:#FFF;
        
    }

    #feature_image {
        
    color:#333;
        
    margin-right:auto;
        
    margin-left:auto;
        
    width:900px;
        
    height:400px;
        
    background-image:url(images/greece.jpg);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    #feature_image img {
        
    width:100%;
    }

    #welcome {
        
    color:#333;
        
    margin-right:auto;
        
    margin-left:auto;
        
    width:100%;
        
    background-color:#FFF;
    }

    #message {
        
    width:900px;
        
    margin-right:auto;
        
    margin-left:auto;
        
    text-transform:lowercase;
        
    font-family'Graduate'cursive;
        
    font-size:37px;
        
    line-height:55px;
    }

    #services {
        
    color:#333;
        
    margin-right:auto;
        
    margin-left:auto;
        
    width:100%;
        
    background-color:#333;
    }

    #about {
        
    color:#333;
        
    margin-right:auto;
        
    margin-left:auto;
        
    width:100%;
        
    background-color:#FFF;
    }

    #portfolio {
        
    color:#333;
        
    margin-right:auto;
        
    margin-left:auto;
        
    width:100%;
        
    background-color:#333;
    }

    #contact {
        
    color:#333;
        
    margin-right:auto;
        
    margin-left:auto;
        
    width:100%;
        
    background-color:#FFF;
    }

    /* #Tablet (Portrait)
    ================================================== */

        /* Note: Design for a width of 768px */
        
    @media only screen and (min-width768px) and (max-width959px) {

    nav {
        
    position:fixed;
        
    z-index:1;
        
    width:100%;
        
    background-color:#FFF;
        
    height:70px;
        
    background-color:#0099C1;
    }

    #menu_wrapper {
        
    width:655px;
        
    margin-left:auto;
        
    margin-right:auto;
    }

    .
    menu_button {
        
    padding-top:25px;
        
    text-align:center;
        
    width:100px;
        
    height:50px;
        
    color:#FFF;
        
    float:left;
    }

    .
    menu_button:hover {
        
    color:#00739C;
    }

    #logo {
        
    width:255px;
        
    height:70px;
        
    float:left;
        
    background-image:url(images/Logo_tablet.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    #logo:hover {
        
    background-position:bottom left;
    }    

    /**CONTENT**/
        
    section {
        
    width:768px;
        
    }

    #top {
        
    width:768px;
        
    height:100px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    padding-top:70px;
        
    background-image:url(images/border_black_tablet.png);
        
    background-position:bottom left;
        
    background-repeat:no-repeat;
    }

    .
    logo_border_black {
        
    width:768px;
        
    height:100px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/logo_border_black_tablet.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    logo_border_white {
        
    width:768px;
        
    height:100px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/logo_border_white_tablet.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    bottom_border_black {
        
    width:768px;
        
    height:100px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/border_black_tablet.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    bottom_border_white {
        
    width:768px;
        
    height:100px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/border_white_tablet.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    triangle_black {
        
    z-index:1;
        
    padding-bottom:70px;
        
    display:block;
        
    width:60px;
        
    height:25px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/triangle_black.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    triangle_white {
        
    z-index:1;
        
    padding-bottom:70px;
        
    display:block;
        
    width:60px;
        
    height:25px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/triangle_white.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    title_white {
        
    width:768px;
        
    padding-top:20px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    text-align:center;
    }

    .
    title_black {
        
    width:768px;
        
    padding-top:20px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    text-align:center;
    }

    #feature_image {
        
    color:#333;
        
    margin-right:auto;
        
    margin-left:auto;
        
    width:768px;
        
    height:340px;
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    #feature_image img {
        
    width:100%;
    }

    #message {
        
    width:768px;
        
    margin-right:auto;
        
    margin-left:auto;
        
    text-transform:lowercase;
        
    font-family'Graduate'cursive;
        
    font-size:37px;
        
    line-height:55px;
    }


        }
        
    /*  #Mobile (Portrait)
    ================================================== */

        /* Note: Design for a width of 320px */
        
    @media only screen and (max-width767px) {

    nav {
        
    position:fixed;
        
    z-index:1;
        
    width:100%;
        
    background-color:#FFF;
        
    height:70px;
        
    background-color:#0099C1;
    }

    #menu_wrapper {
        
    width:320px;
        
    margin-left:auto;
        
    margin-right:auto;
    }

    .
    menu_button {
        
    padding-top:30px;
        
    text-align:center;
        
    width:64px;
        
    height:45px;
        
    color:#FFF;
        
    float:left;
    }

    .
    menu_button p {
        
    font-size:11px;
    }

    .
    menu_button:hover {
        
    color:#00739C;
    }

    #logo {
        
    width:64px;
        
    height:70px;
        
    float:left;
        
    background-image:url(images/Logo_mobile.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    #logo:hover {
        
    background-position:bottom left;
    }

    /**CONTENT**/
        
    section {
        
    width:320px;    
    }

    #top {
        
    width:320px;
        
    height:50px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    padding-top:70px;
        
    background-image:url(images/border_black_mobile.png);
        
    background-position:bottom left;
        
    background-repeat:no-repeat;
    }

    .
    logo_border_black {
        
    width:320px;
        
    height:50px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/logo_border_black_mobile.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    logo_border_white {
        
    width:320px;
        
    height:50px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/logo_border_white_mobile.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    bottom_border_black {
        
    width:320px;
        
    height:50px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/border_black_mobile.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    bottom_border_white {
        
    width:320px;
        
    height:50px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/border_white_mobile.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    triangle_black {
        
    z-index:1;
        
    padding-bottom:70px;
        
    display:block;
        
    width:33px;
        
    height:14px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/triangle_black_mobile.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }

    .
    triangle_white {
        
    z-index:1;
        
    padding-bottom:70px;
        
    display:block;
        
    width:33px;
        
    height:14px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    background-image:url(images/triangle_white_mobile.png);
        
    background-position:top left;
        
    background-repeat:no-repeat;
    }


    .
    title_white {
        
    width:320px;
        
    padding-top:20px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    text-align:center;
    }

    .
    title_white p {
        
    font-size:25px;
        
    line-height:35px;
    }

    .
    title_black {
        
    width:320px;
        
    padding-top:20px;
        
    margin-left:auto;
        
    margin-right:auto;
        
    text-align:center;
    }

    .
    title_black p {
        
    font-size:25px;
        
    line-height:35px;
    }

    #feature_image {
        
    color:#333;
        
    margin-right:auto;
        
    margin-left:auto;
        
    width:320px;
        
    height:142px;
    }

    #feature_image img {
        
    width:100%;
    }

    #message {
        
    width:320px;
        
    margin-right:auto;
        
    margin-left:auto;
        
    text-transform:lowercase;
        
    font-family'Graduate'cursive;
        
    font-size:37px;
        
    line-height:55px;
    }

    #message p {
        
    font-size:25px;
        
    line-height:35px;
    }
        } 
    Script

    PHP Code:
    $(document).ready(function() {
      function 
    filterPath(string) {
      return 
    string
        
    .replace(/^\//,'')
        
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
        .
    replace(/\/$/,'');
      }
      var 
    locationPath filterPath(location.pathname);
      var 
    scrollElem scrollableElement('html''body');
     
      $(
    'a[href*=#]').each(function() {
        var 
    thisPath filterPath(this.pathname) || locationPath;
        if (  
    locationPath == thisPath
        
    && (location.hostname == this.hostname || !this.hostname)
        && 
    this.hash.replace(/#/,'') ) {
          
    var $target = $(this.hash), target this.hash;
          if (
    target) {
            var 
    targetOffset $target.offset().top;
            $(
    this).click(function(event) {
              
    event.preventDefault();
              $(
    scrollElem).animate({scrollToptargetOffset}, 1000, function() {
                
    location.hash target;
              });
            });
          }
        }
      });
     
      
    // use the first element that is "scrollable"
      
    function scrollableElement(els) {
        for (var 
    0argLength arguments.length<argLengthi++) {
          var 
    el arguments[i],
              
    $scrollElement = $(el);
          if (
    $scrollElement.scrollTop()> 0) {
            return 
    el;
          } else {
            
    $scrollElement.scrollTop(1);
            var 
    isScrollable $scrollElement.scrollTop()> 0;
            
    $scrollElement.scrollTop(0);
            if (
    isScrollable) {
              return 
    el;
            }
          }
        }
        return [];
      }
     
    }); 
    If you understand where I've gone wrong I would really appreciate some feedback!

    Best wishes

    Matt
    Last edited by metulj; 16.03.13, 15:11.
Working...
X