Scroll page parallax when I click on navigation menu (Parallax Scrolling)

HTML & CSS
1

due to some issue, its not working. I think I am choosing the wrong id and class.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SNAPCHAT</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
     <script src="js/jquery.stellar.js"></script>
    <script src="js/scrip.js"></script>
    <script src="js/jquery.nicescroll.js"></script>


</head>
<body>
<a id="nav1"></a>
<a id="nav2"></a>
<a id="nav3"></a>
<a id="nav4"></a>

<a href="#" class="back-to-top">Back to Top</a>
   <div id="nav">
    <!-- <div id="logo"><img src=""></div>  -->   

        <ul>
            <li><a href="http://mediacentral.ie/" class="nav-icon" title="Home">Home</span></a></li>    
            <li><a href="nav1">Sponsored Snapchat</a></li>
            <li><a href="nav2">Snapchat Content</a></li>
            <li><a href="nav3">Display Ads</a></li>
            <li><a href="nav4">Media Central</a></li>
        </ul>


</div id="main">

    <div id="nav1" class="image" data-stellar-background-ratio="0.5" >
<!--    <div id="content_1" class="content1">
 -->       


    </div>


    </div>
    </div>


    <div id="nav2" class="image" data-stellar-background-ratio="0.4"  ></div>
<!--     <div id="content_1" class="content2">
 -->        

    </div>

    <div id="nav3" class="image" data-stellar-background-ratio="0.4"  ></div>
<!--     <div id="content_1" class="content3">
 -->        



    </div>

    <div id="nav4" class="image" data-stellar-background-ratio="0.4"  ></div>
<!--     <div id="content_1" class="content4">
 -->        



    </div>

<script type="text/javascript">
// create the back to top button
$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');

var amountScrolled = 300;

$(window).scroll(function() {
    if ( $(window).scrollTop() > amountScrolled ) {
        $('a.back-to-top').fadeIn('slow');
    } else {
        $('a.back-to-top').fadeOut('slow');
    }
});

$('a.back-to-top, a.simple-back-to-top').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;
});
</script>
</body>
</html>

This is my css

* {
    margin: 0 auto;
    padding: 0;
    }
.image {
    height: 750px;
    width: 100%;
    /*background: #55e6c5;*/
    }

.content {
    height: 750px;
    width:100%;
/*     background: white;*/    
    z-index: 2;
}
.content h1 {
    font-size: 40px;
    color: #464646;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    margin: 30px 60px;
}
.content p {
    font-size:20px;
    color: #343434;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    margin: 30px 60px;
}

#nav1 {
    background: url(../images/bg1.png);
    background-attachment: fixed;
    position: relative;
    height: 130%0%;
    padding:80px;
    text-align:center;
     /* width: 100%0%;  */

}
#nav2 {
    background: url(../images/bg2.png);
    background-attachment: fixed;
    position: relative;
    height: 130%0%;
    padding:80px;
    text-align:center;
    /*width: 100%0%;*/  

}
#nav3 {
    background: url(../images/bg3.png) ;
    background-attachment: fixed;
    position: relative;
    height: 130%0%;
    padding:80px;
    text-align:center;
  /* width: 100%0%;  */
}
#nav4 {
    background: url(../Images/bg4.png) ;
    background-attachment: fixed;
    position: relative;
    height: 130%0%;
    padding:80px 80px 0 80px ;
    text-align:center;  
   /*  width: 100%0%;  */

}
#nav {
    height: 70px;
    width: 100%; 
    position: fixed;
    top:5px;
    left:0;
    background: #00000; 
    z-index: 100;

}

a[id= "nav1"]:target ~ div.image {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[id= "nav2"]:target ~ div.image {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}


/*#nav #logo {
    height: 50px;
    width: 50px;
    position: relative;
    top: 0;
    bottom:0;
    margin: auto 100px;
    text-align: left;
}*/

#nav #logo img {
    height: 100%;
    width: 100%;

}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    opacity: 0.6;
  filter: alpha(opacity=60)
}

li {
    float: left;
    padding-left:80px;
}

li a {
    display: inline-block;
    color: #fffc00;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    color: #fff;
}

a.back-to-top {
    display: none;
    width: 60px;
    height: 60px;
    text-indent: -9999px;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
    background: #333 url("../images/up-arrow.png") no-repeat center 43%;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}



#content_1 {position: relative;}*/

a[id= "nav1"]:target ~ #main article.article {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );
}

a[id= "nav2"]:target ~ #main article.article {
    -webkit-transform: translateY( -500px );
    transform: translateY( -500px );
}
a[id= "nav3"]:target ~ #main article.article {
    -webkit-transform: translateY( -1000px );
    transform: translateY( -1000px );
}

Please help me.

