Fullscreen canvas image

At a recent project, I needed to draw an image in canvas. The app had to be fullscreen, and the image should resize in the canvas proportionally. I searched for a code that does it, but couldn’t find any. Actually it’s not very hard to write piece of code that does it and today I will guide you how.

[button url=”http://codepen.io/bassta/full/OPVzyB/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”]VIEW DEMO [/button] [button url=”http://codepen.io/bassta/pen/OPVzyB” type=”square” icon=”link” target=”_blank”] FORK AT CODEPEN [/button]

Continue reading “Fullscreen canvas image”

WordPress navigation – add custom menu classes

Lately, I develop WordPress themes. The thing is, I don’t like the WordPress default css style names – I prefer BEM naming convention. If you’ve tried to style a WordPress theme, you know, that by default WordPress apply some classes to the menu items – like  page_item, page-item-$ and current_page_item for the current active menu. I wanted to remove all other classes, and go with navigation__item and navigation__item-active for the current selected menu. Like almost everything in wordpress, you can change this using filters. Filter function takes as arguments hook ( think about the hook as event ) , function that will modify the output, priority and number of arguments that the function will accept. So here is the snippet:

function add_custom_classes($classes){
	
	$newClasses[] = "navigation__item";

	if( in_array('current_page_item', $classes) ){
		array_push($newClasses, "navigation__item-active");
	}

    return $newClasses;
}

add_filter('nav_menu_css_class', 'add_custom_classes', 100, 1);
add_filter('nav_menu_item_id', 'add_custom_classes', 100, 1);
add_filter('page_css_class', 'add_custom_classes', 100, 1);

Add it to your functions.php file and you have navigation__item class set to the list items, and navigation__item-active class added to the current menu item.

Set and get objects from/to LocalStorage

Recently, I use localStorage a lot. The HTML5 Storage API is supported in all major browsers, as well as JSON’s parse and stringify  methods. With this in mind, it is actually quite easy to save, edit and get javascript objects from user’s machines.

Here is the snippet I use to save objects to localStorage:

function saveToStorage(_name, _obj) {
    //console.log("saved to storage", _name, _obj);
    localStorage.setItem(_name, JSON.stringify(_obj));
}

Just pass a name, and a javascript object. Later, we can get the object:

function getFromStorage(_name) {
    var storageData = localStorage.getItem(_name);
    var storageObj = JSON.parse(storageData);

    if (!storageObj) {
        storageObj = {};
        saveToStorage(_name, storageObj);
    }
    return storageObj;
}

Just pass a name of the object you want to get. If such a object doesn’t exist, the function will return new, empty javascript object.

Staggering animations with TweenLite

[button url=”http://codepen.io/bassta/pen/qykcu” type=”square” icon=”link” target=”_blank”] FORK AT CODEPEN [/button]

Wait, wasn’t there TweenMax staggerTo method? Yes, there is. I use staggered animations in a lot of my projects, but I also like to keep my javascript files as light as possible. So, for one my latest projects I needed to stagger animations, and also to have proper event handling system, but keep all as light as possible ( without including TweenMax ). So I end up digging into TweenMax code, and created this little snippet ( basically, just took the TweenMax code and modified it a bit, so it can be used standalone ) ;

var TM = {};

 TM.staggerTo = function(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope) {
 stagger = stagger || 0;
 var delay = vars.delay || 0,
 a = [],
 finalComplete = function() {
 if (vars.onComplete) {
 vars.onComplete.apply(vars.onCompleteScope || this, arguments);
 }
 onCompleteAll.apply(onCompleteAllScope || this, onCompleteAllParams || []);
 },
 l, copy, i, p;
 if (!$.isArray(targets)) {
 if (typeof(targets) === "string") {
 targets = TweenLite.selector(targets) || targets;
 }
 if (TweenLite._internals.isSelector(targets)) {
 targets = [].slice.call(targets, 0);
 }
 }
 l = targets.length;
 for (i = 0; i < l; i++) {
 copy = {};
 for (p in vars) {
 copy[p] = vars[p];
 }
 copy.delay = delay;
 if (i === l - 1 && onCompleteAll) {
 copy.onComplete = finalComplete;
 }
 a[i] = new TweenLite(targets[i], duration, copy);
 delay += stagger;
 }
 return a;
 };

It can be perfect solution for banners, where the size of the javascript files is so important. Use it just like you would use TweenMax staggerTo() method.

TM.staggerTo(targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope)

Here is a codepen

See the Pen TweenLite staggerTo by Chrysto (@bassta) on CodePen.

Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin

Snippet: how to create neat fullscreen slides effect. It can be perfect for landing and portfolio single-page websites.

[button url=”http://bassta.bg/demos/fullscreen-slides/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”] VIEW DEMO [/button] [button url=”http://bassta.bg/downloads/fullscreen-slides-files.zip” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILES [/button] [button url=”http://codepen.io/bassta/pen/kDvmC/” type=”square” icon=”link” target=”_blank”] FORK AT CODEPEN [/button]
[highlight]Edit: it was featured on the first page of Codepen. Thank you all![/highlight]

Medium.com-like blurred header effect

I love reading medium.com. Recently, they had redesign ( Medium 1.0 ) featuring some great new effects. One of the effects I like the most is this “blurred header” effect on scroll. I created a small codepen, showing how to achieve similar effect.

[button url=”http://codepen.io/bassta/pen/iIskw” style=”green” size=”small” type=”cloud” icon=”check” target=”_blank”] View pen [/button]

[button url=”http://codepen.io/bassta/full/iIskw” style=”green” size=”small” type=”cloud” icon=”check” target=”_blank”] View fullscreen [/button]

Continue reading “Medium.com-like blurred header effect”

Before/After effect with TweenLite and Draggable

Hi guys, here is a new effect – how to create before/after image viewer with TweenLite and Draggable. You can drag it, click it, or have external navigation. It works on touch devices, also!

[button url=”http://codepen.io/bassta/pen/Fypuw” style=”green” size=”small” type=”cloud” icon=”check” target=”_blank”] View demo [/button]

 
[highlight]Update: It was featured on the front page of codepen! [/highlight]