How to Rotate Canvas Element on the X axis with Javascript - javascript

I would like to know if there is a specific method to make this kind of animation?
Rotation Axis X:
https://gyazo.com/78c66d5cd8fc0bcb5ab2e0c3ddb77508
Is it possible to do with canvas 2d or to reproduce something similar ?
Thank you

Rather than Canvas, CSS animations would be an ideal candidate for this sort of thing.
eg.
body {
background-color: #444;
}
#keyframes slideDown {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
.outer {
perspective: 500px;
perspective-origin: 50% 0%;
width: 200px;
}
.inner {
padding: 20px 0;
font-weight: bold;
transform-origin: top left;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-name: slideDown;
animation-direction: alternate;
background-color: yellow;
font-size: 50pt;
font-family: arial;
text-align: center;
transform: rotateX(-90deg);
}
<br/>
<center>
<div class="outer">
<div class="inner">Texte</div>
</div>
</center>

Is it possible to do with canvas 2d or to reproduce something similar ?
Yes, it is possible to achieve this effect on a 2d canvas - but it takes an awful lot of coding to do it in vanilla JS.
One approach is to create a second, hidden canvas in which you generate the scene that you want to animate in the existing, visible canvas. Then you need to copy the hidden canvas to the visible canvas on a 1px hight row-by-row basis, calculating the appropriate destination x, y and width values to emulate the 3d effect. However, the result will often include a Moire effect (https://en.wikipedia.org/wiki/Moir%C3%A9_pattern) - the simplest way to get rid of it is to very gently blur the visible canvas until the unwanted interference patterns disappear.
Clearly the above is not an ideal solution - if you can use a WebGL canvas you can make use of 3d canvas libraries (for instance, three.js) which should make generating the effect a lot easier. A CSS approach - as outlined in another answer here - would be an even better solution!
If you really can't move away from the 2d canvas, then you can achieve the effect using the Scrawl-canvas JS library (disclaimer: I maintain this library) - see an example here: https://scrawl-v8.rikweb.org.uk/demo/dom-015.html

Related

CSS Spritesheet movement transition. Ease without sliding through the background image

It's somewhat hard to explain because it's a mouthful but I'll try to give you the context as best as I can.
I have a little character, facing north, south, east, and west, on a CSS sprite sheet. In my game. you can control his movements with WASD, causing him to visibly move X amount of pixels up, down, left, or right. Depending on that direction, the CSS sprite changes to accommodate accordingly so that he's always "facing" the direction he's travelling.
My problem is that I want to use the CSS transition property, but when I do so, it causes the movement I want however it scrolls through the CSS sprite, which I do not want.
My question is, what CSS property controls the pixel movement on the screen, because setting it to "All" transitions everything, including the background position which I do not want.
I have the following CSS code:
.player {
background: url(character.png) no-repeat top left;
width: 48px;
height: 48px;
position: absolute;
margin: 0;
z-index: 100;
transition: all .25s ease;
}
.player.playerFront {
background-position: 0 0;
}
.player.playerBack {
background-position: -48px 0;
}
.player.playerLeft {
background-position: -96px 0;
}
.player.playerRight {
background-position: -144px 0;
}
Javascript:
player.className = 'player playerRight';
player.style.left = parseInt(player.style.left) + 48 + 'px'; // Example of the JS when the player moves right
I've tried a variety of possibilities... none of which have worked. Everything on StackOverflow and online only talk about animation or hover effects and don't apply to my specific problem.
The reason you don't see a smooth transition in movement is that your JS is moving the character in 48px increments. When you set a style like that directly in JS, you won't see it animate because it sets it to the new value immediately - even if you put a transition property on it.
Edit:
If you only want to transition the position and not the background-position, you'd do it like this:
transition-property: top, bottom, left, right;
transition-duration: 0.25s;
transition-timing-function: ease;
That said, it still won't have an effect if you're using JS to set the style. When you set style.left += 48px, it's going to move that 48px all in one go.
Alternatively, you might have an issue with how your spritesheet is set up. Make sure each "sprite area" (ie, each segment of the sheet that might be visible at once) has the sprite centered in it, not against any of the edges. (It might be helpful to make a codepen showing what you've got, if you want more detailed answers.)

Shade out sector of circular image using css and javascript

I have a simple circular image with an overlaying div of same dimensions and opacity of 0.4. I want to shade out only part of the image i.e. if I give it 100 degrees, I want it to show a circular section of the overlaying semi-transparent div of only 260 degrees. I have searched a lot but am not sure how to do this.
Here is the CSS for the overlaying div:
.shade {
position: absolute;
text-align: center;
width: 50px;
height: 50px;
border-radius: 100%;
background-color:#ffffff;
opacity: 0.4
}
This may help out a ton. It's for CSS3 Pie Charts, but maybe you can use some of these techniques to accomplish what you want with straight CSS.
http://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/

Animating a spritesheet using css

I am having trouble animating a spritesheet using css
every example i see contain a sprite sheet with only 1 line of sprite or 1 column
like this :
and they animate it using the keyframes
#keyframes play {
100% { background-position: -1900px; }
}
but for me the spritesheet is a grid with 10x8
Is their anyway to achieve an animation using css for this particular spritesheet ? or i should use HTML5 canvas instead ?
Every frame is 90x96 px
this is my image
The way to handle an animation on grid sprites is to use 2 animations.
One for horizontal and one for vertical
Live Demo
.hi {
width: 90px;
height: 96px;
background-image: url("http://i.stack.imgur.com/G7o8R.jpg");
-webkit-animation: playv 6s steps(7) infinite, playh 1s steps(9) infinite;
}
#-webkit-keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: 100%; }
}
#-webkit-keyframes playh {
0% { background-position-x: 0px; }
100% { background-position-x: 100%; }
}
My answer is based on this answer:
CSS animations with Spritesheets in a grid image (not in a row)
The easiest, most KISS (keep it super simple) method I'd suggest is to take the image generated from texture packer, and copy and paste each row into just 1 long row, so you then have 1 long line. Save that as a new file to work from. More similar to the 1 line / 1 column example you have at the beginning.
I'd also suggest adding more padding/space between each fuzzball (best description I could think of) if possible. Otherwise targeting each frame with no bleed on the edge may be difficult. Such as row 9, column 9, with the fuzzball arms almost touching.

