Homepage Animation (Centrally divided layout)

@luiggi19Feb 13.2016

Hi all!

I’m building my homepage for my photography and business website and need to code this animation. Think it is in CSS but not quite sure and have been searching a while about centrally divided layouts.

I made a GIF about my idea with an AE comp, so thought it could help if someone has a clue on how to do it. Leaving that here:

~~[url]~~https://dl.dropboxusercontent.com/u/54898895/homepage-gif.gif[/url]
~~[url]~~https://dl.dropboxusercontent.com/u/54898895/homepage-gif.html[/url]

Any ideas about how to code it?

Thanks!

to post a comment

CSS

24 Comments(s) _↴

@SempervivumFeb 13.2016 — #Should this animation work mouse controlled as visible in your GIF or should it run automatically?

@luiggi19authorFeb 14.2016 — #Should this animation work mouse controlled as visible in your GIF or should it run automatically?[/QUOTE]

Hi Sempervivum!

The animation should be mouse controlled, meaning that if the user mouses over one zone close to the title 1 or 2 the animation beggins, and if he releases the mouse from that zona (like going to the other title) it stops and beggins the transition from the same spot it stopped.

Thanks!

@SempervivumFeb 14.2016 — #And should the animation be controlled by dragging the mouse as visible in your GIF or just by mouseenter/mouseleave?

@luiggi19authorFeb 14.2016 — #And should the animation be controlled by dragging the mouse as visible in your GIF or just by mouseenter/mouseleave?[/QUOTE]

No, just mouseenter/mouseleave, no meed to follow the area where things are going to. Sorry about that, the mouse is simulating the user decisions

@SempervivumFeb 14.2016 — #Coded this:

https://jsfiddle.net/Sempervivum/ne1gq7rL/

Is it what you intended?

@luiggi19authorFeb 14.2016 — #Coded this:

https://jsfiddle.net/Sempervivum/ne1gq7rL/

Is it what you intended?[/QUOTE]

Wow! Yeah! That was definetly it! ? I'm trying to Add images to it by tonight and see how it goes. Awesome Sempervivum, owe you one mate! TY ?

@SempervivumFeb 14.2016 — #Fine that you like it! Can you add the "LOGO" by yourself or should I do it for you?

@luiggi19authorFeb 14.2016 — #No need, you did too much already, and know how that works by reading the code I think. A way to learn it myself and try to apply different settings. BTW I saw there was a CSS tag called @keyframes. Would that be useful as well? Just to know. Thanks again ?

@SempervivumFeb 14.2016 — #Regarding @keyframe: Animations can be realized by CSS as well. Usually this option should be preferred due to aspects of performance. The reason why I did not use it in this case is, that you wanted to stop the animation at mouseleave. And I don't know a way to stop a CSS animation before completion. However my knowledge regarding CSS animations is limited and maybe there is a way to achieve that too.

@luiggi19authorFeb 14.2016 — #I see! Maybe I try keyframes in some other part of the site and see how that goes and pots it here. The idea is for the user to choose between two different subjects in the main page, and thought of stop as a nice catch between final choice. But if I see it is better just to hover qn completethe full animation maybe I try to post it with keyframes ? I'll keep it updated for it to show the final result! Thabks again ?

@luiggi19authorFeb 15.2016 — #Regarding @keyframe: Animations can be realized by CSS as well. Usually this option should be preferred due to aspects of performance. The reason why I did not use it in this case is, that you wanted to stop the animation at mouseleave. And I don't know a way to stop a CSS animation before completion. However my knowledge regarding CSS animations is limited and maybe there is a way to achieve that too.[/QUOTE]

No luck here... Smugmug, the platform I use only accepts HTML or CSS, no javascript in it in any way... Have tried the full day to run @keyframes but no luck with it...

As you said, I might ditch the idea that it has to stop and only run "full complition" animation, meaning that if user hovers over Title 1 or 2 the animation must complete itself before running anything else (say the other animation or back to initial position by hovering the logo).

There are three end results which are:

-Initial Position

-Hovered over Photography

-Hovered over Business

Thus the four animations would be:

- If hovering on "Photography" from initial position, the end result should be "Hovered over Photography".

