CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Spratters53
Spratters53

Reputation: 415

parallax backgrounds don't line up properly

What I have is a website with a parallax opening page. Unfortunately, the text sections appear to be interfering with the scrolling backgrounds so that as the page scrolls the bottom parallax image (which should be the size of a pc monitor and then with text overlaying it) is repeated rather than being horizontally centered.

I'm using foundation with my own simple javascript parallax function, however as I'm relatively inexperienced with javascript I'm struggling to fix the problem.

What it seems like the fix should be is to add some padding to the top of the "home-image-3" section, but when I do this the image is still split (repeating) and a margin is added to the text-section and doesn't stop the repeating image. Therefore I need a different solution.

You can see the problem in action here http://r3gamers.com/spratters53/

Take note that images 1 and 2 (the keyboard and building) work perfectly, and image 3 (the ps4) begins again right at the bottom of the image. It's barely noticable, and yet it's annoying that the image isn't aligned properly.

HTML

<!doctype html>
<html class="no-js" lang="en">
  <head>
<link rel="icon" type="image/png" href="img/favicon.png">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dan Spratling | Portfolio</title>
    <link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/foundation.css" />
</head>

<body class="darkgrey">
<div class="fixed shadow" id="includeHeader"></div>

<div class="large-12 text-center paddingtb-20">
    <h1>Welcome!</h1>
    <h3>Take a look around. Make yourself at home!
</div>

<section id="home-image" data-speed="6" data-type="background">
</section>

<section id="home" data-speed="4">
    <div id="#robin" class="fullwidth row padding-10">
        <div class="large-8 large-centered medium-12 small-12 columns">
            <h2>I am a web developer</h2>
            <h4>Need a website created or updated?  Get in touch!</h4>
            <br/><br/>
            I've been developing websites for 3 years, since I started university. When I started university, most of the subject was new to me, having only studied database theory before. 
            Since 2012, I've tried my hand at many different forms of computing however I've found that I love developing websites, especially the front end (<i>how it looks</i>).
            I'm now looking for work in Devon to help enhance my ability and start working in a commercial environment.
        </div>
    </div>
</section>

<section id='home-image-2' data-speed='6' data-type='background'></section>

<section id="home" data-speed="4">
    <div id="#robin" class="fullwidth row padding-10">
        <div class="large-8 large-centered medium-12 small-12 columns">
            <h2>I began learning my craft at Plymouth University</h2>
            <h4>But my learning never really stops! </h4>
            <br/><br/>
            I studied computing, covering a range of subjects. Web development isn't my only skill, it's what I love, but I've had experience working with so much more. 
            Due to the nature of the course, I have worked with C#, C, ASP.NET, Java, HTML, CSS, Javascript, PHP .. and that's just coding languages! I've worked with MySQL, SQL Server, and Oracle databases. 
            On top of programming, I've had a lot of experience working with the "business end" of software development, meaning that I am able to do (or understand) a lot more than just coding up a design that's been made for me. 
            <br/>I've had to:
            <br/>
            <ul>
                <li>Design projects from just an idea; creating proper design documentation such as Entity Relationship Diagrams and Concept Maps</li>
                <li>Test on the go; by myself, and with real users, getting as much feedback as possible</li>
                <li>Work with a team; using methodologies such as Agile (SCRUM) to help this process</li>
                <li>Create projects which have both a short (less than a month) and long (up to a year) development schedule</li>
                <li>Learn on the go! - I don't know everything, but I'm persistent and dedicated and will always find a way to complete my objective</li>
            </ul>
        </div>
    </div>
</section>

<section id='home-image-3' data-speed='6' data-type='background'></section>

<section id="home" data-speed="4">
    <div id="#robin" class="fullwidth row padding-10">
        <div class="large-8 large-centered medium-12 small-12 columns">
            <h2>I am a gamer, among other things</h2>
            <h4>After all, you can't work all the time!</h4>
            <br/><br/>
            While I love developing websites, everybody needs some time for their hobbies. In my spare time I love to play video games. Maybe it's because it's so diverse, being both social and mentally stimulating in many ways.
            Living in Plymouth also provides a great opportunity to visit local beaches and go on the occasional day out surfing.
        </div>
    </div>
