Funny Jeff Goldblum page with nice effect - Jeffsum

This is a pretty funny site a talented designer called Sean Halpin put together - http://jeffsum.com.

The animated gradient BG is really well done.

2 Likes

I made something like that background using Orbit.

http://dev.ci-clientservices.com/content/slidefade/

Insecure site with a pin required!

oops, sorry, try 1234

Ha, I’m the stupid one for not trying that.

Nah, Orbit is a long way off Jeffsum.

1 Like

Oh I know, I did say “something like it” ;-)

I have used that Orbit thingie on a client site, and spent an age refining the gradients, and so it did end up far cleaner, but it’ll always be a bodge.

It is just three different gradient backgrounds that fade in and out using opacity - a wise choice as animating gradients is processor hungry.

I really like it though, when coordinated with the BG of the pics. Nice find

2 Likes

Would this be best done using Impact? This wouldn’t baked into SBox/SPro would it?

Yes, Impact would be ideal for that.

Here is that page I did using Section pro and Orbit.

Needs a lot of work to be usable on a live site, but the basics are there.

The limitation with doing it with either Impact, Orbit or any other slide show is that you cannot disconnect the timings of the foreground content and the background. It is this timing difference that makes it look polished and not just look like a series of slides.

You could if you put the gradient slider at the top, then below it in a Blueprint pulled up to cover the gradient slider, another slider. No?

I’ll just fetch a bigger fan for my laptop!

I would rather make you a custom stack than see you do such a thing.

3 Likes

Go on then.

(I’ve never claimed my solutions are elegant, they are just solutions).

:-)

The Jeff images are highly optimised with a filter to reduce their size too. Also I think that the Jeff images were created with masked Jeffs to remove the BG and then solid BG colours added to compliment the colours of the main Jeff, all used to generate the great looking animated gradients. The colour matching and images are a big part of this cool effect.

Yes, I agree Gary. It is the fine details that make something so apparently simple look so good.

Gradient colour generation from predominant image colours is pretty straightforward although I suspect people would want a manual checkbox as well.

Can I get the custom stack, too? Otherwise I am afraid I would have to threaten you by starting doing these things! “I would rather make you a custom stack than see you do such a thing.” 😅🤣

But honestly: is there a stack to help creating such a piece of Art?

Thanks,
Jan

There are plenty of stack combinations that will get you close but again, I think the success of that page is the polish and precision with which all the animated elements work together. I don’t believe those fine details are possible with a combination of stacks, no matter how complex or ill advised.

3 Likes

Thanks. So I better refrain from trying … and look for other ways to make my sites worthy to be watched :-)

This comes to mind Psychedelic or Wallpaper Don’t know the ins and out of those stacks