- If hovering on "Business" from initial position, the end result should be "Hovered over Business".

- If hovering from "Hovered over Business"or"Hovered over Photography" on Logo the end result should be "Initial Position"

- If hovering from "Hovered over Business"or"Hovered over Photography" to contrary button "Photography" or "Business"

Any idea? Too complicated and go just for flat design and kill the thing? Thanks again!

@SempervivumFeb 15.2016 — #Smugmug, the platform I use only accepts HTML or CSS, no javascript in it in any way... Have tried the full day to run @keyframes but no luck with it...[/QUOTE]First I wanted to recommend looking for a better hoster but then I had a look at smugmug and I'm afraid you need the features of selling photos etc. and therefore cannot switch to another hoster.

Did you already take into account that a user might use a touch device where there is no hover?

If hovering from "Hovered over Business"or"Hovered over Photography" on Logo the end result should be "Initial Position"[/QUOTE]When thinking about hovering you have to be aware of the following: When the area for hovering the logo is limited to the logo itself, the logo slides down and the mouse leaves the logo so that the animation would stop and revert. This might result in an endless loop.

A solution for this might be to define larger and fixed areas for the hovering like I did in the previous solution. I switched on the borders to clarify:

https://jsfiddle.net/Sempervivum/ne1gq7rL/1/

You might transfer this to the new configuration and additionally define a center area for displaying the initial position.

@luiggi19authorFeb 15.2016 — #First I wanted to recommend looking for a better hoster but then I had a look at smugmug and I'm afraid you need the features of selling photos etc. and therefore cannot switch to another hoster.

Did you already take into account that a user might use a touch device where there is no hover?

When thinking about hovering you have to be aware of the following: When the area for hovering the logo is limited to the logo itself, the logo slides down and the mouse leaves the logo so that the animation would stop and revert. This might result in an endless loop.

A solution for this might be to define larger and fixed areas for the hovering like I did in the previous solution. I switched on the borders to clarify:

https://jsfiddle.net/Sempervivum/ne1gq7rL/1/

You might transfer this to the new configuration and additionally define a center area for displaying the initial position.[/QUOTE]

Hi Sempervivum, as always, thanks again for the reply.

Exactly... not the best host I guess but the selling features it has are top-notch and save me tons of time from doing-business and more to go out and shoot, which leads to more products to sell... Wordpress, Zenfolio, Squarespace and others made it much difficult although having more customization.

I thought the hover function was just to be in desktops or mouse-controlled devices, thus leaving touch devices away, so that the animation would only be visible in the desktop/laptop user.

Concerning the logo animation, then I would just quit on it and as the first animation is completed, the two only options for the user would be to go for the other animation (or just click in the other option) or click the link of the animation completed (say title 1 if finished).

And also, one more disadvantatge on smugmug, but no javascript admited. Would it be possible for the animation to be there only using CSS/HTML? No need for the stop function if the mouse is hovered away from the area, just the fact that "if hovered on title 1 or 2, animation must be completed before doing animation 2/1". Any clue on it? Would there be a problem for touch devices then?

@luiggi19authorFeb 15.2016 — #BTW if needed, the code of the web is in here: https://lluisballbe.smugmug.com/

I'm doing changes on the go ?

@SempervivumFeb 15.2016 — #Would it be possible for the animation to be there only using CSS/HTML? No need for the stop function if the mouse is hovered away from the area, just the fact that "if hovered on title 1 or 2, animation must be completed before doing animation 2/1". [/QUOTE]Just trying to find a solution using pure CSS. My knowledge regarding CSS animations is still limited, but I'd like to improve it as it's an interesting subject. Currently I don't know how to start two animations at the same time. Posted this problem at stackoverflow:

http://stackoverflow.com/questions/35420420/css-synchronize-different-animations

Someone has also posted a solution. Maybe it will be possible to limit the hover to a smaller region.

@luiggi19authorFeb 15.2016 — #Just trying to find a solution using pure CSS. My knowledge regarding CSS animations is still limited, but I'd like to improve it as it's an interesting subject. Currently I don't know how to start two animations at the same time. Posted this problem at stackoverflow:

http://stackoverflow.com/questions/35420420/css-synchronize-different-animations

