Serg Hospodarets Blog

Serg Hospodarets blog

Cool effects for April Fools with CSS filters Serg Hospodarets Blog

And here is the April 1st!

We already have some jokes from Google like com.google and Pac-Man in Google Maps.

There is the list of others.

So, want to provide some nice effect for your site/page? It’s easy to do adding only one line of CSS- CSS filter.

Script

Let’s provide a JavaScript which automatically applies one of the predefined CSS filters to your page with some frequency.

/**----------------
 * APRIL FOOLS' DAY CSS FILTERS
 ------------------*/

/**
 * Filters values to be applied (one might be applied)
 * @type {Array}
 */
var FILTER_VALUES = [
    'hue-rotate(72deg) saturate(3) sepia(0.2)',
    'brightness(0.9) hue-rotate(180deg) invert(1)',
    'grayscale(0.1) saturate(1) sepia(0.6)',
    'grayscale(1)',
    'blur(1px)',
    'hue-rotate(180deg)',
    'saturate(2)'
];

/**
 * Return css string
 * @param prop {String}
 * @param value {String}
 * @returns {String}
 */
function getCssDeclaration(prop, value) {
    return prop + ':' + value + ';';
}

/**
 * Checks which vendor prefix has to be used for "filter" in CSS
 */
var filterCssProperty = (function () {
    var el = document.createElement('div'),
            vendors = [
                '-moz-filter',
                '-webkit-filter',
                '-ms-filter'
            ],
            valueToCheck = 'invert(0.1)',
            i, length, vendor,
            _filterProperty;
    for (i = 0, length = vendors.length; i < length; i++) {
        vendor = vendors[i];
        el.style.cssText = getCssDeclaration(vendor, valueToCheck);
        if (el.style.length) {
            _filterProperty = vendor;
            break;
        }
    }
    if (!_filterProperty) {// vendor isn't needed
        _filterProperty = 'filter';
    }
    return _filterProperty;
}());

/**
 * Gets random filter form the list
 * @returns {String}
 */
function getCustomFilterValue() {
    return FILTER_VALUES[
            Math.floor(
                    Math.random() * FILTER_VALUES.length
            )
            ];
}

function applyFilter() {
    var filterValue = getCustomFilterValue();
    document.documentElement// <html/> ELEMENT
            .style[filterCssProperty] = filterValue;
    return filterCssProperty + ': ' + filterValue;
}

/**
 * INIT
 */
function init() {
    // CHECK THE DATE
    var checkDate = true;

    var dateNow = new Date();
    var day = dateNow.getDate();
    var month = dateNow.getMonth() + 1;
    if (checkDate) {
        if (day !== 1 || month !== 4) {// APPLY ONLY AT APRIL 1
            return;
        }
    }

    // FREQUENCY OF APPEARING
    var frequencyOfAppearing = '100%';
    frequencyOfAppearing = parseFloat(frequencyOfAppearing);
    if (Math.random() * 100 > (100 - frequencyOfAppearing)) {// APPLY IN COMMON ONCE PER 5 PAGE LOADS
        applyFilter();
    }
}

init();

Settings

  • If you want to make this joke work not only at April 1- set checkDate to false.
  • To set frequency of appearing use frequencyOfAppearing (it takes percents from “0%” to “100%”).
  • Add you filter values to be applied to FILTER_VALUES. If you want to play with CSS filters and find the best- you can use range sliders in CSS filters DEMO

Demo

Provide your code in <pre><code></code></pre> tags