I was following a tutorial online for animating a background image to give a drop down effect. I was supposed to download a plugin but it seems that that plugin is not available anymore. Is there any other way to make the background animate? I've looked through similar answers but none of them have worked.
Here's the code on jsfiddle: Fiddle-Code
I want the drape.png image in the background to drop down like a curtain. Also what is the latest version of jquery?
thank you
The latest version of jQuery is 1.7.1
This sort of animation is presentational. Consider doing it with CSS3 animations and transitions. You will lose some browser support for the specific effect, but it will not interfere with functionality and will be easier to update and maintain.
Here is a simple example I made for you. Is this the effect you were looking for?
Related
I am trying to create a site that animates page transitions instead of just loading the next page. I found a great example at jetlag.photos (feel free to check that out). Their animations work flawlessly on the desktop and mobile. I know they used the GreenSock library to help with this but I do not see much in the way of URL transitions in the documentation. Please help!
I am trying to use this solution for transition on my webpages:
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
In fact it does not work well and like broken and changes slowly. I tried it with an empty webpage and it worked better. I know my webpage is really heavy, so should I not use this transition thing? Or this specific solution isn't good enough.
for heavy animations, it's time to go for GSAP, could be 20X faster and can be used as a jquery plugin, no need to change your jquery code using animate:
http://www.greensock.com/jquery-gsap-plugin/
It depends on the performance of the PC.
Are you using CSS shadows, like box-shadow or text-shadow on your elements?
Are you using "live" or "on" for your elements' events?
I've created a website using SUPERSCROLLORAMA plugin. I wasn't aware of the problems with parallax scrolling on iPad and iPhone. I've found out a little bit to late, and I'm thinking about the ways to solve this.
If I understand correctly, events are disabled on this devices while scrolling. So will I be able to make website act as it should, if I disable the native scrolling and implement another one, via JavaScript plugin?
I've already disabled the original scrolling using Alnitak's answer from this question. I've tried to find some plugins to activate scrolling again, but the problem is, it has to be binded to the document since animations are fired there... Do you know the plugin that will do the trick? Is my solution even correct, or there is no solution for my case, I need to rewrite the script from scratch?
You can use parallax scrolling plugin that works on mobile browsers (iOS too).
Have a look at Skrollr. It doesn't depend on any other library, it has optional mobile js file and is very easy to use. Just read the documentation.
I would like to imitate the animation happening when switching from one page to another using the menu on the left of this example webpage. This is one of several projects that I am working on to prove JavaScript and associated libraries are capable of producing animations equivalent to Flash.
I can get a simple hide animation going with this but it doesn't quite look the same as the Flash version. It's almost like they've used some easing effect for the slide out and in. I can't seem to figure out the CSS with which to animate it in JavaScript. Any ideas on the CSS I should be looking at or know of any plugins that have already accomplished this style?
http://www.wix.com/flash-templates/artistic-choice
http://www.alphadesigns.com.au/stackoverflow/index.html (updated with opacity option)
Try animating opacity. Note that this doesn't work in IE<9, you'll have to use a filter and a custom animation if IE6-8 must be supported (see http://www.quirksmode.org/css/opacity.html).
anyone know a plug in that can make a similar thing that is showed is the second example - (JC Play List Minimal Skin)
http://www.jumpeyecomponents.com/Flash-Components/User-Interface/JC-Play-List-285/examples.htm
only the scroll, not the background image
i have some problems with flash :)
thanks!
How about the HoverScroll jQuery Plugin? There's also this plugin, which isn't exactly the same as the Flash example.