Someone has also posted a solution. Maybe it will be possible to limit the hover to a smaller region.[/QUOTE]

Wow! Thanks so much Sempervivum, so appreciated!

I'm loosing my mind on how to solve it but since I come from marketing background the idea is easier than the development :p I'll keep an eye on the post if someone finds a solution for it. Meanwhile I'll be spending the night trying to fix it anyway hahahaha.

@luiggi19authorFeb 16.2016 — #Just trying to find a solution using pure CSS. My knowledge regarding CSS animations is still limited, but I'd like to improve it as it's an interesting subject. Currently I don't know how to start two animations at the same time. Posted this problem at stackoverflow:

http://stackoverflow.com/questions/35420420/css-synchronize-different-animations

Someone has also posted a solution. Maybe it will be possible to limit the hover to a smaller region.[/QUOTE]

Hmmm, not quite it since it is missing the logo and changed from vertically to horizontally divided layout... ? The animation is great and would really do it, and on the smartphone works as with no hovers which is great. Do you mind if I edit the post? Do you know how to solve it with the answer he gave you? Tried to match it by changing the animation from width to height but didn't work anyway... And also tried to put in there the logo which worked awfully xd

Looks like my ideas are harder than they look hahahaa

Thank you so much Sempervivum, at least it looks much closer to it now ?

@luiggi19authorFeb 16.2016 — #Made this threat as well with updated info on what is intended ?

http://stackoverflow.com/questions/35421979/centrally-divided-layout-with-animation-only-css

@SempervivumFeb 16.2016 — #The animation is great and would really do it[/QUOTE]No problem to change the orientation and add the logo. I will do this if you can't do it on your own.

@luiggi19authorFeb 16.2016 — #No problem to change the orientation and add the logo. I will do this if you can't do it on your own.[/QUOTE]

Please! That would be awesome. A user also commented this: and is working great on stackoverflow or anywhere, but not in my site ? : http://stackoverflow.com/questions/35421979/centrally-divided-layout-with-animation-only-css

If you can code the animation to run on it would be great! The answer they gave on your post worked great. The only thing missing would be how to add the separator, logo and the images in the background which would run the animation too.

If its too much concern don't bother, since its been a ton of help by your side already ?

@luiggi19authorFeb 16.2016 — #I have posted the code at jsfiddle here: https://jsfiddle.net/lluisballbe/ab8mwwsz/

@SempervivumFeb 16.2016 — #Unfortunately I do not understand the code in the answer of your own question at stackoverflow completely. Therefore I started to adjust the code from the answer in my own posting. Here is a first result:

https://jsfiddle.net/Sempervivum/vja85zgL/3/

Changed the orientation to horizontal and limited the hovering area horizontally.

Borders are for debugging only.

@SempervivumFeb 16.2016 — #Update:

https://jsfiddle.net/Sempervivum/vja85zgL/11/

Maybe you can do the rest on your own: Backgrounds, lower button, enlargement of buttons when container is enlarged.

The logo is assigned to the lower container. Thus the lower container is enlarged when hovering the upper part of the logo. This can be fixed easily by splitting the logo into two parts and assigning them to the correct container.

@luiggi19authorFeb 17.2016 — #Update:

https://jsfiddle.net/Sempervivum/vja85zgL/11/

Maybe you can do the rest on your own: Backgrounds, lower button, enlargement of buttons when container is enlarged.

The logo is assigned to the lower container. Thus the lower container is enlarged when hovering the upper part of the logo. This can be fixed easily by splitting the logo into two parts and assigning them to the correct container.[/QUOTE]

Sorry about not replying today much! Did a few tweaks and kind of have the design but without the animation... I'm going to try to use the code and see if my platform works, since the other user chatted with me and told me that there where tons of css inherited on smugmug by itself. I'll keep updated ?

Also in #CSS _↴

How to fix DIV to the top?overflow:hidden and Opera win Vertically Centering Content

Success!

Help @luiggi19 spread the word by sharing this article on Twitter...

Tweet This

Homepage Animation (Centrally divided layout)

24 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Homepage Animation (Centrally divided layout)

24 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

24 Comments(s) _↴

Also in #CSS _↴