JS: simple hitArea code? - javascript

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

Related

Scroll-based animations: how to create them

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)

Need to make a vertical timeline

I need to make a vertical javascript timeline like below link which is now created with flash.
Can someone give me a reference plugin? Or kindly advice me is it possible with plane javascript or javascript frameworks. I have little bit idea about plane javascript and jquery.
http://www.guardian.co.uk/world/interactive/2011/mar/22/middle-east-protest-interactive-timeline
I did some research on it. But did't get any good result.
Thanks in advance.
https://github.com/balancemedia/Timeline
Demo: http://builtbybalance.com/github-timeline/
there could be some more: https://github.com/search?langOverride=&language=JavaScript&q=timeline&repo=&start_value=1&type=Repositories
A good tutorial:
http://www.9lessons.info/2012/01/facebook-timeline-design-using-jquery.html
the whole thing is done in flash. you can achieve this in javascript(definitely with css), but there is not straight forward method for it. Even in flash it wasn't done in a straight forward method. It took some efforts to sync the movements of the timeline and the events path. start with developing custom scroll bar using javascript and css, and then develop the rest.

moving object in html/css/javascript detecting collision with other objects

I want to make a moving man in css/html/javascript, also detect collisions with other objects. Any idea how to do it? or any pointers to the same will do great.
The first try is look at rapahel js project it uses canvas, second it is a pretty hard thing to do as you want your own physics engine at 2 D level, but i guess with some math formulas you could do it, but everything that you need as an object should be scripted in js to be sure to get the collision effect.
Some design patterns should help you to make your code better.
Good luck.
Pretty much any basic game tutorial covers the topics you asked.
If you can't find a javascript version of that, just get anything in a language you are familiar and try to code the same thing in javascript.
to draw things somewhat in the same way these tutorials probably do, use a div with "position:relative" and its children with "position:absolute" and use "top" and "left" css style proprieties to position the boxes/sprites/whatever.
I am pretty sure you can figure out what to do if you follow these tips.

Advanced animations with Javascript

I'm trying to convert a site from flash to HTML/CSS/JS ( don't ask why, I just have to ) but I'm stuck about the animations that I need.
Please follow the link and look at the site: http://www.sultanahmetkoftesi.com
As you can see, the moving layers are accelerated when you move the mouse. That is exactly what I want to do.
I'd be glad if you can provide an example or snippet.
Pure Javascript or jQuery code is fine for me.
Maybe these two projects can somehow help you...
1. http://css-tricks.com/1660-jquery-robot/
2. http://webdev.stephband.info/parallax.html
Good luck...
You may also want to look at http://spritely.net/

flash website redone in jquery? feasible?

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.

Categories