Forums

arny

Hi to all,
First of all, I want to say that i am very glad to be on this forum.

I'm looking the css3 solution for this project --------------------------
All effects I want to repeat with css3. The basic problem - how to organize a smooth moving between screens when clicking on the menu.

I know about jquery solution, but it is very rude.
please, help

thanks!

scheme

I don't know if you can do exactly the same, but as a start, check this out:


*
{
  -webkit-transition: all 0.42s ease;
  -khtml-transition: all 0.42s ease;
  -moz-transition: all 0.42s ease;
  -ms-transition: all 0.42s ease;
  -o-transition: all 0.42s ease;
  transition: all 0.42s ease;
}

#default, #screen1, #screen2, #screen3, #screen4
{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

#default:target, #screen1:target, #screen2:target, #screen3:target, #screen4:target
{
  left: 0;
  top: 0;
}

/*
Place screen1-4 somewhere out of the rendering area using the left and top properties.
*/

Use + and ~ selectors to update your positioning depending on which screen is currently displayed.

(Didn't test this, but should work. I also don't know about browser support for these techniques.)

arny

ok, thanks!
good start. i'll try it today

Mottie

Check out jmpress.js and impress.js (with a builder). Both combine javascript with css3 animation to provide something that I think is even better than that flash demo you shared.

You might want to also check out zoomooz.

arny

cool! thanks!

knittingfrenzy18

I'm glad you've got this down, but just wanted to comment--

jQuery is the better way to go since it has more browser support. If you base your site on CSS3 animations, unless you have some special browser detecting abilities, your site will FAIL in browsers without support, like IE6.

arny

hello again
This is what i've done: --------------------------
I've made a big screen (.window) and placed inside it small screens (my pages)
Now, with "position:absotule" & "left,top" i am moving the big screen to the coordinates

The screen is start moving when i am clicking on the menu links (home,about us, etc.) - with :target
And now i've been pushed against two problems:
1) My "tranzition" animation is not working (i'm changing "left,top" of the big screen) when i am clicking on the menu links
2) I do not know how to calculate the coordinates of a big screen at different resolutions (i want my page be absolutely in middle of the browser)

..lost in the code,
thanks for your helping

arny

pleeease ^_^

arny

anybody?

arny

guys?

arny

hm. is this spam? I do not understand what i need to look at :/

Mottie

I've been looking at it... just no simple solution. Did you try any of those plugins?

arny

hi,
client doesn't want Jquery or any scripts.
we need pure css

arny

no solution?

Mottie

I don't mean to sound rude, but if you're in that much of a hurry. Try StackOverflow.com or maybe pay someone to do the work for you.

Does the client know that sometimes scripting is necessary?

I attempted to make this work, on Friday, but I tried to enjoy my weekend and work on projects that I enjoyed doing... I didn't get a chance to look at this one.

arny

i don't find any help here :(

Paulie_D

You're too needy. It sounds like you haven't explained the limitations of CSS to your client and are now hunting round for a solution to get you out of a problem of your own creation.

dfogge

trying to recreate a flash design of that nature with just css will probably be impossible.

why doesnt the client want to use js?

treehouse : what would you like to learn today?

Forums

need a solution