bryanbraun / after-dark-css Goto Github PK
View Code? Open in Web Editor NEWRecreating After Dark screensavers in CSS.
Home Page: http://bryanbraun.github.io/after-dark-css/
Recreating After Dark screensavers in CSS.
Home Page: http://bryanbraun.github.io/after-dark-css/
Just logging an email request I got:
I wanted to personally thank you for crafting the After dark in CSS page.
I was wondering if there were any chance you might create a"starry night" module?
Starry night would be tough, since there's not a good way to add run-time randomness to CSS animations. Still, I think there are ways to mimic the look and feel, and it would be cool to see one in action. I not planning on attempting this at the moment, but I'll happily merge a contribution if somebody wants to give it a shot.
This is great, so many memories. Thanks!
I bet you can't do MIke's Life in CSS!
I saw this error reported by google search console for these urls:
Things to improve:
One quick way for us to improve the performance of these animations is to rely more on transforms, as explained in this article (and the following image):
The biggest opportunities are in areas where we could animate transform: translate instead of top/bottom/left/right. We can fix this in the following screensavers:
Other opportunities include:
Hey again. ^^
Actually your project motivated me to remake an old After Dark screensaver I used to like when I was a kid. I don't remember the exact name but I prefectly remembered the behavior.
It was a black screen with, at fixed interval, a random quote displays. You could put your own quotes, as many as you want, and you could choose the style and colors of the borders around the quotes. I don't know if you ever seen that one.
Anyway, I just made it and published it on my gitlab. Feel free to include it in your project! ;)
https://gitlab.com/maxlefou/adquotes
Just like the original screensaver, quotes and borders styles are editable easily, just by editing a file named options.js.
This is, literally, the best thing. But you know what would be better than the best thing in one place? The best thing IN EVERY PLACE.
I'd love to have these as jQuery plugins so I can enhance pages with toasters or even set an actual timeout, after which the screen saver will activate.
It's on my todo list for a little bit later. But if anyone's feeling ambitious, have at it.
or Jelly-toast.
The index page is not mobile friendly:
Fixing this is probably just a matter of including the mobile meta tag and testing it on a couple mobile devices.
While we're at it, we should see how the demos themselves look on mobile devices. I don't think they need to be perfect (mobile is not the primary use-case), but at the very least they shouldn't look broken.
Super neat project. I just happened to notice these issues when I was checking it out on my 3440x1440p monitor.
For instance the Spotlight screensaver, when the spotlight reaches one of the far ends of the screen, the black overlay is not of sufficient size to cover the opposite side:
Rainstorm, the effects are left-aligned and do not reach the right side of the screen. The "flash" does however.
These are so cool! What's the license? I'd like to use them on my site
This may be an opportunity to replace the old ribbon image with a more modern one, like Tim Holman's Github Corners, or just the inverted cat Github Logo. I have no preference. Regardless, it should be embedded in the page (like an SVG embed, or data URI) or hosted on Github pages, to prevent it from breaking in the future.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.