Sign in to follow this  
Followers 0
Cute James

Interesting landing page with two choices?

17 posts in this topic

Good morning,

 

I would like to request suggestions for attractive and interesting 'landing pages' that offer two independent routes (e.g. /route1/ or /route2/).

 

I am responsible for a product website hosted at http://www.kawaimp.com (some of you may recall my asking a Retina DPI query about it recently).

This website currently provides product information for one model only (stored in /mp11/), however content for another model is in development and will be stored independently in a separate folder (/mp7/) .

 

My plan is to design an interesting landing page for the website that acts as a model selection page with links to /mp11/ and /mp7/ .

 

I have some ideas in my head, but would appreciate suggestions from other Neowin members.  I rather like the sliding/expanding interface of http://www.mozilla.org/en-US/ , however I don't know how this could be adapted from the current four choices to just two.

 

Many thanks in advance!

Share this post


Link to post
Share on other sites

Thanks, yes that's actually the post I initially recalled when thinking about this subject.

 

I've prepared a mock-up of how I'd like the landing page to look, so fingers crossed our agency will be able to work their magic.

 

2gv515i.png

Ah that's a cool idea, *seeing already some cool animations for this*

1 person likes this

Share this post


Link to post
Share on other sites

Ah that's a cool idea, *seeing already some cool animations for this*

Thanks. ;)

 

Yes, I also prepared a PowerPoint file for the agency to reference, with the various elements sliding in and fading etc.

Perhaps it's a little too busy (a little animation goes a long way!), but we'll see what happens.

 

On the topic of animations, which tools would you recommend for producing HTML5/CSS animations?

 

Cheers!

Share this post


Link to post
Share on other sites

Thanks. ;)

 

Yes, I also prepared a PowerPoint file for the agency to reference, with the various elements sliding in and fading etc.

Perhaps it's a little too busy (a little animation goes a long way!), but we'll see what happens.

 

On the topic of animations, which tools would you recommend for producing HTML5/CSS animations?

 

Cheers!

Notepad, I don't use any animation tools for animations.

Share this post


Link to post
Share on other sites

4 elements, 2 gray blocks with text and 2 image blocks that slide/fade in.

 

Lemme write a jsfiddle.

Share this post


Link to post
Share on other sites

And here's the same without a fixed width: http://jsfiddle.net/ZHQjS/19/embedded/result/

Though it requires additional mediaqueries to be fully responsive without bugs ;)

Share this post


Link to post
Share on other sites

Thanks. ;)

 

Yes, I also prepared a PowerPoint file for the agency to reference, with the various elements sliding in and fading etc.

Perhaps it's a little too busy (a little animation goes a long way!), but we'll see what happens.

 

On the topic of animations, which tools would you recommend for producing HTML5/CSS animations?

 

Cheers!

http://daneden.github.io/animate.css/

 

Check out this for a 'just-add-water' solution. In order to make it do exactly what you want you'll have to investigate some javascript to add and remove classes, but this will save you some time AND allows you to experiment with different animations so you can make an educated decision of which you like best.

Share this post


Link to post
Share on other sites

http://daneden.github.io/animate.css/

 

Check out this for a 'just-add-water' solution. In order to make it do exactly what you want you'll have to investigate some javascript to add and remove classes, but this will save you some time AND allows you to experiment with different animations so you can make an educated decision of which you like best.

That is nice for simple animations but using animation sequences will become messy with these things and not to forget that the whole reason css animations exist is because they're meant to replace js animations. Using js again to do some css animations is just a bad idea.

 

You can better use pure css animations which aren't that hard to create and understand and then combine them into one animation or use them after each other like so:

.object {
    animation: ani1 1s 1,
               ani2 1s 1s 1;
}

The above code runs both animations after each other:

-ani1 runs for 1s once

-ani2 runs for 1s after 1s once.

 

The link above is great for looking into how certain css animations are created but don't trigger them with js when it's not necessary, if you want to do animation on a button click I can understand but otherwise it's just a bad idea to use js.

 

Keep in mind you can also trigger animations using checkboxes with :check or with input boxes with :require and :focus and of course with :hover and :active.

Share this post


Link to post
Share on other sites

Good work as always Seahorsepip!

1 person likes this

Share this post


Link to post
Share on other sites

Wow, that's terrific - great work Seahorsepip!

I wasn't expecting you to actually code the whole thing.

 

Your code works very well, and I expect it may be useful to the agency.

I will send a PM to discuss remuneration for your efforts.

 

Cheers!

Share this post


Link to post
Share on other sites

Just to update the thread:

 

The additional content and landing page went online last Friday.  Our agency used my design and animation as a reference and I am satisfied with the results.

The completed site is online at:

 

http://www.kawaimp.com/index.html

 

Cheers!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.