Jump to content



Photo

Interesting landing page with two choices?

Answered Go to the full post landing page choices

  • Please log in to reply
16 replies to this topic

#1 Cute James

Cute James

    Neowinian

  • Joined: 14-June 11
  • Location: Hamamatsu, Japan

Posted 17 April 2014 - 00:43

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!



Best Answer +Seahorsepip , 21 April 2014 - 16:52

And how I would make it responsive:

http://jsfiddle.net/...mbedded/result/

Go to the full post



#2 +Zlip792

Zlip792

    Neowinian Senior

  • Tech Issues Solved: 9
  • Joined: 31-October 10
  • Location: Pakistan
  • OS: Windows 8.1 Pro 64-bit
  • Phone: Nokia C3-00 (8.70 firmware) It sucks!!!

Posted 17 April 2014 - 10:13

For Mozilla Slider, you can look into this thread: http://www.neowin.ne...mozilla-slider/



#3 OP Cute James

Cute James

    Neowinian

  • Joined: 14-June 11
  • Location: Hamamatsu, Japan

Posted 18 April 2014 - 03:54

For Mozilla Slider, you can look into this thread: http://www.neowin.ne...mozilla-slider/

 

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



#4 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 18 April 2014 - 10:44

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*



#5 OP Cute James

Cute James

    Neowinian

  • Joined: 14-June 11
  • Location: Hamamatsu, Japan

Posted 18 April 2014 - 22:37

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!



#6 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 19 April 2014 - 12:23

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.



#7 OP Cute James

Cute James

    Neowinian

  • Joined: 14-June 11
  • Location: Hamamatsu, Japan

Posted 21 April 2014 - 03:00

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

Purely notepad?

 

May I ask how you would go about scripting the animation for something like this:

https://www.dropbox....7/Animation.ppt



#8 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 April 2014 - 11:07

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

 

Lemme write a jsfiddle.



#9 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 April 2014 - 12:15

Here's the not animated html to start with: http://jsfiddle.net/ZHQjS/14/



#10 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 April 2014 - 12:27

And here's the same page animated:

http://jsfiddle.net/...mbedded/result/



#11 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 April 2014 - 12:32

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

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



#12 Mur

Mur

    Design & Conquer

  • Tech Issues Solved: 1
  • Joined: 04-April 14
  • Location: Canada
  • OS: Windows 8.1.1
  • Phone: iPhone 4s

Posted 21 April 2014 - 15:41

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.



#13 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 April 2014 - 15:53

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.



#14 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 20
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 April 2014 - 16:52   Best Answer

And how I would make it responsive:

http://jsfiddle.net/...mbedded/result/



#15 MikeChipshop

MikeChipshop

    Miniman

  • Tech Issues Solved: 3
  • Joined: 02-October 06
  • Location: Scotland
  • OS: Win 8, Win 7, Vista, OSX, iOS, Android, WP8 and various Linux distro's
  • Phone: HTC 8X / Nexus 5

Posted 21 April 2014 - 17:16

Good work as always Seahorsepip!