Add a parallax effect to Contempo

Blogger's just launched a bunch of new templates, one of which, Contempo, I'm currently rocking myself! If you scroll a little, you'll notice that I've got a subtle parallax effect going. That effect is just a small JS library by Mark Dalgleish, called Stellar.

To add the parallax effect to your own Contempo template, just click this button! The content is shown below.
If you're using Soho, the parallax effect can be added in the Soho-equivalent article!


Alternatively, you can simply head to your blog's Layout tab, and add an HTML/Javascript gadget anywhere in the page.

Then, add the following content to it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src='https://cdn.rawgit.com/markdalgleish/stellar.js/master/jquery.stellar.min.js'></script>
<script>
$('.bg-photo').attr('data-stellar-background-ratio', '0.5');
$(window).stellar({horizontalOffset: 50});
</script>


Make sure it doesn't have a title, hit save, and voila!

Happy Templating

Comments

  1. how to i add sidebar to this theme as u did

    ReplyDelete
  2. Hello.. That was great. Thank you so much. I have also been using contempo, and that helped. Can you help me by explaining for to add the right sidebar ?
    Thanks in advance.

    ReplyDelete

Post a Comment

Popular posts from this blog

Remove the header image for posts in Emporio

Add snippets to the Emporio theme

Rotate my Blogger images