Tag Archives: Cascading Style Sheets

Dragging/Moving shapes smoothly using Canvas 2d APIs


Did you ever write code to drag or move shapes using Canvas 2d APIs? If you did, then didn’t you ever face a situation (an unexpected behaviour) when you drag or move a shape (e.g. circle, rectangle, image, Bezier cubic/quadratic curve, etc.)?

This post helps you write code to drag or move shapes as smoothly and accurately as possible using HTML5 Canvas 2d APIs.

Read full blog post

Dragging-or-Moving-Shapes-smoothly-using-HTML5-Canvas-2D-APIs

Javascript and CSS3 only sliding up/down transition effects



First of all – View the Demo!

You’ve to apply following class to the element you want to slide up/down.

.sliding-effect
{
    -webkit-transition:     max-height .8s ease;
    -moz-transition:        max-height .8s ease;
    -o-transition:          max-height .8s ease;
    -ms-transition:         max-height .8s ease;
    transition:             max-height .8s ease;

    /* To hide by default, setting max-height 
          and opacity = 0 */
    max-height:     0;
    opacity:        0;
    overflow:       hidden;
}

/* <img src="/image.jpg" alt="" width="167" 
          height="186" />  */

By default: Above class is hiding the element; however, you can customize it.

You’ve to call two Javascript functions: 1) slideDown and 2) slideUp as shown here:

var element = document.getElementById( 'id' );

slideDown(element); /* show */
slideUp(element)    /* hide */

And slide up/down functions:

function slideDown( elem )
{
    elem.style.maxHeight = '600px';
    elem.style.opacity   = '1';
}

function slideUp( elem )
{
    elem.style.maxHeight = '0';
    once( 1, function ()
    {
        elem.style.opacity = '0';
    } );    
}

function once( seconds, callback ) /* Execute once after the specified interval */
{
    var counter = 0;
    var time = window.setInterval( function ()
    {
        counter++;
        if ( counter >= seconds )
        {
            callback();
            window.clearInterval( time );
        }
    }, 1000 );
}

We’re using a timer to set opacity = 0 because setting max-height = 0 doesn’t (completely) hide the element.

CSS3 transforms can be used for sliding up-down effects

Early in this article, we used CSS3 transition for sliding up and down effects; however we can use CSS3 transforms to make same sliding effect. One point you must remember is that CSS3 transforms are less supported than CSS3 transitions; especially on mobile web-browsers.

Let us create slide-down effect with keyframes of CSS3 transforms:

/* For WebKit web-browsers: Chrome/Safari */
@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}/* For Gecko: Mozilla Firefox */
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}

And here we are calling above keyframes:

.slide-Down /* Slide-Down effect */
{
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

Chris Coyier of CSS-Tricks.com wrote an article Pop From Top Notification. The demo he created in the article is using CSS3 transforms for sliding-down effect. You can view his demo or download in zip format.