Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

image resize animation script

Posted on 2014-11-02
8
72 Views
Last Modified: 2014-12-22
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
Comment
Question by:dresdena1
  • 3
  • 3
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40418694
0
 

Author Comment

by:dresdena1
ID: 40418695
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
 
LVL 82

Expert Comment

by:leakim971
ID: 40418699
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:dresdena1
ID: 40418720
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40418724
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
 

Author Comment

by:dresdena1
ID: 40422525
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

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question