Beer Bubbles CSS
Another random conversation led to this experiment . . . it’s animated CSS which is pretty cool but I can’t take any credit for it.
I found this example on Codepen and then mainly gutted it to make what you see below (also a minor experiment with flexbox).
See the Pen CSS Animated Beer Pour (Forked from CSS Beaker Pen) by Tom (@twwoodward) on CodePen.
Related posts
Hide/Show Angular via URL Variables
flickr photo shared by Internet Archive Book Images with no copyright restriction (Flickr Commons) For some reason I’ve been hiding/showing things a lot recently. One nice little trick I saw (and have already used) was based on the target class. You can see it working – hidden here and expanded here. Notice the #details piece in the URL. The CSS that makes it work is below. Nice and simple. That’s nice if it’s one element you can address via an id. It doesn’t work if you want to hide and show multiple items which might have the same id. I wandered around a bit and found a more interesting way to do it in Angular. The following javascript gets the variable from the URL. It’s straight from this article. So this URL http://bionicteaching.com/tools/hcps/hcps-tools.html?school=varina_hs would pass varina_hs to the variable school. If the school=varina_hs chunk is gone, then the box is invisible. I need to add that variable to the Angular scope so it can be accessed in the template. So now that we have that we can use it. Wandering around a bit I found ng-if. It’s essentially a way to show or hide and element based on whether the statement returns true. This code will return TRUE under either of two conditions. If the JSON element entry.gsx$school.$t has the […]
Feedly to Diigo
Not perfect but control clicking on the title of the article in Feedly lets me choose Diigo Web Collector>Save to Diigo from the menu (on Chrome on a Mac with the Diigo plugin installed). I’m assuming right clicking on a PC will do the same. What’s funny is I’ve been trying to figure a decent way to do this for a while. I didn’t think it was worth the pro version fee. There are many people who want Feedly/Diigo integration (Delicious is the current default). I was about to go the very difficult route of trying to write a browser plugin similar to Alan’s Flickr CC attribution helper. I was already at the point of looking at Chrome’s API documentation. I was then in the place of wondering if a Chrome extension could impact a Chrome application . . . luckily I then thought of an amazingly easy straightforward solution. I know my reliance on the freemium tools of Internet is fraught with all kinds of drama. I’m working on it and I have backups. I will not weep if they wander off.
Scrolling Text
We seem to have a need to take names and create scrolling text for various things (honor roll, Veteran’s Day, etc.). It was making me unhappy to have people spending time adding these names to PowerPoints or doing other manually intensive ways things to make this happen. I figured the Internet would have to have a better way. Here is one. After a search or two, I ended up at Max Vergelli’s jquery scroller. Down at the bottom on the examples page, I found the vertical scrolling option I wanted. I downloaded the files. I took my usual path, which is to open up the file and delete the stuff I didn’t want. I focused mainly on the HTML portion figuring it wouldn’t matter if the javascript loaded if it didn’t display. After a few tries, it turns out that I was wrong and that stuff does matter. So I also deleted all the unnecessary javascript pieces, or at least enough so that things worked. You can get a fairly clean version of the file that focuses on vertical scrolling by saving this webpage. You could also view the source etc.View source ought to be a good friend in most situations where you’re trying to figure this kind of thing out. Do keep in mind you’ll need the additional files […]
[…] been fairly busy. That said, I’ve been meaning to play around with CSS animation thanks to Tom Woodward’s post last month featuring beer bubbles. And after talking with Bryan Mathers about more seamless animation of the artwork […]