13 Replies - 5344 Views - Last Post: 26 June 2014 - 03:33 AM

#1 b.netana  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 92
  • Joined: 11-September 11

question about where to start with an animation idea

Posted 19 November 2013 - 08:53 PM

I have an idea for an animated header for a website. I realize that this will fit under several categories here, but I was wanting to know where to get started. I want to create a header section on a website of tree leaves that rustle when the mouse is over a section of the leaves. I'm still pretty green, but I feel like having this interactivity in a project will help push me to another level. Any advice I can get is definitely appreciated.
Is This A Good Question/Topic? 0
  • +

Replies To: question about where to start with an animation idea

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,886
  • Joined: 30-April 10

Re: question about where to start with an animation idea

Posted 19 November 2013 - 09:48 PM

One way to do this is using sprites. Using Javascript and a sprite sheet of images you can make any animation you want.

A sprite sheet is a large block of images that be used as a background and changed by the position of the background.

Look up sprite sheet.
Was This Post Helpful? 1
  • +
  • -

#3 b.netana  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 92
  • Joined: 11-September 11

Re: question about where to start with an animation idea

Posted 19 November 2013 - 09:54 PM

I get what you are saying here, but will this allow me to control which part of the leaves move based on where the mouse pointer is located on the banner?
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,886
  • Joined: 30-April 10

Re: question about where to start with an animation idea

Posted 20 November 2013 - 11:19 AM

It depends on the images that you are showing. if you have a multitude of images and change them fast it will look however you want.
Was This Post Helpful? 1
  • +
  • -

#5 b.netana  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 92
  • Joined: 11-September 11

Re: question about where to start with an animation idea

Posted 21 November 2013 - 08:37 AM

My aim is to make a radius of leaves rustle around the mouse pointer about a 300 to 500 pixel radius.
Was This Post Helpful? 0
  • +
  • -

#6 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 80
  • View blog
  • Posts: 575
  • Joined: 21-November 13

Re: question about where to start with an animation idea

Posted 22 November 2013 - 02:17 AM

There are many ways to do it and some are somewhat circumstantial.

If you have many little leaves, you can design only 2 or 3 leaves and fill a canvas with a lot of duplicates. Then, on a mousemove event, capture the mouse coordinates, loop through the leaves coordinates and filter them by their distance to the cursor to deside which ones to move.

If the leaves are little enough, you don't need a spritesheet (simple 2D translations and rotations can do the trick). You can even add more interactivity : make some leaves fall randomly, or when the user moves the mouse around the same spot, for example.

Drawback is that it can be CPU intensive if you have too much leaves.

You can also use a <map> / <area> construction with one spritesheet per area tag. It is easier to program (you don't need to mess with mouse tracking, etc.), more compatible than canvas, less CPU intesive, but heavier to download and less interactive.
Was This Post Helpful? 1
  • +
  • -

#7 b.netana  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 92
  • Joined: 11-September 11

Re: question about where to start with an animation idea

Posted 25 November 2013 - 12:04 PM

That was one of my concerns with doing this, I have decided to use Illustrator and work with some CSS3 animations on hovering over the set of leaves. I think that if I use images of the leaves that reflect the start position along with a slight rotation of the image I will get the desired effect if I work with 1 frame for every 60 nanoseconds. Does this sound like a good approach or am I missing something?
Was This Post Helpful? 0
  • +
  • -

#8 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,886
  • Joined: 30-April 10

Re: question about where to start with an animation idea

Posted 25 November 2013 - 01:23 PM

If you want to use CSS3 there are some good keyframe generators out on the web.

Here is one.

Looks like it would work good.
Was This Post Helpful? 1
  • +
  • -

#9 b.netana  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 92
  • Joined: 11-September 11

Re: question about where to start with an animation idea

Posted 25 November 2013 - 02:24 PM

This has been quite enlightening, I now have the question of how to play an audio file in sync with the motion of the leaves
Was This Post Helpful? 0
  • +
  • -

#10 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,886
  • Joined: 30-April 10

Re: question about where to start with an animation idea

Posted 25 November 2013 - 05:15 PM

If you are willing to use jQuery there is an awesome plugin for it.


Resources
jPlayer
jPlayer Quick Start Guide - cssSelector api
jPlayer 2.4.0 Developer Guide

IF not then you could just use an html 5 audio tag

This post has been edited by laytonsdad: 25 November 2013 - 05:16 PM

Was This Post Helpful? 1
  • +
  • -

#11 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 80
  • View blog
  • Posts: 575
  • Joined: 21-November 13

Re: question about where to start with an animation idea

Posted 26 November 2013 - 01:14 AM

I don't mess with CSS animations, but synchronisation shouldn't be an issue as the animation cannot overshoot/undershoot the targetted duration, so if you have an audio file plaing at the same time, the two should be synced even though the animation is laggy (the browser will skip frames).

there are animationend and animationstart events in Javascript, but you have to prefix them (animationstart, webkitAnimationstart, oanimationstart, MSAnimationstart) and it doesn't work at all in IE9 (as well as CSS animations by the way).

I would recommand you to use a regular mouseover event to play the audio file, and a lightweight animation library using the Date object (for the dynamic framerate feature) to animate your leaves or spritesheet.

I wanted to write "even if, not "even though", in the first paragraph

(I can't find a way to edit my post)
Was This Post Helpful? 1
  • +
  • -

#12 b.netana  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 92
  • Joined: 11-September 11

Re: question about where to start with an animation idea

Posted 14 December 2013 - 03:45 PM

this was very enlightening, thank you both very much
Was This Post Helpful? 0
  • +
  • -

#13 markdavies001  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 17-June 14

Re: question about where to start with an animation idea

Posted 17 June 2014 - 03:56 AM

There are lots of way to do this. You can use Illustrator and work with some CSS3 animations on hovering over the set of leaves.
Was This Post Helpful? 0
  • +
  • -

#14 markdavies001  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 17-June 14

Re: question about where to start with an animation idea

Posted 26 June 2014 - 03:33 AM

BY using Javascript you can make animatio which you want. This will be very helpfull for you.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1