this is my code https://jsfiddle.net/vrg9qmp1/

2

The fiddle seems to be working if you are talking about the scroll to top effect?

3

actually I have tried few things since.

My project is here https://www.dropbox.com/s/nod1bqcvnoqm7fj/snapchat_parallax.zip?dl=0

please help. thanks a mil.

4

Hi,

This is too complicated to debug without knowing what you expect and knowing where you got the plugins from as you seem to be mixing them a little.

I can give you a few pointers.

You have duplicate ids which are not allowed.

<a id="nav1"></a> <a id="nav2"></a> <a id="nav3"></a> <a id="nav4"></a> <a href="#" class="back-to-top">Back to Top</a>

Those ones must be unique so the ones in the page need to be renamed to something else.

e.g. You can’t use #nav1,#nav2,#nav3,#nav4 here:

<div id="main">
  <div id="nav1" class="image" data-stellar-background-ratio="0.5" ></div>

If you added an x in fornt of it then the css would target the element like this:

#nav1:target ~ #main #xnav1.image {
    -webkit-transform: translateY( 0px);
    transform: translateY( 0px );

}

Note that .image is not a child of the div but is the actual div itself unlike your original where you were looking for a nested div.

You have heights set here that are incorrect.

height: 130%0%;

It’s unlikely that 130% height would be correct anyway seeing as you are setting the image to 910px high.

.image{
	 height: 910px;
}

As image is a class the height in the id would over-ride it anyway.

You need to refer to the documentation that came with your plugin and start form a simple working base and then build up from there.

1 Like
5

hi, thanks for replying.

When I click on a menu item, it should slowly or smoothly scroll to the respective part.

this is what I wish to achieve.

6

this is updated versionsnapchat_parallax.zip (2.8 MB)

7

Unless I’m misreading your scripts you don’t seem to have a script in place to do that.

You have a script for parallax scrolling and a script to style the scrollbar. Where’s the script for the in page links? Or is it included in one of the above scripts?

8

Oh. I dont have that.

I was trying to implement by self coding in html and css.

Can you please tell me which script is it and if I can get it then including it in the html would work

thanks again.

9

Add something like this to the bottom of the page.

$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});

See here for more details.

1 Like
10

thanks for replying.

it did exactly. but my page is still the same.

I added it like this (just to be sure I did it the right way)

<script type="text/javascript">
    // create the back to top button
    						$('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');

    						var amountScrolled = 300;

    						$(window).scroll(function() {
    							if ( $(window).scrollTop() > amountScrolled ) {
    								$('a.back-to-top').fadeIn('slow');
    							} else {
    								$('a.back-to-top').fadeOut('slow');
    							}
    						});

    						$('a.back-to-top, a.simple-back-to-top').click(function() {
    							$('html, body').animate({
    								scrollTop: 0
    							}, 700);
    							return false;
    							
    						$(document).ready(function(){
    							$('a[href^="#"]').on('click',function (e) {
    								e.preventDefault();

    								var target = this.hash;
    								var $target = $(target);

    								$('html, body').stop().animate({
    									'scrollTop': $target.offset().top
    								}, 900, 'swing', function () {
    									window.location.hash = target;
});
});
});	
    			
</script>
11

What’s wrong with the above code?

You have it correct in your original fiddle.

Have a look and see what you missed.

1 Like
12

oh this is for the for small arrow to bring to top of the page.

I am concerned about the smooth slide down on clicking of a menu item.

13

You did not read my post properly.

You’ve missed the closing brackets from that routine which means you break the next routine.

i.e. this is missing });

This is what that last section should look like.

$('a.back-to-top, a.simple-back-to-top').click(function() {
	$('html, body').animate({
		scrollTop: 0
	}, 700);
	return false;
});

$(document).ready(function(){
	$('a[href^="#"]').on('click',function (e) {
	    e.preventDefault();

	    var target = this.hash;
	    var $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});
3 Likes
14

thanks it worked.

Now, can you also help me in removing the repeating image on the right hand side throughout the site.

15

URL to site?

16

its not live. Its on local.

I have uploaded above my whole project

17

I’m not sure which image you mean. Each section seems to have different images.

18

Add {background-repeat:no-repeat} to each image.

<div data-stellar-background-ratio="0.5" class="image" id="nav1" style="background-position: 0px 0px; background-repeat: no-repeat;"></div>

Curious: Why not assign these styles via a class?

Question: How does one know what values can be used to style a background image?
Answer: This is one of many resources… You should have resources bookmarked for quick easy access.
http://www.w3schools.com/cssref/css3_pr_background.asp

19

The horizontal repeat on all images is apparently the multiple that the OP is referring to.

20

thanks for replying guys.

I am referring to the image on the right hand side of the site.

see attachment.

1366×768 210 KB