Soma Posted August 11, 2012 Share Posted August 11, 2012 I thought I'd share a little project I'm working on. Launched the new website for a colleague that has a local cycling delivery service. It's very simple website and is an ongoing project, changing and adding stuff over time. As always it was very easy to setup in PW and he loves the admin to edit his stuff. Previously it was using Limbo and I refused to further use that horrible system. Now using PW it opens up a whole world of possibilities. http://velokurier.com 1 Link to comment Share on other sites More sharing options...
Martijn Geerts Posted August 11, 2012 Share Posted August 11, 2012 Nice one Soma. 2 points. - When header is collapsed & swith to other page, .menu-wrapper is "jumping". Maybe write the css height of .menu-wrapper with PHP in your head. - On smaller screens logo & tel# disappear. 1 Link to comment Share on other sites More sharing options...
Soma Posted August 11, 2012 Author Share Posted August 11, 2012 Nice one Soma. 2 points. - When header is collapsed & swith to other page, .menu-wrapper is "jumping". Maybe write the css height of .menu-wrapper with PHP in your head. - On smaller screens logo & tel# disappear. Thanks for the feedback. Thanks for mention, I actually tried to make it not jump (or at least minimize it), maybe on first loads it can happen, though otherwise I don't recognize any jumping. It's using js and cookies, and haven't looked at it since months but I think it's not easy as the logic is client side, will maybe have a look at it again soon. Yes, it is not really optimized for smaller and mobile screens. Link to comment Share on other sites More sharing options...
Martijn Geerts Posted August 11, 2012 Share Posted August 11, 2012 Jumping is on every reload when collapsed on chrome 21 (numers rising with the day ). If the logic is on JS side inclusive the cookie, think it's not that hard to pick it up with PHP & write the "height" in your head. Link to comment Share on other sites More sharing options...
Soma Posted August 11, 2012 Author Share Posted August 11, 2012 Yes logo and tel# was jumping occasionally here also (no matter what browser). I took a look quickly and injected some css via php, now it should be good. 1 Link to comment Share on other sites More sharing options...
Martijn Geerts Posted August 11, 2012 Share Posted August 11, 2012 Yep, This looks great .... Link to comment Share on other sites More sharing options...
teppo Posted August 12, 2012 Share Posted August 12, 2012 I don't want to sound too strange, but I've been watching that header animation for almost ten minutes now. With inspect tools opened. Drooling a bit. Absolutely brilliant stuff! Oh, and the rest of the site is very nice too 2 Link to comment Share on other sites More sharing options...
Soma Posted August 12, 2012 Author Share Posted August 12, 2012 I don't want to sound too strange, but I've been watching that header animation for almost ten minutes now. With inspect tools opened. Drooling a bit. Absolutely brilliant stuff! Oh, and the rest of the site is very nice too Hehe, not strange that's what we all do sometimes. Glad you like it, I also watched it for hours I think. PS: Don't tell anybody, I activated my, during developement, present and made an eastern egg. Press ctrl+1 Not sure it works in every browser/system though. 2 Link to comment Share on other sites More sharing options...
Marty Walker Posted August 13, 2012 Share Posted August 13, 2012 That looks like it was fun to work on. Nice one. Link to comment Share on other sites More sharing options...
apeisa Posted August 13, 2012 Share Posted August 13, 2012 Didn't understood about the animation you were talking about first. For me there is "close" button visible, clicking close makes the white header a bigger. Clicking "open" makes it smaller. Only after reload the animation is visible. (Chrome / Win7). Happened twice (at work and now at home too). Now that I see it, I agree: animation is super cool! 1 Link to comment Share on other sites More sharing options...
teppo Posted August 13, 2012 Share Posted August 13, 2012 Actually same problem @apeisa mentioned happened to me too. Thought it was just a one-time quirk, so I didn't mention it before. Seems that when page is loaded for first time (when animation / it's components aren't cached yet) the animation won't show up at all. Link to comment Share on other sites More sharing options...
Pete Posted August 13, 2012 Share Posted August 13, 2012 I don't want to sound too strange, but I've been watching that header animation for almost ten minutes now. With inspect tools opened. Drooling a bit. Absolutely brilliant stuff! I thought I was going mad as I've looked at this site a few times the last few days from a couple of different machines but I don't see a header animation: But then I realised that it just took ages to load for me The problem is that until it loads, the site looks like the above. Is there any way to have a loading graphic or something to prop the page open? My only worry is that until it loads, it looked broken to me and might do to others. Only other issue is that whilst pressing CTRL + 1 opens up the slider in Chrome, it switches to your first open tab in FF and sticks in a nasty input field under the animation on your site, which I don't think is intended either. It's awesome typing 200 into that field though as he rides like a maniac then Increase it to 20000 and he starts cycling so fast the scenery moves backwards 20000000 and he cycles on the spot! Other than that, the animation is awesome - great work! I've not seen something this good before that wasn't Flash-based and it's top quality stuff 1 Link to comment Share on other sites More sharing options...
Soma Posted August 13, 2012 Author Share Posted August 13, 2012 Thanks guys! Funny stuff I just realized that after the last change I did, that I forgot to add something when there's no cookie set (so first time visit), must been distracted. Well I know I should have tested but didn't. So thanks for mention it guys. It's now fixed. Not sure about loading time, but the images (pngs) are already as optimized, and as small as it can get. I'm not sure it really was what you Pete experienced, though as you mention I wanted to implement a preloaded but was holding me back. Think it's time to implement it. You're right the ctrl+1 might causing issues to show the slider (which also depends ont he browser but you'll have an regular textfield and it works. Nothing too serious just having fun as I always do. I might set the combo to alt+ctrl+1 or something? And there's nothing wrong it shows underneath the header, haven't really put much thoughts into it, it was still there from the beginning. The animation was fun to do. I used Cinema4D to build a puppet using body parts (like a billboard) and animated through inverse kinematic, so just rotating the foots around the pedals and the rest will follow. So rendering every frame out as pictures, dada I got the sprite animation, which was really rewarding seeing it work. The parallax background was done by creating layers in photoshop and made them tileable, which took a little time to find the right fotos and bits to make it work and not look too strange. I love this forum! It's awesome typing 200 into that field though as he rides like a maniac then Increase it to 20000 and he starts cycling so fast the scenery moves backwards 20000000 and he cycles on the spot! Hehe, have also tried -20000? 1 Link to comment Share on other sites More sharing options...
Wanze Posted August 13, 2012 Share Posted August 13, 2012 Hehe, have also tried -20000? Haha he's driving the other direction =) And i never saw some birds flying backwards that fast Really nice and modern site! Link to comment Share on other sites More sharing options...
Pete Posted August 13, 2012 Share Posted August 13, 2012 -20000 is fun - it's like he's cycling very fast on a rug on a smooth wooden floor (the rug would move but he wouldn't) and the background is attached to the rug I love this forum! It's like having many extra pairs of eyes looking over your work for free which is very useful indeed, but I'm sure that's not exactly what you meant - more the fun aspect and the collaboration Back to the site, it might be worth changing the shortcut from CTRL+1, but to be honest I didn't know that shortcut existed for FF to switch tabs until today so I think it's unlikely anyone will notice. Plus, if anyone presses that and views the site and is curious then they could have fun with the input field. Thanks for letting us know how it was made. I want to check that out now as it sounds like fun - hard work but fun! Link to comment Share on other sites More sharing options...
MadeMyDay Posted August 13, 2012 Share Posted August 13, 2012 Very nice one Soma One thing I would at least try: Include something like transformJS or alike to animate the header with CSS3 transitons if the browser is capable. The result should be a lot smoother. If you don't use it, the positions of the elements are calculated by Javascript (of course) and positioned pixel by pixel. If something like transformJS works, the animate()-function of jQuery gets replaced by appropriate CSS3-settings and the animations get support by the (3D-)graphic card if available. Just a thought Link to comment Share on other sites More sharing options...
Soma Posted August 14, 2012 Author Share Posted August 14, 2012 Thanks MMD. I know, but I'm using a jquery plugin to do the parallax animations + sprite frame animations events etc. And this was done almost a year ago where css animation weren't yet hardware accelerated and not many libs around that matter. Sure there is alternatives but don't want to go as far redoing everything now as it runs pretty well and smoth already. Maybe something to look again at alternatives when I have time. Edit: Also transform js or the other jquery plugs don't work here, as it's not all done simply using animate. Link to comment Share on other sites More sharing options...
MadeMyDay Posted August 14, 2012 Share Posted August 14, 2012 Well, you could give it a try. It extends the animate()-function if the browser is able to and falls back to the common animate() method is transitions are not supported. It works with some plugins and might fail on others. Link to comment Share on other sites More sharing options...
Soma Posted August 14, 2012 Author Share Posted August 14, 2012 As I said it won't work cause it's barely done using animte at all. Regarding CSS3 Animations there's also some things to consider which would make things impossible here when wanting to extend functionality: You can't stop an animation that's already running. You get no feedback as to how the animation is running - only an event callback once it has completed. There's no way to synchronize multiple animations. There's no way to specify custom easing functions. (although there is now easing for webkit) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now