15 Jul

Jarkko Oksanen

We all know that there is an abundance of Javascript and jQuery libraries out there that provide all kinds of interesting functionalities for almost every issue you could think of. During the last few years of working on various projects I have gathered snippets, scripts and plugins that I am reusing when the need comes up. This article will demonstrate some of the better and easily re-usable ones.

1. Parallax Scrolling backgrounds

The parallax effect has been a nice thing to have for a while now and is especially useful in brochure sites or one page websites. However it has its uses in other contexts as well. I came across a simple function to apply the effect to css backgrounds awhile back. Notice that it only works on backgrounds, not on other elements.

Snippet:

1. // Parallax scroll.
2. $.fn.parallax = function(options) {
3.  
4. var windowHeight = $(window).height();
5.  
6. // Establish default settings.
7. var settings = $.extend({
8. speed : 0.15
9. }, options);
10.  
11. // Iterate over each object in collection.
12. return this.each( function() {
13.  
14. // Save a reference to the element.
15. var $this = $(this);
16.  
17. // Set up Scroll Handler.
18. $(document).scroll(function(){
19. var scrollTop = $(window).scrollTop();
20. var offset = $this.offset().top;
21. var height = $this.outerHeight();
22.  
23. // Check if above or below viewport.
24. if (offset + height < scrollTop || offset > scrollTop + windowHeight) {
25. return;
26. }
27. var yBgPosition = Math.round((offset - scrollTop) * settings.speed);
28.  
29. // Apply the Y Background Position to Set the Parallax Effect.
30. $this.css('background-position', 'center ' + yBgPosition + 'px');
31. });
32. });
33. };

Use the speed setting to set the speed of the parallax effect.

And to simply use it:

1. $('.background').parallax({
2. speed : 0.3
3. });

This is simple enough to use as a part of your Javascript scripts instead of using a library.

Jsfiddle with a gradiant to display effect. Use with an image for optimal demonstration: http://jsfiddle.net/jOksanen/7ywhcdd2/5

For more complex usage, the library that this work is based on is located at: http://pixelcog.github.io/parallax.js/

2. Floating block

Sometimes you just want to “fix” something on your website after scrolling the page for a bit. This could be a login block, your main menu or anything else.

You can use a plugin https://github.com/somewebmedia/hc-sticky to implement this behavior.

Snippet (only with the plugin installed):

$('#element').hcSticky();

D7 module that implements the behavior: https://www.drupal.org/project/floating_block

3. Smooth Scrolling to anchor links

A smooth scrolling behavior to anchor links on page is an effect that is both nice and simple. Its as simple as it sounds and gives you an animation on anchor link clicks.

Demonstration: https://css-tricks.com/examples/SmoothPageScroll/

Snippet:

1. $(function() {
2. $('a[href*=#]:not([href=#])').click(function() {
3. if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
4. var target = $(this.hash);
5. target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
6. if (target.length) {
7. $('html,body').animate({
8. scrollTop: target.offset().top
9. }, 1000);
10. return false;
11. }
12. }
13. });
14. });

D7 modules that implement the behavior: https://www.drupal.org/sandbox/souless/2349477 or https://www.drupal.org/project/scroll_to_destination_anchors

4. Back to top

A small effect that makes blogs and websites more user-friendly. A button that appears and scrolls back to the top of the page that you’re currently on. Especially for mobile devices its a great thing to have. This can be used in conjunction with the last snippet to create a nice smooth scroll back to the top.

Snippet:

1. function back_to_top(selector){
2. $(window).scroll(function () {
3. if ($(this).scrollTop() > 50) {
4. $(selector).fadeIn();
5. } else {
6. $(selector).fadeOut();
7. }
8. });
9.  
10. $(selector).click(function () {
11. $(selector).tooltip('hide');
12. $('body,html').animate({
13. scrollTop: 0
14. }, 0);
15. return false;
16. });
17. };
18.  
19. // Call this function on your button selector.

And then you only need to create a button on your page somewhere and apply the function with the collect selector.

Back to top

And of course a bit of css to make the button fixed.

1. .top {
2. cursor: pointer;
3. position: fixed;
4. bottom: 25px;
5. right: 25px;
6. display: none;
7. }

Drupal modules for the behavior: https://www.drupal.org/project/back_to_top and https://www.drupal.org/project/scroll_to_top

Demonstration and original source: http://bootsnipp.com/snippets/featured/link-to-top-page

5. Keep your footer at the bottom of the page

On many sites that I’ve worked with I’ve run to the issue that the page is shorter than the actual page. Keeping the footer at the bottom at all times can be accomplished by using perfect markup and css (https://css-tricks.com/snippets/css/sticky-footer/), but in some cases some javascript is needed due to time or markup limitation concerns.

Snippet:

1. var footerHeight = 0,
2. footerTop = 0;
3.  
4. function positionFooter(footer) {
5. footerHeight = footer.height();
6. footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
7.  
8. if ( ($(document.body).height()+footerHeight) < $(window).height()) {
9. footer.css({
10. position: "absolute"
11. }).animate({
12. top: footerTop
13. })
14. } else {
15. footer.css({
16. position: "static"
17. })
18. }
19. }
20.  
21. positionFooter(".your-footer");

This snippet places the footer at the bottom of the page. It should be called on window resize to make the effect perfect. The snippet is a simplified version of what's presented in the link below.

Demonstration and original source: https://css-tricks.com/snippets/jquery/jquery-sticky-footer/

drupal planet