Skip to content

April 27, 2012

Animation on ExtJs 4 login screen – Sliding background

by Joe Kuan

I was experimenting some animation for a login screen. Here is a video of my first try – a sliding background login screen.
.

First, I google for a nice panoramic picture with height suitable for a login screen. This is the picture I use (1134 x 368)

Then the image is cropped into the sky and ground images. For the sky image, the result image size is 1134 x 300. As for the ground image, I further cropped it as the same width as the login screen which is 480 x 68.

As you can see, there is still part of the blue sky left at the top of the ground image. I use GIMP to trim off the blue sky. Click on ‘Select by color region’ in the toolbox

Then select the blue sky region to crop

Then the cropped region becomes transparent.

So the idea is simply to slide the long panoramic sky image slowly with the static ground image. Since the top bit of the ground image is transparent, therefore the ground image is placed slightly overlapping the bottom of the sky image, not directly below the sky image.

Here I use the login screen code which is described in my other blog, Creating a login page with ExtJS 4. The additional change is to add two components with the images into the form panel.

  var login = new Ext.form.Panel({
    labelWidth : 80,
    url : './app/server/do_login.php',
    frame : true,
    id : 'login_form',
    iconCls : 'itrinegy',
    title : 'Welcome to iTrinegy',
    height : 367,
    width : 480,
    defaultType : 'textfield',
    labelAlign : 'top',
    layout : 'absolute',
    // Login form elements
    items : [ {
      xtype : 'component',
      id: 'sky',
      autoEl : {
        tag : 'image',
        src : './sky.png'
      }
      }, {
      xtype: 'component',
      autoEl: {
        tag: 'image',
        src: './ground.png'
      },
      // Display slightly above the bottom of sky image
      y: 295
      }, {
      xtype : 'component',
      autoEl : {
        tag : 'a',
        target : 'itrinegy',
        href : 'http://www.itrinegy.com',

The final part is to apply ExtJs fx method onto the sky component.

Ext.getCmp('sky').getEl().move('l', 652, { duration: 90000 });

Alternatively, I think you can achieve the same effect using CSS3.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: