How to Create a Scrolling Parallax Website

Posted in Coding, HTML & CSS, Tutorials • Posted on 31 Comments

Parallax websites are one of the latest and biggest trends on the web for some time now. If you want to impress your clients or implement immediate impact on your site, this is a good choice for you. In this tutorial, I’ll teach you how to create a simple but beautiful parallax website that will create an illusion of 3D depth to your site. It will surely catch your viewers’ attention. So let’s dig in.

Introduction to Parallax

According to Wikipedia, Parallax came from the Greek word παράλλαξις (parallaxis) meaning, “alteration”. It is the displacement or the difference in the apparent position of an object viewed along two different lines of sight. This Parallax scrolling effect became popular back in the days when Nike released its stunning and brilliant design website named “Nike Better World” as support to the athletes around the world. The website had achieved a lot of good reviews from different sites for its amazing Parallax scrolling effects and web design. Parallax has existed since 1980’s and was used in video game titles and later was used on websites. Today, it is one of the most widely-used designs on the modern Web.

Parallax Website Examples

To show you how this Parallax scrolling effect looks like I’ve collected sites that utilize the Parallax scrolling effect. Check out the following examples below.

brokentwill

bettybetty

express

unfold

The Design Concept

Since Christmas Season is just around the corner, we created a Christmas type mock-up design in Photoshop.

parallax

Resources You Will Need to Complete This Tutorial:

File Structure

For our file structure, we will create three folders and one HTML file:

  • index.html – this will serve as our main file. All of our designs will be utilized on this file.
  • js folder – for our JavaScript/jQuery
  • img folder – for our images
  • css folder – for our styling (CSS)

file-folder

The HTML Markup

On our HTML file, we will add first the HTML5 doctype and series of links on our head section. This will include our link to the CSS file and Google fonts links followed by our jQuery library file.

<!DOCTYPE html>
<html lang="en">
  <head>
	   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Creating a Simple Parallax Scrolling Website</title>
       <link rel="stylesheet" href="css/style.css"/>
	   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
       <link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'>
	   <link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'>
	   <link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
	   <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
	   <link href='http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911' rel='stylesheet' type='text/css'>
	<script>

</head>

Let’s skip the jQuery code and discuss it later. For now, let’s continue with the HTML elements. We will add a header tag with the logo and navigation inside. The navigation will link to the specific slides. Later, we will add a smooth scrolling effect to make it look good.

<body>

<header id="header">
<div>
<div id="logo"><a href=""> PARALLAX </a></div>

<nav id="nav">
	<ul>
	<li><a href="#slide1" title="Next Section" >Slide 1</a></li>
	<li><a href="#slide2" title="Next Section">Slide 2</a></li>
	<li><a href="#slide3" title="Next Section">Slide 3</a></li>
	<li><a  href="#slide4" title="Next Section">Slide 4</a></li>
	<li><a href="#slide5" title="Next Section">Slide 5</a></li>
	</ul>
</nav>
</div>
</header>

Next let’s add the slides. We will put an ID to each slide which corresponds to its sequence. Inside of each slide, we will put a class of content to center the elements.

	<div id="slide1">
		<div>
			<div id="christmas_tree"> </div>
			<div id="snowflakes1"></div>
			<div id="snowflakes2"></div>
            <h2>MERRY</h2>
		    <h1>CHRISTMAS</h1>
		    <div id="divider"> </div>
		     <h3>HAPPY NEW YEAR </h3>
           <div id="ribbon"></div>
	       <div id="new_year"> </div>
		</div>
    </div>

	<div id="slide2">
		<div >
            <div>
		    <h3>“Then the Grinch thought of something he hadn't before! What if Christmas, he thought, doesn't come from a store. What if Christmas...perhaps...means a little bit more!”</h3>
		  <img src="img/dr-seuss.png" align="left"/> <h4>Dr. Seuss </h4>
		</div>
		</div>
    </div>

   <div id="slide3">
		<div>
			   <div>
		       <h3>“I truly believe that if we keep telling the Christmas story, singing the Christmas songs, and living the Christmas spirit, we can bring joy and happiness and peace to this world.”  </h3>
		      <img src="img/norman.png" align="left"/> <h4>Norman Vincent Peale </h4>
		    </div>
		</div>
    </div>

	<div id="slide4">
		<div>
              <div>
		    <h3>“Christmas doesn't come from a store, maybe Christmas perhaps means a little bit more....” </h3>
		  <img src="img/dr-seuss.png" align="left"/> <h4>Dr. Seuss </h4>
		</div>
		</div>
    </div>

	<div id="slide5">
		<div>
           <div>
		    <h3>“My idea of Christmas, whether old-fashioned or modern, is very simple: loving others. Come to think of it, why do we have to wait for Christmas to do that?” </h3>
		    <img src="img/bob.png" align="left"/> <h4>Bob Hope </h4>
		  </div>
		<div id="copyright"><a href="http://www.1stwebdesigner.com/">Copyright 1stwebdesigner.com </a></div>
		</div>

    </div>
