Tuesday, 10 September 2013

jQuery Animations Choppy? Slowing Down Site

jQuery Animations Choppy? Slowing Down Site

I am in the middle of putting together a website for someone, and they are
dead-set on having various effects in the background of the site to make
it look like an old television.
I've done several things. A vignette around the edge, images of static
that randomize their opacity in the background, and a large scanline-bar
thing that moves from the top to the bottom of the page.
However I realized that, even though it looked all good on one computer,
later on, I noticed (by watching the static flicker and the movement along
the Y-axis of the bar) that it was almost slowing down. Animation would
get choppy and stutter. Sometimes it's barely noticeable, but sometimes
it's glaring and ugly.
I read around, and saw something about setting images to 100% width and
height causes jquery-animate slowdowns....but I can't really change that,
as the effect relies upon these stacked effects covering the whole view
port.
You may suggest smaller images. I tried that already - making my 1080
backgrounds 1/4 their size....but then I also got the slowdown again, and
then read that up-scaling images while animating them ALSO causes
slowdown.
I've fiddled around for hours and tried alternate jquery snippets but
nothing seems to work - I just always get moments of stuttering, choppy
animation of these effects.
Because I'm not unsure of a single piece of code, I don't want to flood
all of the jquery into this post.
If anyone could navigate to http://www.dillonprobinson.com/chris , I would
greatly appreciate some pointers as to what's making things slow down.
I've tried Chrome's diagnostic tools but nothing stood out to me, so maybe
it will to someone else.
I'm not on a strict deadline at all, but I'd like to get this important
part of the site working smoothly before I move on to content.
If anyone here is nice enough to take a look.....I know my styling and
formatting is messy. Cleanup comes later :)

No comments:

Post a Comment