• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 78
  • Last Modified:

image resize animation script

EE,
I would like to know if there is a script that can automatically resize/animate a small image to a full screen image when the page is loaded? I do not want to use Flash, but I want the tween animation during the transition.

Any help would be greatly appreciated.
dresdena1
0
dresdena1
Asked:
dresdena1
  • 3
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
0
 
dresdena1Author Commented:
leakim971,
Thanks for the quick response.
The link that you posted was for a slider.

What I want is to have one small image on the page that will transition to a full screen image (with tween animation) when the page is loaded.

Have you seen something like this?

Thanks again.
dresdena1
0
 
leakim971PluritechnicianCommented:
what about :

$(document).ready(function() {
   var  z =  $(window).width() / $(".myImageClass").width();
   $(".myImageClass").animate({zoom:z}, 1000); // http://api.jquery.com/animate/
});

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
dresdena1Author Commented:
leakim971,
I am not that knowledgeable with this type of thing.
Would it be possible to show me how to implement it?
Thanks.
dresdena1
0
 
leakim971PluritechnicianCommented:
not really, it  depend of your code and page
do you understand what the code is doing ?

$(document).ready(function() { // http://learn.jquery.com/using-jquery-core/document-ready/
   // http://api.jquery.com/class-selector/
   // http://api.jquery.com/width/
   var  z =  $(window).width() / $(".myImageClass").width(); 
   $(".myImageClass").animate({zoom:z}, 1000); // http://api.jquery.com/animate/
});

Open in new window

0
 
dresdena1Author Commented:
leakim971,
It looks to me like it is creating a function using jquery to zoom/animate something.
Putting it into practice I am not so sure of.

I am attaching a basic page: dev.html

It has a simple image and href

If possible, please let me know how I would add in the function.
Thanks.
dresdena1
dev.html
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now