</body>
</html>

Now that we already put all of the HTML elements, our site will look like this.

html

The CSS

We need to do our CSS general styling first. Let’s start by adding styles to our body tag as well as H1, H2, and H3 tags. We will set the font “Museo 700” as our fonts for our H1-H3 tags. We will put shadows on each of them.


body{
	margin: 0;
	padding: 0;
	width: 100%;
}

h1 {
    font-family:"Arvo";
	font-weight:normal;
	font-size: 55px;
	text-align: center;
	color: #fff;
	margin: 0;
	padding: 0;
}

h2 {
   font-family:"Arvo";
   font-weight: normal;
   font-size: 40px;
   text-align: center;
   color: #fff;
   margin: 0;
	padding: 0;
}

h3 {
   font-family: Oswald;
   font-weight: normal;
   font-size: 16px;
   text-align: center;
   margin: 5px 0;
	padding: 0;
	z-index: 1;
	position: relative;
}

Next let’s add the other general styling. This will include the positioning of the elements on screens as well as the container of each slides.


.center { margin: 0 auto; }
.content{ margin: 0 auto; width: 960px; }
.clear { clear: both; }

Now let’s go style the header section. We will add an image with a black background and add 60% opacity to the header, which will hold the logo and the navigation. For the logo, we will float it to the left and for the navigation we will float it to the right. 

#header {
	width: 100%;
	background: url('../img/header-bg.png');
	height: 80px;
	position: fixed;
	margin-top: 30px;
}

#nav { width: 410px; float: right; margin-top: 20px; }
#logo a { color: #fff; text-decoration: none; float: left; font-size: 30px; margin-top: 20px; color: #fff; font-family:"Wellfleet"; font-weight: bold; }
#nav ul{
	list-style: none;
	display: block;
	margin: 0 auto;
	list-style: none;
}

#nav li{
	margin-top: 9px;
	float: left;
	padding-left: 21px;
}

#nav li a { color: #fff; opacity:0.6; font-size: 16px; text-decoration: none; font-family: 'Wellfleet'; }
#nav li a.active { color: #fff; opacity:1; border-bottom: 2px solid #fff; }
#nav li a:hover { color: #fff; opacity:1;  }

Then, let’s add styles to our quotes, author and images as well as to the quotes container.

.quotes {
 font-family: 'Goudy Bookletter 1911', serif;
   font-weight: normal;
   font-size: 30px;
  text-align: left;
  margin: 50px auto;
}

 .author_name_white { font-family:"Wellfleet";  margin: 70px 0 0 75px; color: #fff; font-size: 20px; }
 .author_name_gray { font-family:"Wellfleet";  margin: 70px 0 0 75px; color: #94a4a4; font-size: 20px; }
 .quotes_container { width: 800px; margin: 0 auto; }
#christmas_tree { background: url('../img/christmas-tree.png')no-repeat; width: 48px; height: 77px; margin: 0 auto; position: relative; bottom: -35px;}
#divider { background: url('../img/divider.png')no-repeat; width: 300px; height: 35px; margin: 0px auto 27px auto; }
#ribbon { background: url('../img/ribbon.png')no-repeat; width: 251px; height: 48px; margin: 0 auto;  display: block; position: relative; top: -38px; }
#snowflakes1 { background: url('../img/snowflakes.png')no-repeat; width: 24px; height: 21px; margin: 0 auto;  display: block; position: relative; bottom: -54px; left: -102px; }
#snowflakes2 { background: url('../img/snowflakes.png')no-repeat; width: 24px; height: 21px; margin: 0 auto;  display: block; position: relative; bottom: -33px;  right: -100px; }

Each slide will have a background image or white background color with fixed position. We also need to add some padding to each slide to center the elements inside it.


#slide1, #slide2{ width: 100%; }
#slide1{
	background:url('../img/slide1.jpg') 50% 0 no-repeat fixed;
	color: #fff;
	height: 600px;
	margin: 0;
	padding: 200px 0 260px 0;
	background-size: cover;
}

#slide2{
	background-color: #fff;
	color: #333333;
	height: 300px;
	margin: 0 auto;
	overflow: hidden;
	padding: 200px 0;
}

