Add a parallax effect to Soho

Blogger's just launched a bunch of new templates. I put up some instructions for adding a parallax effect to Contempo - this article is the exact same effect, but for Soho!

If you scroll a little on this blog, 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 same parallax effect to your Soho template, just click this button! The content is shown below.


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>
$('.hero-image').attr('data-stellar-background-ratio', '0.5');
$(window).stellar({horizontalOffset: 50, verticalOffset: 50});
</script>


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

Happy Templating

Comments

  1. Dear thanks for this script. I use and make a parallex iffect my www.risaliakhera.com website. Thanks again

    ReplyDelete

Post a Comment

Popular posts from this blog

Make my background image responsive

Filter out certain labels from my Blog Homepage

Change the landing page of my blog