CSS Keyframe Movements with Delays

I'm stumped with this animation. I have an element that I'm creating a path for movement (not including vendor prefixes in sample):
keyframes Path_1{
0% {left:54%;top:66%;}
50% {left:54%;top:68%;}
100% {left:54%;top:66%;}
}
This creates a simple path movement.
Paths are supplied to some JS like so:
"path" : "54,66||54,68"
The JS loops through all coordinates passed in and automatically generates a path movement keyframe. It also handles adding the last coordinate pair to loop the animation.
I'm wondering if there is any way to supply specific speeds / delays to each point?
keyframes Path_1{
0% {left:54%;top:66%;} <- 1s
50% {left:54%;top:68%;} <- 5s
100% {left:54%;top:66%;} <- 10s
}
Thanks!
You can't provide delays as extra parameters in the keyframe declaration. You basically get percentages within which you define which properties animate from what, to what during the fragment of animation overall time that the percentage defines.
However, there are ways of doing this. I've created a jsfiddle here
.animation {
width: 100px;
height: 50px;
background-color: #f00;
animation: demo 5s ease-in infinite;
}
#keyframes demo {
0% {
width: 100px;
}
50% {
width: 400px;
}
90% {
width: 400px;
}
100% {
width: 100px;
}
}
We can see that the animation is programmed to last 5s, but at one point a delay is achieved by keeping the animated properties static for n%. At 50%, the animation sticks at 400px and stays that way until 90% and the effect is a 2s pause. 40% of 5s = 2s.
Speed is also possible by adjusting the percentage and the overall time. The first section of the animation is slower than the second because the time spent to cover the same distance is just 10% of the overall time rather than 50%.
As usual, CSS Tricks does a great run through of what's available.
Now you just need to define this data in your json and interpret it in your javascript to build the correct keyframe anims, have fun with that!

smooth opacity transition on an element with a filter applied

so I have a DIV with a blur filter applied to it. I am trying to "fade in" the DIV using CSS opacity (0 to 1) over a one second transition. The DIV does fade in, but it is very glitchy. I tried increasing the transition time, but it still glitches between blurred states. any idea how to smooth this transition? here is the code I am using:
SVG code:
<svg>
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="15" />
</filter>
</svg>
CSS code:
#testdiv
{
background: url('images/background-buildpresentation.jpg') fixed;
border-radius: 30px;
color: white;
filter: url(#blur-effect-1);
font-family: arial;
font-size: 40px;
height: 80%;
left: 10%;
opacity: 0;
position: absolute;
top: 10%;
transition: all 1s;
width: 80%;
}
HTML code:
<div id="testdiv">Display some text here</div>
JavaScript creates the transition:
setTimeout(function(){testdiv.style.opacity="1"},2000);
This may just be a limitation of the browser. I am testing in firefox 27 currently. thanks in advance.
doug
A stdDeviation of 15 is very large. That is the equivalent to a blur radius of 45. That means for every pixel in the div, it is doing 4 x (45 + 45)^2 multiplications. For a div that is 80% of the page (I am guessing from your CSS), that could be something like 800 x 800 x 4 x 90^2. Assuming my maths is correct, that's over 20 billion calculations per step of the opacity transition. Even with graphics hardware, that probably isn't going to be that smooth.
There are possible alternatives. You could draw the blurred div into a canvas and then fade that. See
converting div and its associated elements to canvas jquery?
or
http://html2canvas.hertzen.com/

Categories