</section>

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>
<script src="js/vendor/modernizr.js"></script>
<script>
        $("#includeHeader").load("Navigation.html");
</script>
<script src="js/parallax.js"></script>
</body>

parallax.js

$(document).ready(function(){
   // cache the window object
   $window = $(window);

   $('section[data-type="background"]').each(function(){
     // declare the variable to affect the defined data-type
     var $scroll = $(this);

      $(window).scroll(function() {
        // HTML5 proves useful for helping with creating JS functions!
        // also, negative value because we're scrolling upwards                             
        var yPos = -($window.scrollTop() / $scroll.data('speed')); 

        // background position
        var coords = '50% '+ yPos + 'px';

        // move the background
        $scroll.css({ backgroundPosition: coords });    
      }); // end window scroll
   });  // end section function
}); // close out script

//creates html5 element in IE
document.createElement("section");

CSS

.darkgrey {
    background-color: rgb(30,30,30);
}

.shadow {
    box-shadow: 0px 0px 10px 2px black;
}

.border {
    border-style: solid;
    color: black;
    border-width: 1px;
}

div.overlay {
    position: absolute;
    top: 0px;
}

a.darken {
    display: block;
    background: black;
}

a.darken img {
    display: block;
    opacity: 0.9;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.25;         
}

h2.brighten, h4.brighten{
    display: block;
    opacity: 0;
    color: white;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover h2.brighten, a.darken:hover h4.brighten{
    opacity: 1;
}

.caption { 
  position: absolute;
  top: 40%;
  left: 0px;
  color: #ffffff; 
  text-align:center; 
  font-weight:bold; 
  opacity:0.7; 
  z-index: 10;
}

.relative {
    position: relative;
}

.fullwidth {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   max-width: 80% !important;
}

.fullheight {
    height: 100% !important;
}

.padding-10 {
    padding: 10px;
    margin-bottom: 0;
}

.padding-20 {
    padding: 20px;
}

.paddingtb-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.paddingtb-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.margin-10 {
    margin: 10px;
}

.margin-20 {
    margin: 20px;
}

.margintb-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.margintb-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.lightborder {
    border: 1px #5C5B5A solid;
    border-radius: 3px;
    transition: transform 500ms ease-in-out;
}

#home-image {
    background: url(../img/keyboard.jpg) 50% 0 fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

@media (max-width: 1280px) {
    #home-image {
        background: url(../img/keyboard1280.jpg) 50% 0 fixed;
        padding: 200px 0;
    }
}

@media (max-width: 760px) {
    #home-image {
        background: url(../img/keyboard720.jpg) 50% 0 fixed;
        padding: 100px 0;
    }
}

@media (max-width: 480px) {
    #home-image {
        background: url(../img/keyboard480.jpg) 50% 0 fixed;
        padding: 60px 0;
    }
}

#home-image-2 {
    background: url(../img/plymouth.jpg) 50% 0 fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

@media (max-width: 1280px) {
    #home-image-2 {
        background: url(../img/plymouth.jpg) 50% 0 fixed;
        padding: 200px 0;
    }
}

@media (max-width: 760px) {
    #home-image-2 {
        background: url(../img/plymouth720.jpg) 50% 0 fixed;
        padding: 100px 0;
    }
}

@media (max-width: 480px) {
    #home-image-2 {
        background: url(../img/plymouth480.jpg) 50% 0 fixed;
        padding: 60px 0;
    }
}

#home-image-3 {
    background: url(../img/console.jpg) 50% 0 fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

@media (max-width: 1280px) {
    #home-image-3 {
        background: url(../img/console1280.png) 50% 0 fixed;
        padding: 200px 0;
    }
}

@media (max-width: 760px) {
    #home-image-3 {
        background: url(../img/console720.png) 50% 0 fixed;
        padding: 100px 0;
    }
}

@media (max-width: 480px) {
    #home-image-3 {
        background: url(../img/console480.png) 50% 0 fixed;
        padding: 60px 0;
    }
}

Upvotes: 1

Views: 889

Answers (1)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

A small change will fix what I believe is your problem. Simply stop the PS4 background repeating and set the background white...

#home-image-3 {
    background: rgb(255, 255, 255) url(../img/console.jpg) 50% 0 fixed no-repeat;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

Upvotes: 1

Related Questions