Many websites these days are very graphic intensive, have a ton of contrast between content the the background, or are simply overly complicated. One method to reduce this visual noise and provide a more harmonic user experience would be to downplay elements on the screen that the user is likely not paying attention to.
The Premise
So how do we go about reducing the visual impact of elements that the user is not really looking at in the first place? The obvious solution would be to decrease the opacity of those elements. We can calculate the visual height of the screen, as well as how far down things are scrolled, apply a little math, and reduce the opacity accordingly.
The only other consideration we should make is that we don’t want elements to completely disappear when they’re down near the bottom. Users should still be able to look down the page and see (and hopefully be able to read) the items that are there so they know where they’ll end up eventually.
Let’s Do It
We first need to define a minimum opacity for elements because, like we mentioned above, we still want all elements to be visible, just less so.
var options = $.extend({
minOpacity: 0.2
}, options);
As per the code above, we’re setting a default minimum opacity of 0.2 (which is 20% of the normal opacity of the element). The jQuery plugin definition will allow this value to be overwritten when invoked.
Let’s get into the core of the math that will define the current opacity of an element, depending on where it is on the visible real estate of the screen. We’ll use the JavaScript window object, which defines the height of the screen, as well as the scroll position, and then relate that to the current object.
Assume this is a JavaScript window object…
var $window = $(this); // acquire the window's dimensions and scroll position var windowHeight = $window.height(); var windowScroll = $window.scrollTop();
Then we apply the math to the object we want to decrease the opacity for. This is done by determining the maximum value of the value calculated using the window dimensions with the defaulted opacity minimum, and set the CSS opacity value to be that fraction.
$element.css('opacity', Math.max(1 - (Math.abs($element.offset().top - windowScroll) / windowHeight), options.minOpacity));
And tada! The full JavaScript as follows:
(function($) {
$.fn.scrollweight = function(options) {
// assign defaults
var options = $.extend({
minOpacity: 0.2
}, options);
var $elements = $(this);
$(window).bind('scroll resize load', function() {
var $window = $(this);
// acquire the window's dimensions and scroll position
var windowHeight = $window.height();
var windowScroll = $window.scrollTop();
$elements.each(function() {
$this = $(this);
$this.css('opacity', Math.max(1 - (Math.abs($this.offset().top - windowScroll) / windowHeight), options.minOpacity));
});
});
// return this for chaining
return this;
};
})(jQuery);
Summary
With a simple little jQuery plugin, we can effectively downplay elements which are lower on the screen that may not require the same emphasis as other elements closer to the top of the screen. This results in a less distracting user experience overall, plus adds a neat dynamic effect.
Tags: beginner, css, JavaScript, jQuery, opacity, user interface