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.)
Related
I'm making a webpage just for a bit of amusement. I want the background image to endlessly scroll to the left when the page is first loaded. The image is set to repeat-x in CSS and is seamless when laid end-to-end. Is this code I wrote aiming in the right direction?
I'm hoping to keep the JS vanilla just for simplicity but if this is better handled by JQuery, CSS or another library I'll be all ears.
I'll be very grateful for the help!
I've already tried some vanilla JavaScript code in a simple HTML document. My efforts so far haven't made the image move at all.
document.addEventListener("DOMContentLoaded", function() {
var y = 0;
while (true) {
y -= 1;
document.getElementById("bgImg").left = y;
}
})
#bgImg {
background-image: url("img1.jpg");
background-repeat: repeat-x;
width: 100%;
height: 660px;
display: inline;
}
<div id="bgImg">
</div>
This simply freezes my browser and doesn't scroll at all. Likely thanks to the "while(true)".
This is best accomplished with a CSS animation instead of JavaScript. CSS keyframed animations are designed to loop smooth transitions between pre-set property states with minimal memory overhead (and no synchronous while loops :P).
The only added bit of information you need to include is the width of your image. If you use this value as the x-coordinate of background-position in the to state of the animation, as soon as the background travels that many pixels, it will jump back to the from position. This jump will be invisible to the viewer, provided you've set the width correctly.
#bg {
background: url('https://www.gravatar.com/avatar/e47523b278f15afd925a473e2ac0b966?s=120&d=identicon&r=PG&f=1');
background-repeat: repeat-x;
width: 240px;
height: 120px;
animation: bgScrollLeft 5s linear infinite;
}
#keyframes bgScrollLeft {
from {
background-position: 0 0;
}
to {
background-position: -120px 0;
}
}
<div id="bg"></div>
I just implemented this on my own site after seeing your question. cool idea!
function animateBg(px=0){
requestAnimationFrame(()=>{
document.body.style.backgroundPosition = `${px}px 0px`;
animateBg(px+0.5);
});
}
animateBg();
It assumes you have a bg image set in CSS. Change the 0.5 to change the speed.
You are moving the element left, but in fact you should move your background position. Next to that with a while(1) loop it will run infinitly. So 2 task, create an animation frame to not run infinite. And change the background-position property.
var left = 0;
// You might want to add a time delta
function animate() {
requestAnimationFrame( animate );
document.getElementById("bgImg").style.backgroundPosition = '0 ' +left-- + 'px';
}
animate();
Note the code probably wont work, but gives you an idea of an solution.
Look into requestAnimationFrame to know what it does.
edit
Look at IronFlare solution, which is more beautiful with css.
I used jquery-ui plugin to realize vertical slider function. I want to realize gradient effect, so I use background images, include bg/range and slide handle. The question is when I slide dot handle to bottom, bg image is compressed. Here is my example code.
jsFiddle
#head_slider .ui-slider-range {
background: url(https://image.ibb.co/hTvN6a/head_slider_h.png) 0px center no-repeat;
}
#head_slider_bg {
position: absolute;
width: 72px;
height: 704px;
right: 100px;
background: url(https://image.ibb.co/mUfpma/head_slider_n.png) center center no-repeat;
}
and the same way to horizontal slider is fine! That's confusing me. Thanks for your reading and help.
The problem is not that the background image is compressed, but the CSS rule border-radius applied to the verticle bar becomes different. When slider slides to the bottom, the height of the verticle bar is less then 60px (the value you set to border-radius), thus the actual border radius will be decreased.
A simple fix to this problem is add a min-height constraint to that element, which you can refer to the updated fiddle (add min-height: 60px at Line 79 of CSS).
For more detail about the behavior of browser handle border-radius, refer to Cornor Overlap section of specification.
I want to create an effect that when a user hovers over text it creates a market felt effect it - exactly like done here: http://courtneycarman.com/
I want it to animate in the same way.
Any pieces of code to how to do this would be greatful.
Thanks
Next time right click, inspect element.
It's right there. But, if you don't know what you are looking for it might be hard to figure out.
The effect is accomplished by a :hover style that will only activate when the element is hovered. In this case it has a gradient background that is normally 'hidden'by a 0 size.
When it's hovered it's set to 100% size.
Then there is a 'transition' defined, that will take care of the animating effect.
.semibold:hover {
background-size: 100% 100%;
}
.semibold {
background-image: linear-gradient(180deg,transparent 55%,#ffde17 0);
background-size: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.4s ease;
<p>here is some text and stuff<strong class="semibold">and this is semibold</strong></p>
I've found that the contact section of the following site keeps spilling over at the bottom, especially when the window width is reduced to mobile size:
http://phixhut.com/test/1page/onepage.html#contact
The CSS I have for the overlay section is:
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
padding: 55px 0 15px 0;
width: 100%;
background-color: #83aa30;
background-color: rgba(131, 170, 48, 0.6);
background-image: url("../images/GPlay.svg");
position: absolute;
bottom: 0px;
top: 0px;
The spill at the bottom disappears if I remove the "top: 0px" but then it appears to spill over at the top.
Not sure how to go about getting the contact section to resize pefectly to stop these spills. Any help would be greatly appreciated!
The solution, albeit inefficient, would be overflow: hidden
You shouldn't use that, however, because the majority of the time the use of that is to basically hide unwanted code. Rather, try to fix the issue in CSS without using the overflow: hidden, so that when you resize nothing overflows.
You could do that by making sure certain items aren't set to a fixed width or height, because if a screen resolution is smaller than that, it will overflow.
Hope that helps.
There is a few thing's causing your problem but the easiest way to sort it would be to remove the current height you have for class="contact" and set it to the height of your overlay container.
Personally I would re write your code.
It would make more sense to have your map and overlay as one background image and remove your absolute positioning and the extra div's you have in there.
It would A. Streamline your code and B. Reduce the amount of HTTP request's & C. your site would act in the fluid nature you are after.
I found this awesome .js called kinetic. I've been messing with the html, css for sometime now and am unable to set the container to full screen.
http://designobvio.us/v4design/demo.html
I've set all the parents to 100% height and tried a fullscreen jQuery. Unfortunately still no luck.
I've paired down the code as much as possible for readability. As you can see I've set the height to just 400px because it just goes crazy otherwise. If there's any thing else i can offer as support, please don't hesitate to ask.
As a second request would anyone have any idea how to set the border to inside. Or make sure that the width fits nicely with borders as is?
You can position your #wrapper div absolutely and just stretch it in all directions with the top, right, bottom, left properties like so:
CSS
#wrapper {
border: 5px solid #000000;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
With this method the borders play nicely with the positioning, but if you want to place them inside your container you can set the border style to inset instead of solid. Also, your control buttons will disappear so to make them pop in front of your image just set them to position:relative and give them a large z-index so they appear on top of everything else.