Website effect re-creation

1

I have a client that really like this style of homepage: https://acme-world.com/

Any thoughts on how to go about this? Feels like a job for Source maybe?

2

It looks like it been built with @habitualshaker ‘s excellent Source Elements project and Grid Plus.

2 Likes
3

Thanks! I was going to dig through all my project files and that helps me narrow it down

1 Like
4

Doesn’t look like it’s been built with Source or any other RW framework, looks like a WP site, at least their is a reference in the header to a sub folder for WP content.

I don’t know about Source on it’s own but maybe Splider could help with it’s sync mode for the effect.

1 Like
5

You could certainly build the layout with Source and have all of the controls you will need built in.

Without looking under the hood, that site looks basicaly like a staggered transform of the BG in 4 chunks triggered by 4 links. The animation of the background may be what attracts the client and if so, there could well be a recently made available code you can download free or paid for, to do the animation.

It is probably a WP site, so maybe have a look at whats’s creating the animation and pursue that.

IMHO, from a UI point of view, the staggered animation is there to impress other web builders. I doubt that most visitors would register it and a simple fade between the 4 backgrounds would do. Of course if the client wants it, he wants it, but I think it’s a case of over complicated design over function.

1 Like
6

There may well be a stack available that would cater for that home page set up but i don’t know of one. As @pmjd says - you could set up a nice synced slider with Splider that would do something similar (without the split effect).

Like @Webdeersign says the rest of the pages would be quite easily built in Source.

@jabostick Just shout if you make a start on it and get stuck at any point :)

7

Also, the whole effect disappears into a lazy stacked version as the screen gets smaller. Just when you need to maximise the reducing space, they abandon it and revert to a plain layout form 6 years ago.

8

An idea that might be worth pursuing for a quick mock up, would be to use 4 Limelights that hold each of the 4 images, and to open these in an empty Source Container occupying the first grid position, set to fill the whole grid, i.e. cover all of the grid positions. This should fill then screen. Use more Grid Items to position the Buttons.

The idea is to use the 4 buttons to open a 4 full screen sets of content. Also the animation in LimeLight may meet the animation needs.

This may sound complex but it’s a quick build.

There are probably many other ways to build it.

1 Like
9

Many of the elements reminded me of Stuart’s project, but I defer to the experts among you for the detailed provenance and building of it. The project looked interesting, but some of it seemed overly complex - I think Source will give a nicer result.

Thanks to @Webdeersign for the tip, I have still not used Limelight and I really must embrace it 🙂

10

Thanks folks! I’m off this weekend so I’ll have a look next week and see what’s what.

It’s not a ‘I need this’ request from the client. Just something they saw and liked from a “Top 10 fill in the blank sites”.