Parallax Scrolling Issues

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    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;
    position: relative;
    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-width: 768px) and (max-width: 959px) {

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-width: 767px) {

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({scrollTop: targetOffset}, 1000, function() {
            location.hash = target;
          });
        });
      }
    }
  });
 
  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      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.
    Tags: issue, parrallax, responsive, scroll
Previous template Next
Working...
X