Forums

Help adding animated graphics to responsive C5 site

Permalink
I'm a bit over my head here so think I want to hire out to a more experienced C5 designer some of this project. Here are some details:

1. Client wants to work with one of the responsive templates found here. I should be able to customize to incorporate the color scheme, etc.

2. The client wants a landing page which is an animation I am having created in After Effects. Two links will be created on the animation which the viewer can click to be taken inside the site to two separate areas.

3. I need the animation to scale down to fit the viewer's browser and swap out to a vertical version if viewed in that way. I assume I will need custom code to make that happen.

So I'm looking for someone with some experience in incorporating animation into C5 to help me. I've added roughs of the graphics to help. I may be overlooking some important information so please ask if it'll help.

2 Attachments

jfuqua
 
jpgriffin replied on at Permalink Reply
jpgriffin
Hi,

Not familiar with After Effects but from what I understand your solution could include use of css media queries such as:
/* Tablet Portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Tablet Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

to sort the swap out of the different background animations (Landscape / Portrait).
You'll prob need to make the animations cover the entire landing page background whilst maintaining proportions using this sort of css: 
#home { 
  background: url(the/After_Effect_file_path_portrait) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

The above uses #home to identify that the background image (in your case an After Effects animation) is only used on the home page. This can be picked up by changing <body> open tag to <body id="<?php echo $c->getCollectionHandle() ?>">
Hope the above ramblings help / give ideas.

Regards,
Jeremy
jfuqua replied on at Permalink Reply
jfuqua
Thank you. This is helpful.

I'll still need some help with this along with adding a map link over the animation.
Steevb replied on at Permalink Reply
Steevb
After affects produces an animated gif, so should scale automatically with the responsive theme. My example:http://artemi-gibbs.com/

The AE could be placed in a div as a background image with your two links in separate divs that fold under when the view port reduces.

Need more help, let me know.

Steev
jfuqua replied on at Permalink Reply
jfuqua
I see. It works nicely on your site.

The links under the animation would scale as well? I'm not familiars with "AE" but assume it is the link map area.

Would that swap out to a new one when the vertical animation is needed?
Steevb replied on at Permalink Reply
Steevb
The links are not with the animation, they are separate.

You need three divs, one for the animation, one for left link and one right link.

Nothing gets swapped out, everything floats left, then folds under one another and scales down.
jfuqua replied on at Permalink Reply
jfuqua
Understood except the other animation, which swaps in for vertical formats, has the links under the animation instead of to the sides.
Steevb replied on at Permalink Reply
Steevb
Sorry I may have misunderstood. You have TWO animations with links built in?

If that is the case then all that's needed is to hide one and show the other with CSS.

Is that what you want to do?
jfuqua replied on at Permalink Reply
jfuqua
Indeed. The image swaps out along with the link area.
hereNT replied on at Permalink Reply
hereNT
I'm not 100% sure, but I've heard that there are issues with using a gif as a background image. It's probably better to use an actual image.