197488
this is really amazing :3
favorites
A Window to the World
A Window to the World is an HTML/HTML5 battle all about making the most of our web browsers.
What was once a simple tool for browsing people's blinky-GIF-filled Geocities pages has become powerful enough to run entire applications. But in this time, we seem to have forgotten the simple joy of making cool things with our web browsers, as the corporate web increased its influence.
So let's make our browsers do cool stuff again, with all the new-fangled features they've built for us to boot!
The theme of this battle is: THE INTERNET. Think of the Web, the old and new, the good and bad. The excitement of finding a webpage that you can scroll through for hours. The hilarity of an early-internet meme. The possibilities are endless in the digital realm. TEH INTERNET IS A SERIES OF TUBEZ! LOLZ
What can you make? Anything goes. Make something that looks cool. Make something that looks cool AND moves when you move around your cursor. Make a story in webpage format. Make a small game in webpage format. Make a webpage in a webpage in a webpage...
Voting categories:
- flair
- creativity
- lolcat
- wizardry
- cursor in pants
(unfortunately the image had to be crunched down very hard to fit within the upload limit; link to original image (HTML format - open in a recent version of Chrome, the animation is buggy in Firefox for some reason - + lossless AVI capture for easier playback): https://cloud.dissonant.dev/s/mYaLNyzDMA9fN8C)
16
12
0
10
17
previous entry
nextious entry
197509
the link to the original html version of the cover is busted cuz u added a parenthesis at the end, but still this sounds absolutley sick!!! love that cover
197549
Amazing cover art!
197566
re: the link, oh whoops, guess that's what i get for submitting right before the deadline :D correct link is https://cloud.dissonant.dev/s/mYaLNyzDMA9fN8C
197600
both well-thought-out and a fun theme... AND very cool artwork... well done on both accounts
197687
i checked out the original files, i am seriously impressed that you achieved all of this with pure css animations. this is an absurd amount of effort that had to be unfortunately scaled down into the less than ideal gif format.
css animations on their own are deterministic so you had to go in and tailor the animations to each individual moving element and have a ton of elements too. the matrix screen has 32 * 24 = 768 elements?!
i would have preferred a high quality still compared to the gif but i respect the dedication here heh..
css animations on their own are deterministic so you had to go in and tailor the animations to each individual moving element and have a ton of elements too. the matrix screen has 32 * 24 = 768 elements?!
i would have preferred a high quality still compared to the gif but i respect the dedication here heh..
197690
re: the format of the cover - yeah, mostly this was done as a flex (look what pure css, no js can do :D) and as a topical bit regarding the battle theme, partially because it was the tool that i was most familar with for this kind of thing (theoretically inkscape or something of the sort would work i suppose, never tried animating in it, and my vector art skills are nonexistent atm). admittedly the idea of just leaving the animation be and doing a still did not cross my mind, the plan was to make it move from the very beginning :D
(...what also did not cross my mind was that it would be difficult to turn it into a GIF without making the filesize huge. i did manage to get a h264/mp4 conversion of it down to ~300kb though, but visual battle arts obviously don't allow mp4, gif was stubborn, and apng was huge with no apparent way to compress it - there probably is one, i just didn't look hard enough, esp since i was rushing to get this uploaded lol)
the matrix screen is a fun one - yes, techincally there's 768 "letters" (well, digits 0 and 1, but i called them letters in the source), but they're split up by column - there's 32 columns, and they're all the same, just shifted by 1 (so column 1 begins with 0, column 2 begins with 1, column 3 begins with 0 and so on). the actual animation happens not on the individual "letter" level, but is a trick done on the column - there's a background gradient from black to green that moves from a position of 0px to 400px (from top to bottom of window) in an infinite animation, then we set background-clip: text on the column to make the background show only through the letters. the same animation is used for all columns, but it's delayed for each one to make it seem as if they're all different. a visual demo would probably make this easier to see - see https://cloud.dissonant.dev/s/CpBRnTt7R7SH25j for a comparison of the matrix screen with and without background-clip: text
(...what also did not cross my mind was that it would be difficult to turn it into a GIF without making the filesize huge. i did manage to get a h264/mp4 conversion of it down to ~300kb though, but visual battle arts obviously don't allow mp4, gif was stubborn, and apng was huge with no apparent way to compress it - there probably is one, i just didn't look hard enough, esp since i was rushing to get this uploaded lol)
the matrix screen is a fun one - yes, techincally there's 768 "letters" (well, digits 0 and 1, but i called them letters in the source), but they're split up by column - there's 32 columns, and they're all the same, just shifted by 1 (so column 1 begins with 0, column 2 begins with 1, column 3 begins with 0 and so on). the actual animation happens not on the individual "letter" level, but is a trick done on the column - there's a background gradient from black to green that moves from a position of 0px to 400px (from top to bottom of window) in an infinite animation, then we set background-clip: text on the column to make the background show only through the letters. the same animation is used for all columns, but it's delayed for each one to make it seem as if they're all different. a visual demo would probably make this easier to see - see https://cloud.dissonant.dev/s/CpBRnTt7R7SH25j for a comparison of the matrix screen with and without background-clip: text
197702
oh i hadn't noticed the gradient + background-clip combo, that's a pretty smart solution!
i think animated cover arts are a bit of a "hack" that has become more popular over the years. i enjoy the spectacle and they can be real impressive (optimising gif animations is borderline torture) but i feel like they're not as fit for purpose as a still cover can be, that's my opinion though. i've struggled in the past to even upload still cover arts if they exceed a resolution of around 500x500px.
i think animated cover arts are a bit of a "hack" that has become more popular over the years. i enjoy the spectacle and they can be real impressive (optimising gif animations is borderline torture) but i feel like they're not as fit for purpose as a still cover can be, that's my opinion though. i've struggled in the past to even upload still cover arts if they exceed a resolution of around 500x500px.
197726
The Internet is a place I go to hang out with digital friends, download recipes, and check the latest sports scores.