#slide3{
	background: url(../img/slide3.jpg) 50% 0 no-repeat fixed;
	color: #fff;
	height: 600px;
	padding: 170px 0 0 0;
	background-size: cover;
}

#slide4{
	background-color: #fff;
	color: #333333;
	height: 300px;
	padding: 200px 0;
}

#slide5{
	background: url(../img/slide5.jpg) 50% 0 no-repeat fixed;
	height: 200px;
	margin: 0 auto;
	padding: 250px 0;
	color: #fff;
	background-size: cover;
}

Lastly, we will style our copyright text and center it to the screen.

#copyright  { color: #fff; font-family:"Wellfleet";  font-size: 14px; margin-top: 100px; text-align: center;  }
#copyright  a { text-decoration: none; color: #fff;  }

Now that we put all of our CSS styles, the look of our site will look like exactly the same with our PSD design.

The jQuery

Let’s put this Parallax site into life. On the head section, we are going to add the following jQuery codes. Check the Reference URL.

$(document).ready(function() {
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
            $("#nav li a").removeClass("active");
            $(this).addClass('active');
$('html, body').animate({scrollTop: targetOffset}, 1000);
return false;
});
}
}
});

});

On this part of the jQuery code, we’re creating a click event handler to all the links that have “#” symbol anywhere in the href. The very next line, we will check if the link is pointing to the same page by checking for a match between location.pathname and this.pathname. We can then make sure that the link includes a qualified URL or just an identifier.

$(document).ready(function() {
  $('a[href*=#]').each(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
 var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
 var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
 var targetOffset = $target.offset().top;

For this part, when the user click the menu link, it will remove the class active on that current active menu link and add it to that menu link that the user has clicked. This will also scroll to the target div id section.

$(this).click(function() {
            $("#nav li a").removeClass("active");
            $(this).addClass('active');
           $('html, body').animate({scrollTop: targetOffset}, 1000);
           return false;
         });
      }
    }
  });
});

Tips: You can also make the speed of the scrolling effect faster or slower by simply by changing the value of 1000. (1000 means 1000 milliseconds). You might also want to use the value “fast” (200 milliseconds) or “slow” (600 milliseconds). Take note that the default is 400 milliseconds. It depends on what you need or want.

$('html, body').animate({scrollTop: targetOffset}, 1000);

Final Words

Parallax scrolling effects are slowly being implemented on a lot of  sites across the Web. If you take the time to look for more inspiration around the Web, you will see a lot of advance Parallax sites that will blow your mind.

Today I’ve shown you how to do a relatively simple parallax scrolling website; you can play around with it and improve it. Hope you enjoyed this tutorial. Please feel free to leave links, comment or suggest if you learned in this tutorial. Until next time!

50 Written ArticlesGoogle+

is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

