i want a certain DOM element to fade into view in my script. i tried using the timeout feature but couldnt get it to work.
hover.addEventListener('mouseover',function () {Core.addClass(cpanel,"on");},false);
please tell me how to implement a fade-in effect for this. please dont recommend jquery or any other framework.
Can you provide markup to go with your JS, so we know what we're looking at?
Also, if you don't want to use jQuery or another framework, you can still look at their implementations to see how to make this kind of thing work. Fading is a notoriously difficult thing to implement cross-browser because of IE6's spotty transparency support.
So many excellent Javascript developers have written animation functions, you'd really do yourself a favor (and your viewers) to use theirs. People are suggesting jQuery, which is great. MooTools is another great alternative.
However, if you want a nudge in a direction of how to write animation in Javascript, I cooked something up here real fast. Note that there's been no cross-browser testing, I'm sure it doesn't work in IE6 (IE7 even?). Nor would I want to, I appreciate the code others have already tested for me.
This is just an idea of how you could do so with native Javascript:
function fadeIn(el, speed) {
el.style.opacity = 0;
var interval = setInterval(function(){
el.style.opacity = parseFloat(el.style.opacity) + 0.1;
if(el.style.opacity == 1.0) {
clearInterval(interval);
}
},speed / 10);
}
Related
I've come across this webpage: http://www.wsj.com/ad/cocainenomics
It shows exactly the kind of animations I would like to learn to create.
Nothing massively complex, just elements or layers coming in while the user scrolls the page (don't consider the 'powder' animation on hero visual).
What technique / programming language / js-based library would you expert animators advice as the best option to achieve this?
I'm considering:
pure jQuery animations
jQuery triggered css3 animations
a velocity.js-based approach with minimal jQuery use only for chaining an animation call onto a jQuery element object
What approach between these you guys deem to be preferable? Or do you have something else in mind?
Do you think that the mighty power of velocity.js is disproportionate for animations this simple? I've seen velocity demos and they are way more complex than the scroll-based animations the above website includes.
I've found success with Skrollr before for this sort of thing:
Check out the demo at https://prinzhorn.github.io/skrollr/
Look at the code at https://github.com/Prinzhorn/skrollr
EDIT: I've just looked at the Skrollr docs and noticed it stopped being maintained about a year ago. A quick Google brought up ScrollMagic as a possible alternative. I'd also recommend digging into the source code of the example site you provided, and seeing if you can get an insight into what they've used!
Velocity.js isn't necessarily something you'd go to specifically for the kind of scroll-position-based animations you're looking for - it's just an alternative option for doing the same as you'd do with jQuery's animate() but with behind-the-scenes magic to make the animations more efficient.
Strictly speaking, StackOverflow probably isn't the best place for this type of question (see the guidelines for questions over at https://stackoverflow.com/help/dont-ask) - so your question might get flagged by moderators!
please check this, https://codyhouse.co/gem/vertical-timeline/ i believe its exactly what you are looking for, check the demo here : https://codyhouse.co/demo/vertical-timeline/index.html
i believe its a pretty simple option, since its free and its fully customizable.
(also its almost only css with a little jquery)
I recall from Actionscript that was very easy to detect when two elements were touching, very useful for games for instance, just a method called hitArea
since I'm in rush and i cant write the code from scratch I wonder if there is anything easy to use, a plugin maybe that works in JS and can tell me when elemA and elemB are in the same spot on the screen
Thanks
actually JQuery Collision is the answer
I'm considering attempting a redesign of a flash website with jquery effects and transitions in place. I just wanted to reach out to the community to maybe see how feasible this really is considering the particular transitions and effects this website has.
Here's the link:
http://antonynicoli.com/english.html
The gallery I guess can be recreated by carousel plugin, but there are so many out there so maybe could suggest a stable one that would be be best suited to this job. The other items that really caught my attention in which I wouldn't really know where to start is the navbar and the effect that looks like a book opening when you click on a link on the navbar. Any and all input would be appreciated. Thanks.
This is probably doable, but I'm wondering about the motivations behind changing to an HTML/jQuery solution when it looks pretty good right now (as Brad pointed out above, it would require a total rework). I see a couple of things going on:
Carousel: jCarousel (http://sorgalla.com/jcarousel/) (never used it but it is popular)
Animations: jQuery Animate (http://api.jquery.com/animate/)
Other widgets/interactions: jQueryUI: (http://www.jqueryui.com)
Not sure how you would go about the open-book animation, but I suspect you could accomplish it with some clever jQuery animations.
The best way to see if it could be done is: start doing it! jQuery has tons of resources and you'll get good help here on StackOverflow.
After looking at the site i do believe most of the effects can be recreated fairly well using jQuery. Of course, your end-result might not be as smooth as the flash implementation but i think it can be done.
If you look at using HTML 5 i believe a lot of animations such as page transition with the opening book can be simulated with the canvas element. Same with the navigation elements.
https://developer.mozilla.org/en/canvas_tutorial
http://diveintohtml5.ep.io/canvas.html#divingin
As you mentioned some of the effects such as the carousel can be recycled from existing plugins. The only holdback really is how much time do you want to invest in porting a design to a language not as well suited to do the job. jQuery is an excellent framework but it is far from a drop-in replacement to create effects that are trivial to create in Flash/Actionscript.
the whole site can be done with jquery. all you have to do is map out all the animation done on the site and write it on paper. then look for the jquery alternatives online and check them off one by one. some things might not be exact but it will do the job.
jQuery's animation engine isn't working well for me. It doesn't have easing and color animation built-in, and the plugins I am using for them don't work properly together consistently.
I've had good experience with YUI's animation engine in the past. Is it possible to use jQuery to select items, and then use YUI to animate them? Here's my current jQuery-animated code to animate a div when you click it:
$("div.article").mousedown(function() {
$(this).children(".box").animate({height:'+=100px', paddingTop: '24px'},300);
$(this).children(".box").children(".subBoxA").show().animate({opacity: "1"}, 500);
});
How would I go about converting the animations in this function to YUI3?
(Is this even a good idea? Should I just convert everything to YUI3, selectors and all? Also, if this comes across as a dumb question, forgive me, i'm a noob)
Part of the benefit of these javascript libraries is that you get a ton of functionality in a smaller amount of code. By including both JQuery and YUI, you are quickly increasing the size of your pages.
If the only thing you are using jquery for is to select elements in the DOM, then definitely convert to YUI as it has many of the same selection methods. If you are using several pieces of both jquery and YUI, then mixing them may be something you have to live with for now.
If you are animating a single element, you can do something like this:
YUI.use("anim", function (Y) {
$("div.article").mousedown(function () {
var el = $(this).children(".box")[0],
anim;
anim = new Y.Anim({
node: el,
/* animation configuration */
});
anim.run();
});
});
AFAIK, YUI does not support animating multiple elements out of the box, though you could implement it using the tween events.
I suspect you are better off using jQuery UI, however. It provides color animation and advanced easing.
Ok - have been tasked with possibly an impossible (or at least a potentially nightmarish) scenario.
Need to come as close as possible to reproducing PowerPoint-like effects via HTML/JavaScript (the spec is large and ugly, so I will spare you the details).
Ultimately, I am looking for a solid launching point. I have used both Prototype/Scriptaculous as well as jQuery in many projects, and based on what I am seeing, it appears jQuery has the more plug-in available, so am leaning towards using jQuery.
Can anyone point me to some plug-ins, articles, or anything else that would help me in accelerating the research on this so I can define to my client what can and cannot be done.
Any other suggestions from you jQuery gurus are welcome of course.
Thanks -
What do you mean with "PowerPoint-like" effects. If you mean animations between slides you should look into
the Effects available with the standard jQuery download (fadeIn, fadeOut, slideDown, slideUp, ...)
the jQuery Easing plugin
the jQuery Cycle plugins effects browser
I would certainly look at jQuery UI as well, which adds a number of effects. See here for a current list. Click on the link for each to see several demos, there are quite a few options for some that are powerpoint-ish.
For example, try the various options in the dropdown here.
The jQuery documentation is very good:
jQuery animate docs
However, if you are trying to achieve very complex effects you will almost certainly benefit from using a different framework. jQuery is a fantastic tool - particularly with the DOM, but animation isn't its strongpoint.
MooTools has a particularly good animation library (MooTools began life as a JavaScript animation framework) with a number of core modules that give you flexible tools to create complex animation chains yourself as well as a number of official and community-provided plugins. My recommendation would be to at least have a look at that first. You can certainly achieve this in jQuery but you will be making it more difficult for yourself!
MooTools homepage
Mootools Core Documentation
My $0.02: If you're doing complex effects, you need the library that runs the fastest, not the library that is the easiest to work with.