This project I am working on required me to build a moving animation that uses nothing other than css and styled divs.
A perfect working example of something almost identical can be found here (note the blue background white moving squares):
http://www.braintreepayments.com
However, unlike the demo above, my design consists of about 10 times more div shapes in the animation and when the animation timing expires, the container becomes blank, which makes it looks like it was poorly designed.
My question is, how does the animation in the above example create the 'continuous / infinite effect' on their website, with so little styled divs? I have been trying to formulate something to replicate this effect no success.
Note: I open to using a JQuery / Javascript solution as well.
By using the anitmation-iteration-count property and using the infinite value - you will have a hard time finding the matching selector as their CSS is minified, but that rule exists somewhere in their stylesheet.
Related
I have a text div and several buttons that I would like the text to smoothly fade in and out when changing and/or hiding.
From checking Google and Stack Overflow, most of the answers suggest applying a CSS class of hide, then toggling that class while using a custom function to wait half a second before changing the text so the timing is perfect when the other text fades back in.
But I've read that can have problems with text that has span tags which mine have, and several people have also suggested there may be some plug-ins to simplify the process.
I can't find one, but is there a better method or a plug-in to handle this without replacing all of my code that updates text with custom functions?
I don't mind doing that if it's the only way, it just seems like there's likely a better/more intuitive option?
About your statement:
I have a text div and several buttons that I would like the text to
smoothly fade in and out when changing and/or hiding.
Fade in / And Fade out can be achieved via CSS itself, or with Javascript or if you are using a JQuery library with that also. And text within buttons will not create any issues at all.
In Pure CSS you may require only two properties:
transition and opacity to be used in proper way.
This link can be helpful from CSStricks https://css-tricks.com/almanac/properties/t/transition/
In JQuery there you have fadeIn() and fadeOut() functions which takes care of all the CSS internally and you only have to call these.
You may check this resource from W3Schools
https://www.w3schools.com/jquery/eff_fadein.asp
And Lastly even in pure Javascript the same can be achieved, depending on the requirement you have.
So I have this issue with something like old deprecated <marquee>. Here's fiddle: https://jsfiddle.net/qbqz0kay/1/
It's one (and simpliest) of hundreds of attempts. I can't resolve main issues:
how to remove the gap between end and (new) beginning of the list (it should be like one infinitely scrolling sentence). I've tried with removing first li elements and adding them to the end but it affected overall dimensions of the list and in consequence - the animation was disrupted.
part of the list will be changing once in a while (site is connected to websocket) and every change in its content affect dimensions of the list also. So again - problem with stuttering animation occured.
Any ideas how to handle this? I've seen many ready-made examples but none of them handles those two issues.
Marquee can't help you in this case, as you can't achieve continuous scrolling using this element. Instead, just a bit of javascript might do the trick here. I tried this example which is also very well documented on my own blog and worked perfectly fine, more on this article:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I came across this interesting effect over at http://birvacreativestudio.com/theme/birva200/index.html The one I am talking about is the changing text (Probably the first thing you'll notice)
I got inspector out to see how it was done, but can't figure it out, Is the developer using purse css for this or some sort of mixture with javascript/jQuery?
Could anyone explain to me how to replicate it with jQuery? Are there any plugins/libraries that are good for these type of effects?
They're using Owl Carousel.
See the FadeUp transition here: http://owlgraphic.com/owlcarousel/demos/transitions.html
You can get great text animations easily with this JS animation platform:
http://www.greensock.com/gsap-js/
(just look at the animated header on that page, you'll see what can be done with this + its faster then jQuery animate)
I'm trying to create several buttons that have 4-5 frames of animation in them, and rather than using the typical CSS method (where 1 image has both states, and CSS toggles between top and bottom), I was curious if anyone had an idea on how to do this with 4-5 frames rather than 2. Obviously CSS alone can't make this happen - but its becoming a real challenge to find ANY info on this. Because the images have individual animation, I can't simply use the opacity to fade into the new image, it has to contain all 4-5. Any help would be much appreciated!
Zach
have a look at k10k and see how the buttons in the top are done: animated png's and animated gifs ;)
The only way I can think of to do this without JavaScript would be for the hover state to load an animated GIF for the background image. Otherwise, you'd have to use something like jQuery to animate the background-position property instead.
for this you'll need to use an animated GIF. if you don;'t have a animated GIF creation tool installed, either use Photoshop, which may be massive overkill, or one fo the free tools like GIFted motion
A very non-traditional frowned upon way this can be done is to...
-Animate them as a flash object. Export the xml/flash and imbed it into the htm
Flip is a great JQuery plugin for flipping blocks, but it doesn't preserve the background while it animates the flip.
For example, I have this pretty background here, before I flip. While flipping, it gets ugly.
Is there a way I can flip this div nicely, keeping the pretty background I have, and maybe even achieve a smoother animation than I can get with Flip?
If I need to dive into this headfirst and code my own function for flipping a div, that's also doable, and I'd really appreciate some pointer there, if that's what I must do.
Thanks so much!
Try the jQuery QuickFlip pulgin, this one seems pretty neat with handling the background.
Try looking into momoflow, its a coverflow type of application that animates the background to different angles.
It's using the canvas tag however, which could be an issue for you if you want IE compatibility. However the technique the dev is using is to chop the the image into several vertical slices and animate their position. You could extend this functionality to introduce a full flip!
A really cool way to do this is use CSS 3 transformations. It's much better than using a script; you should always avoid using scripts where simpler methods can be employed.