31 Comments Best Comments First
  • Johnathan

    Tuesday, December 17th, 2013 17:18

    2

    Unless I’m missing something your demo doesn’t seem to have any parallax effect at all. It’s just a one-page template. I viewed demo on Chrome and Firefox on OS X Mavericks.

    +25
    • Sam Norton

      Tuesday, December 17th, 2013 22:40

      7

      Hi guys, this is a simple version of parallax that displace background images using fixed position, I added scrolling effect to make it look good. I wasn’t able to add the 3D depth effect maybe for another tutorial I will. The purpose of this tutorial is to give you an idea how it works and what is parallax.

      -8
      • Kamrul Hasan

        Saturday, December 21st, 2013 07:23

        19

        language should be more easy

        +1
      • Johnathan

        Wednesday, December 18th, 2013 17:29

        12

        I disagree with you. You’re title is labeled as ‘parallax’. Without the ‘3d depth’ then you’re tutorial is completely irrelevant.

        The definition of parallax, cited from Google, is “the effect whereby the position or direction of an object appears to differ when viewed from different positions”. Whereas your background images in your demo are “fixed”.

        Please update this article and stop misleading people. I have unsubscribed from this site after seeing this. I could argue all day, however I have sites to build with actual parallax effects.

        +6
        • Ding

          Thursday, February 27th, 2014 01:36

          28

          Fixed background is a kind of parallax scrolling. Yes, maybe you are right. We can achieve such parallax effect easily with hundreds of JQuery plugins on the internet.

          But what I want to say is that the author just wants to show something to you guys, and he could of course hide what he has and leave here, does anyone want that happens?

          Thanks to everyone comments here, especially to the author, thank you very much to devote your time here.

          0
    • steve

      Monday, February 10th, 2014 16:38

      26

      This example is parallax.
      Personally not a fan of its use in most cases, I do think it looks cool, but I have a feeling its going to seem dated quickly. So many sites do it poorly, or do it just to look cool with no regard to the user. Just because you can doesn’t mean you should. Thanks for the tutorial.

      -2
  • Petr

    Thursday, December 19th, 2013 08:19

    16

    I just wanted to add additional source and parallax inspiration with witty Xmas animation with holiday greetings!! I love it and I think they have done perfect job!!! The funny way how they put the animation from creation to the final stage!!! #parallax #css #html5 #loveit #thebestxmasparallaxgreetingtheme #findmebetterone
    http://ihatetomatoes.net/merry-christmallax/

    +21
  • Petr

    Tuesday, December 17th, 2013 18:37

    3

    Very good case study Sam of your parallax effect web site. Thanks for the post of going trough and explaining things.
    I recently found excellent parallax demo with some very cool effects during the scrolling on this page http://ihatetomatoes.net/parallax-scroll-effect-scrollr-js/
    Check it out!

    +15
  • Alex Flueras

    Tuesday, December 17th, 2013 22:18

    6

    Completely agree with Jonathan, there is no parallax effect. I used FF 25.0.1.

    +12
  • Romnick Pallasigui

    Wednesday, December 18th, 2013 00:07

    8

    Parallax tutorials are great but sometimes may not work on apple products but this one is a good tutorial for starters. A good point here is that since its a one page template you don’t need to confuse your readers about the different pages and also scrolling navigation adds up to the value of the parallax site.

    You can use some javascrpt to add 3D depth next time it would look a lot better. Good tutorial!

    +7
  • Robin Reyes

    Wednesday, December 18th, 2013 00:12

    9

    Very cool work on the parallax technique. There are so many different ones out there it gets kind of mind-numbing. Using background:cover with fixed attachment is different thing altogether. Parallax is something where we control speed/direction of multiple elements. and in this tutorial we explained its simplest form, you can play around with more elements with different speeds/directions in order to create the illusion of 3D depth next time. But a great tutorial for starters

    K.I.S.S all the way! Cheers!

    +5
  • Frank

    Wednesday, December 18th, 2013 09:09

    11

    It does not work in my FF browser. Perhaps there are too many requests to other pages need, which I am blocking.
    But anyway, the result is, it does not work.

    +4
  • Gerry

    Tuesday, December 17th, 2013 10:58

    1

    It is unfortunate that many parallax sites do not work well on the ipad.

    I have found a few, and there are questions regarding this on stack overflow, but when there are ‘how-to” manuals and examples, it is rarely discussed.

    It affects many tablets and phones, not just apple’s.

    +3
    • ralph

      Thursday, December 19th, 2013 06:23

      15

      It’s well known that ‘position: fixed’ and touchscreen don’t go well together. The latest OS’s do already a much better job and handle it pretty good (no jumping ‘position: fixed’ elements when scrolling|, but the overall support is still pretty poor.

      -1
  • KASHYAP

    Tuesday, December 17th, 2013 21:59

    5

    simply awesome … just say ” WOW ” n BIG THANK YOU FOR PROVIDING SUCH TYPES OF TUTORIALS …

    +3
  • Jon Waterschoot

    Thursday, December 19th, 2013 04:42

    14

    Thank you for this tutorial, playing around with your example gave me some great new insights. As others mentioned, next step: how to create the different scrolling speeds.
    On the other hand – this one paged website looks pretty good on mobile devices, and this without any extra coding – so that’s a plus. Now if only iOS would support ‘background-size: cover;’
    Only thing I’d like to find out is how to make the links in the navigation active when scrolling – in your example this only works upon click events.
    I used your template for a small project about traffic around my sons school: http://jon-ibe.be/tgroendrieske/verkeer/
    Thank you!

    +3
  • Brey

    Friday, February 14th, 2014 07:56

    27

    Nice tut, not parallax though. You should mention that instead of misleading people.

    +3
  • Donald

    Thursday, December 19th, 2013 09:05

    17

    Awesome tutorial. This has improved the little skills I have in web design.
    I have learnt a lot today.

    Cheers Sam!

    +2
  • Dakshina

    Tuesday, December 17th, 2013 21:32

    4

    Looks pretty interesting. Just in time article for my next web site to create. Thanks a lot :)

    +2
  • Bestmaster99

    Friday, January 31st, 2014 03:37

    25

    Thanks for the Parallax website tutorial. I really enjoyed it! :) While I was going through your tutorial step by step, I notice a few missing codes and a stray tag when I view the source code for some of the screenshot. Hopefully, the codes that I identified can help you to improve on your tutorial for others. ^_^

    Counting from HTML MarkUp

    Screenshot 1: A stray tag

    Screenshot 3:

    class=”quotes_container”, class=”author_name_gray” are missing for slide 2,3,4,5 in the tag

    class=”quotes” missing for slide 2 in the tag
    class=”content” missing for slide 1-5 in the tag
    id=”ribbon” missing for slide 1 in the tag

    Counting from HTML MarkUp

    Screenshot 3:
    #nav li a.active {
    //lines of code} should be colon, : , after a not dot

    Screenshot 2:
    .clear and .center, I am wondering if it is necessary because when I downloaded the demo I couldn’t
    find these class selectors in index.html, hence it doesn’t seems to have any effect when styling in
    css.

    +2
  • David

    Saturday, December 21st, 2013 11:09

    20

    Parallax has that wow factor for sure when done well. The most effective use of a one page parallax design from what I’ve seen is to use the scrolling and images to tell a story.

    +2
  • Rachid

    Wednesday, January 15th, 2014 17:12

    22

    i like this tutorial and i love it , it’s good one for beginners

    +1
  • Roy

    Wednesday, March 5th, 2014 11:09

    30

    Don’t use the old & deprecated align attribute on those image tags!

    +1
  • Mostafa

    Thursday, December 26th, 2013 16:02

    21

    Thank you for this tutorial , the examples are very creative .

    +1
  • Gerry

    Saturday, March 1st, 2014 15:55

    29

    how exactly do you remove the white from the alternate slides?

    0
  • Nahid

    Thursday, March 13th, 2014 10:47

    31

    This is very much helpful……….As a web designer i can say this is awesome.

    0
  • Bishwajit

    Wednesday, December 18th, 2013 01:51

    10

    NHS website that you shared is the best I have seen in my life.

    0
  • Nads

    Friday, January 17th, 2014 02:26

    23

    Great tutorial tho its too easy. but not bad for a start. Thanks!! However u missed some classes in the div, for e.g ”. Luckily the source code is available. ;-)

    0
  • William Forrest

    Wednesday, December 18th, 2013 20:40

    13

    Not bad for a simple parallax website. Will try this later..

    -1
  • Darwin Caasi

    Monday, January 27th, 2014 00:57

    24

    Hello.. its a good tutorial for beginners. Can you re upload the full source files? Thank you.. or just send me an email.. thank you so much! :D

    -2
  • Zeshan Ahmed

    Friday, December 20th, 2013 03:37

    18

    Disappointed! You should have shown the examples websites of parallax effect at the end of the tutorials. You first showed them, and when I thought it’s going to be amazing tutorial, you end up with extremely simple one page website -_-

    Seriously wasted my time here.

    Thanks.

    -7
  • Nahid

    Thursday, March 13th, 2014 10:47

    31

    This is very much helpful……….As a web designer i can say this is awesome.

    0
  • Roy

    Wednesday, March 5th, 2014 11:09

    30

    Don’t use the old & deprecated align attribute on those image tags!

    +1
  • Gerry

    Saturday, March 1st, 2014 15:55

    29

    how exactly do you remove the white from the alternate slides?

    0
  • Brey

    Friday, February 14th, 2014 07:56

    27

    Nice tut, not parallax though. You should mention that instead of misleading people.

    +3
  • Bestmaster99

    Friday, January 31st, 2014 03:37

    25

    Thanks for the Parallax website tutorial. I really enjoyed it! :) While I was going through your tutorial step by step, I notice a few missing codes and a stray tag when I view the source code for some of the screenshot. Hopefully, the codes that I identified can help you to improve on your tutorial for others. ^_^

    Counting from HTML MarkUp

    Screenshot 1: A stray tag

    Screenshot 3:

    class=”quotes_container”, class=”author_name_gray” are missing for slide 2,3,4,5 in the tag

    class=”quotes” missing for slide 2 in the tag
    class=”content” missing for slide 1-5 in the tag
    id=”ribbon” missing for slide 1 in the tag

    Counting from HTML MarkUp

    Screenshot 3:
    #nav li a.active {
    //lines of code} should be colon, : , after a not dot

    Screenshot 2:
    .clear and .center, I am wondering if it is necessary because when I downloaded the demo I couldn’t
    find these class selectors in index.html, hence it doesn’t seems to have any effect when styling in
    css.

    +2
  • Darwin Caasi

    Monday, January 27th, 2014 00:57

    24

    Hello.. its a good tutorial for beginners. Can you re upload the full source files? Thank you.. or just send me an email.. thank you so much! :D

    -2
  • Nads

    Friday, January 17th, 2014 02:26

    23

    Great tutorial tho its too easy. but not bad for a start. Thanks!! However u missed some classes in the div, for e.g ”. Luckily the source code is available. ;-)

    0
  • Rachid

    Wednesday, January 15th, 2014 17:12

    22

    i like this tutorial and i love it , it’s good one for beginners

    +1
  • Mostafa

    Thursday, December 26th, 2013 16:02

    21

    Thank you for this tutorial , the examples are very creative .

    +1
  • David

    Saturday, December 21st, 2013 11:09

    20

    Parallax has that wow factor for sure when done well. The most effective use of a one page parallax design from what I’ve seen is to use the scrolling and images to tell a story.

    +2
  • Zeshan Ahmed

    Friday, December 20th, 2013 03:37

    18

    Disappointed! You should have shown the examples websites of parallax effect at the end of the tutorials. You first showed them, and when I thought it’s going to be amazing tutorial, you end up with extremely simple one page website -_-

    Seriously wasted my time here.

    Thanks.

    -7
  • Donald

    Thursday, December 19th, 2013 09:05

    17

    Awesome tutorial. This has improved the little skills I have in web design.
    I have learnt a lot today.

    Cheers Sam!

    +2
  • Petr

    Thursday, December 19th, 2013 08:19

    16

    I just wanted to add additional source and parallax inspiration with witty Xmas animation with holiday greetings!! I love it and I think they have done perfect job!!! The funny way how they put the animation from creation to the final stage!!! #parallax #css #html5 #loveit #thebestxmasparallaxgreetingtheme #findmebetterone
    http://ihatetomatoes.net/merry-christmallax/

    +21
  • Jon Waterschoot

    Thursday, December 19th, 2013 04:42

    14

    Thank you for this tutorial, playing around with your example gave me some great new insights. As others mentioned, next step: how to create the different scrolling speeds.
    On the other hand – this one paged website looks pretty good on mobile devices, and this without any extra coding – so that’s a plus. Now if only iOS would support ‘background-size: cover;’
    Only thing I’d like to find out is how to make the links in the navigation active when scrolling – in your example this only works upon click events.
    I used your template for a small project about traffic around my sons school: http://jon-ibe.be/tgroendrieske/verkeer/
    Thank you!

    +3
  • William Forrest

    Wednesday, December 18th, 2013 20:40

    13

    Not bad for a simple parallax website. Will try this later..

    -1
  • Frank

    Wednesday, December 18th, 2013 09:09

    11

    It does not work in my FF browser. Perhaps there are too many requests to other pages need, which I am blocking.
    But anyway, the result is, it does not work.

    +4
  • Bishwajit

    Wednesday, December 18th, 2013 01:51

    10

    NHS website that you shared is the best I have seen in my life.

    0
  • Robin Reyes

    Wednesday, December 18th, 2013 00:12

    9

    Very cool work on the parallax technique. There are so many different ones out there it gets kind of mind-numbing. Using background:cover with fixed attachment is different thing altogether. Parallax is something where we control speed/direction of multiple elements. and in this tutorial we explained its simplest form, you can play around with more elements with different speeds/directions in order to create the illusion of 3D depth next time. But a great tutorial for starters

    K.I.S.S all the way! Cheers!

    +5
  • Romnick Pallasigui

    Wednesday, December 18th, 2013 00:07

    8

    Parallax tutorials are great but sometimes may not work on apple products but this one is a good tutorial for starters. A good point here is that since its a one page template you don’t need to confuse your readers about the different pages and also scrolling navigation adds up to the value of the parallax site.

    You can use some javascrpt to add 3D depth next time it would look a lot better. Good tutorial!

    +7
  • Alex Flueras

    Tuesday, December 17th, 2013 22:18

    6

    Completely agree with Jonathan, there is no parallax effect. I used FF 25.0.1.

    +12
  • KASHYAP

    Tuesday, December 17th, 2013 21:59

    5

    simply awesome … just say ” WOW ” n BIG THANK YOU FOR PROVIDING SUCH TYPES OF TUTORIALS …

    +3
  • Dakshina

    Tuesday, December 17th, 2013 21:32

    4

    Looks pretty interesting. Just in time article for my next web site to create. Thanks a lot :)

    +2
  • Petr

    Tuesday, December 17th, 2013 18:37

    3

    Very good case study Sam of your parallax effect web site. Thanks for the post of going trough and explaining things.
    I recently found excellent parallax demo with some very cool effects during the scrolling on this page http://ihatetomatoes.net/parallax-scroll-effect-scrollr-js/
    Check it out!

    +15
  • Johnathan

    Tuesday, December 17th, 2013 17:18

    2

    Unless I’m missing something your demo doesn’t seem to have any parallax effect at all. It’s just a one-page template. I viewed demo on Chrome and Firefox on OS X Mavericks.

    +25
    • Sam Norton

      Tuesday, December 17th, 2013 22:40

      7

      Hi guys, this is a simple version of parallax that displace background images using fixed position, I added scrolling effect to make it look good. I wasn’t able to add the 3D depth effect maybe for another tutorial I will. The purpose of this tutorial is to give you an idea how it works and what is parallax.

      -8
      • Johnathan

        Wednesday, December 18th, 2013 17:29

        12

        I disagree with you. You’re title is labeled as ‘parallax’. Without the ‘3d depth’ then you’re tutorial is completely irrelevant.

        The definition of parallax, cited from Google, is “the effect whereby the position or direction of an object appears to differ when viewed from different positions”. Whereas your background images in your demo are “fixed”.

        Please update this article and stop misleading people. I have unsubscribed from this site after seeing this. I could argue all day, however I have sites to build with actual parallax effects.

        +6
        • Ding

          Thursday, February 27th, 2014 01:36

          28

          Fixed background is a kind of parallax scrolling. Yes, maybe you are right. We can achieve such parallax effect easily with hundreds of JQuery plugins on the internet.

          But what I want to say is that the author just wants to show something to you guys, and he could of course hide what he has and leave here, does anyone want that happens?

          Thanks to everyone comments here, especially to the author, thank you very much to devote your time here.

          0
      • Kamrul Hasan

        Saturday, December 21st, 2013 07:23

        19

        language should be more easy

        +1
    • steve

      Monday, February 10th, 2014 16:38

      26

      This example is parallax.
      Personally not a fan of its use in most cases, I do think it looks cool, but I have a feeling its going to seem dated quickly. So many sites do it poorly, or do it just to look cool with no regard to the user. Just because you can doesn’t mean you should. Thanks for the tutorial.

      -2
  • Gerry

    Tuesday, December 17th, 2013 10:58

    1

    It is unfortunate that many parallax sites do not work well on the ipad.

    I have found a few, and there are questions regarding this on stack overflow, but when there are ‘how-to” manuals and examples, it is rarely discussed.

    It affects many tablets and phones, not just apple’s.

    +3
    • ralph

      Thursday, December 19th, 2013 06:23

      15

      It’s well known that ‘position: fixed’ and touchscreen don’t go well together. The latest OS’s do already a much better job and handle it pretty good (no jumping ‘position: fixed’ elements when scrolling|, but the overall support is still pretty poor.

      -1

Comments are closed.

54.205.144.54 - unknown - unknown - US