Response title
This is preview!
Move this topic
jquery -changing css property and repeating
in Getting Started
•
4 years ago
Hey, so I have this sprite sheet http://codepen.io/benasl/pen/yabpxo
that I want to be changed to another one after it ends, and after the
second one ends the first one needs to start again, and so on... I
managed to do this with just changing css properties, but now how do I
make them loop?
1
Replies(17)
Re: jquery -changing css property and repeating
4 years ago
http://codepen.io/anon/pen/RGgbOp Uses my copy of your images that don’t work because of imgur's rules.
I used the animationiteration event to know when to switch the classes.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: jquery -changing css property and repeating
4 years ago
Thank you, however, I need the spritesheets to change without that blink between switches, like in my first post.
Leave a comment on Benas's reply
Re: jquery -changing css property and repeating
4 years ago
Your post did not work at all for me. So I did not see it blink or not blink.
You can cache the image if needed. The point is that you need to wait for the animationiteration event to know when to switch.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: jquery -changing css property and repeating
4 years ago
But in your first post's codepen, is there like half of second where the spritesheet dissapears and the new one starts?
Leave a comment on Benas's reply
Re: jquery -changing css property and repeating
4 years ago
Leave a comment on jakecigar's reply
Re: jquery -changing css property and repeating
4 years ago
Funny, still blinks for me...It doesn't blink between 'coding' and 'animation' though. May I ask how long have you been using jquery?
Leave a comment on Benas's reply
Re: jquery -changing css property and repeating
4 years ago
Did you refresh? I tested in the latest firefox, chrome and safari.
I read about jQuery before it reached 1.0. I’ve been using it about that long. Now I use more CSS3 than jQuery. I feel good when I can do a site without any javaScript.
JΛ̊KE
funny how sometimes all you need is just different links and different browser....i had a solution which did not work for me on firefox, so i tried it on chrome with your links and it works...somehow...http://codepen.io/benasl/pen/mAwyVa
Leave a comment on jakecigar's reply
Re: jquery -changing css property and repeating
4 years ago
Again, funny..:D - opened the codepen in google chrome and it does not blink anymore, however after every sprite sheet has played the last two just keeps repeating
<div class="kambarys" data-classes="kambarys kambarys2 kambarys3"></div>
It is now updated.
JΛ̊KE
Leave a comment on Benas's reply
Re: jquery -changing css property and repeating
4 years ago
You need to test in every browser. My order is Safari, Firefox, Chrome, Edge. Then sometimes I test on the iPhone, iPad. And if I think it might work, IE, which is not a priority for most of the cutting edge stuff I do.
If you are really concerned about smoothness, make a single sprite with all the words in it.
JΛ̊KE
Thank you for all your help, you're the best! If I'd make it in one spritesheet it would not be in one row but in four minimum...and i do not know how to make the sprite sheet play that has more than one row...
Leave a comment on jakecigar's reply
Re: jquery -changing css property and repeating
4 years ago
Make it in one row. That would be the simplest.
JΛ̊KE
I would but photoshop has a limition of pixels in width, so if the width is too high you can't save it in .png. I mean, I could put all four words in one animation (76 steps), but they would go throught too fast, and if I'd make the animation duration longer the animation would not be smooth..
Leave a comment on jakecigar's reply
Re: jquery -changing css property and repeating
4 years ago
Too bad you don’t have other tools. Find one.
JΛ̊KE
I would use texture packed, but it's free version has flaws...but no worries, You fixed it and I don't need a single spritesheet!
Leave a comment on jakecigar's reply
Re: jquery -changing css property and repeating
4 years ago
CSS3 animations perform great compared to jQuery's moldy animation code, and they are suitable for many simple animation tasks.
But 76 steps of sprites!
It may be better to do it algorithmically than to use the brute-force approach of a bitmap picture for each frame. If nothing else, it can work better on different sized screens if you use vector graphics instead of bitmaps.
When your animation needs become SERIOUS, it's time to move on to a high-performance Javascript animation library. They can be even faster and smoother than CSS3.
slow - jQuery's old-school animation code
good but limited - CSS3
fast and flexible - Modern, purpose-built Javascript animation libraries
Greensock is probably the Gold Standard. But there are others.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Benas's question
{"z634926172":[14737000007035146,14737000007035151,14737000007035153,14737000007035155,14737000007035159,14737000007035157,14737000007035161,14737000007035163,14737000007035165],"z7664639":[14737000007032207],"z2950240":[14737000007031535,14737000007031539,14737000007031541,14737000007031543,14737000007031547,14737000007031549,14737000007031551,14737000007031553]}
Statistics
- 17 Replies
- 2201 Views
- 1 Followers