CSS Pirate Ship Simulator with Sass, Compass and CoffeeScript(css-pirate-ship.yourwebisonline.com)
css-pirate-ship.yourwebisonline.com
CSS Pirate Ship Simulator with Sass, Compass and CoffeeScript
http://css-pirate-ship.yourwebisonline.com/
2 comments
Hey thanks for the pointer.
It's definitely a lot smoother using translate.
But I'm running into a hiccup on the implementation. The trick is there are actually two Norths, they are identical and one is on each end of the background. Once you hit North-2 on the right end, and you want to keep turning to the right, it needs to instantly "skip" you back to North-1. And vice versa.
The thing I haven't figured out how to do in a smooth way is to disable the transition, for that split second to allow for the jump.
What I've done so far is give each direction a class with the corresponding translate. eg. "go-0, go-1, go-2, go-3, go-4"
I've also created two extra classes "go-0-instant" and "go-4-instant" which, set transition duration to 0 and to skips back to North 1 & 2 instantly.
But the problem is that i needs to happen quickly, and once I remove the "go-0-instant" class and add the class with enacts the normal rotation, the css gets overridden and the instant translate basically gets overridden.
I guess what I'm after is a clean way to do a callback once you know the DOM has picked up on a css class change.
I've run into this issue a couple of times before, I would be stoked to learn of the best way to do this!
Here's the CoffeeScript file that controls the navigation: https://github.com/webpop/css-pirate-ship/blob/translate3d/p...
and the Scss for the cardinal directions: https://github.com/webpop/css-pirate-ship/blob/translate3d/p...
But I'm running into a hiccup on the implementation. The trick is there are actually two Norths, they are identical and one is on each end of the background. Once you hit North-2 on the right end, and you want to keep turning to the right, it needs to instantly "skip" you back to North-1. And vice versa.
The thing I haven't figured out how to do in a smooth way is to disable the transition, for that split second to allow for the jump.
What I've done so far is give each direction a class with the corresponding translate. eg. "go-0, go-1, go-2, go-3, go-4"
I've also created two extra classes "go-0-instant" and "go-4-instant" which, set transition duration to 0 and to skips back to North 1 & 2 instantly.
But the problem is that i needs to happen quickly, and once I remove the "go-0-instant" class and add the class with enacts the normal rotation, the css gets overridden and the instant translate basically gets overridden.
I guess what I'm after is a clean way to do a callback once you know the DOM has picked up on a css class change.
I've run into this issue a couple of times before, I would be stoked to learn of the best way to do this!
Here's the CoffeeScript file that controls the navigation: https://github.com/webpop/css-pirate-ship/blob/translate3d/p...
and the Scss for the cardinal directions: https://github.com/webpop/css-pirate-ship/blob/translate3d/p...
Hi,
I think the best way to solve for that is with CSS keyframe animations. lets say your on the right side of the background and need to cross over - instantly skip to the left side of the background, and keep moving to the resting spot on the left.
@include keyframes(right-left) { from { @include transform( translate3d(-800px, 0px, 0px) ); } 50% { @include transform( translate3d(-1000px, 0px, 0px) ); } 51% { @include transform( translate3d(0px, 0px, 0px) ); } to { @include transform( translate3d(-200px, 0px, 0px) ); } }
@include keyframes(left-right) { from { @include transform( translate3d(200px, 0px, 0px) ); } 50% { @include transform( translate3d(0px, 0px, 0px) ); } 51% { @include transform( translate3d(-1000px, 0px, 0px) ); } to { @include transform( translate3d(-800px, 0px, 0px) ); } }
Basically whats happening is you animation smoothly for the first half, and then right in the middle you 'reposition' so the second half of the animation starts on the other side.
Im not sure if you can do 50, 50.1% but 1% over 1-2s should not be noticeable.
If your still getting jitters even with this technique, you could have two copies of the background side by side and put them in a wrapper div, call it .slider. then apply the translate on the .slider to cross over the seam, and when the animation is done instead of letting it rest on the second background you would set it to rest on the first background but in the same spot, you would apply this in the 99%, to portion of the keyframe animation.
Basically you can use 50% 51%, 99%,100% technique to shift where the animation is happening and have it look seamless even though you may be adjusting the position significantly.
does that make sense ?
I think the best way to solve for that is with CSS keyframe animations. lets say your on the right side of the background and need to cross over - instantly skip to the left side of the background, and keep moving to the resting spot on the left.
@include keyframes(right-left) { from { @include transform( translate3d(-800px, 0px, 0px) ); } 50% { @include transform( translate3d(-1000px, 0px, 0px) ); } 51% { @include transform( translate3d(0px, 0px, 0px) ); } to { @include transform( translate3d(-200px, 0px, 0px) ); } }
@include keyframes(left-right) { from { @include transform( translate3d(200px, 0px, 0px) ); } 50% { @include transform( translate3d(0px, 0px, 0px) ); } 51% { @include transform( translate3d(-1000px, 0px, 0px) ); } to { @include transform( translate3d(-800px, 0px, 0px) ); } }
Basically whats happening is you animation smoothly for the first half, and then right in the middle you 'reposition' so the second half of the animation starts on the other side.
Im not sure if you can do 50, 50.1% but 1% over 1-2s should not be noticeable.
If your still getting jitters even with this technique, you could have two copies of the background side by side and put them in a wrapper div, call it .slider. then apply the translate on the .slider to cross over the seam, and when the animation is done instead of letting it rest on the second background you would set it to rest on the first background but in the same spot, you would apply this in the 99%, to portion of the keyframe animation.
Basically you can use 50% 51%, 99%,100% technique to shift where the animation is happening and have it look seamless even though you may be adjusting the position significantly.
does that make sense ?
Some instructions on how to use it wouldn't go amiss. (i.e. click the wheel)
Hey, thanks for the feedback, had a couple of other mention this me as well, saying they kept trying to drag it. I've added a line of directions as you suggested.
Maybe version 2 will be touch enabled and let you control the wheel to turn to any degree, not just the cardinal directions :)
Maybe version 2 will be touch enabled and let you control the wheel to turn to any degree, not just the cardinal directions :)
My first instinct, after figuring out how to turn, was to try to ram the other ship.
I was very sad when I realized I couldn't even point myself at it.
I was very sad when I realized I couldn't even point myself at it.
Sorry to cause you this great sorrow. And thank you for the ridiculously awesome suggestion. I've been thinking cannon balls... but keep an eye out for ramming in V3! I smell a massively multiplayer CSS based naval title on the horizon ;)
Pull requests welcome, the code is on github https://github.com/webpop/css-pirate-ship
Pull requests welcome, the code is on github https://github.com/webpop/css-pirate-ship
I would highly suggest using a css transform to move your background.
In compass something like:
@include transform(translate3d(-100px, 0px, 0px)); @include transform(translate3d(x, y, z));
It will move the already rendered pixels instead of moving all the elements in the dom, this avoids the endless number of re-flows from the browser engine which are not neccessary when the content inside the background is not moving.
this should make it buttery smooth.
in fact if you are moving anything try and use a transform when possible. You will see huge increases in frame rate.
One more thing, Chrome is incredibly fast and masks these performance bottlenecks. Try using safari or firefox and you will see a much larger difference.