TOPIC:

I still like jQuery a lot but their animations are definitely not needed anymore in the current year, that should be left to CSS transitions and keyframe animations. So I'm replacing those effects as well - with the most clever thing I stumbled upon in a long time. Without going into incredible detail - this uses a tiny bit of Javascript to set a CSS variable that represents the scroll position. The animations are tied into your scroll position that way. Most beautiful thing to create a parallax-ish effect.

Codepen example, it has a security feature against fishing so just click "Back" to view it

Chris (the author there and owner of the site) Coyier's knowledge base on webdesign is beyond ridiculous.

My web site uses HTML 1.0. Anything beyond that is a bit advanced for me.

I'm actually glad I got into coding when the HTML5 spec had just been introduced. The possibilities may be more complicated now but I think it was a tougher job when you had to deal with IE6 and all the other browser quirks. The last decade has seen a serious effort to make browsers universal and predictable. They all still have their annoying little issues though.



Currently replacing the "logo" on my home page from a simple png into an SVG, where every letter has its own path. Not ready for production yet but it looks super crisp and I'm hoping I can actually animate the color gradient inside it with CSS styling (which remains to be seen if even possible). It's a lot of work but quite satisfying. Listening to some retro '80s music while I'm working at it.

Edit - the colour animation does work in Chrome but Firefox has a bug that's marked as not being intended for a fix. Oh well, a fade from one image to another will also do.

Scalable vector graphics are hurting my brain. They really are a complete discipline of their own. But luckily anything beyond the basics can be achieved by applying CSS styling on them as well nowadays. Nonetheless I have plowed through the images and turned them into SVG or CSS background gradients wherever possible which is pretty cool - the difference may not be all too noticeable (yet) but they provide a lot more options. If the color, stroke or anything else on them should be changed, no need to go into Photo Shop. Editing a few lines in a text editor will do. The page is also faster now (everything is written inline) and the larger letters could be animated individually.



Next up - giving the visitor some more control over colours and potential gloominess (for Jonny's old criticism especially). And a play button for the carousel so it doesn't start by default.

Yet there is no way around the steep learning curve of SVG (although I've used them before)... one thing CSS can't do is create noise texture - and gradients are nice but sometimes they are just too smooth. So I thought I'd spend a few hours creating just the right amount of speckles to replace the final large background image.





Works better on a dark theme.

I have a newly found sense of appreciation for the skills of graphic designers. Never realised how complicated that can be. I've seen some incredible examples of textures that I will have to look into further such as wood, clouds and marble (but that are currently overloading my brain). Created only with some text and a browser.

Anyway, despite my limited skills in the area the struggle has so far paid off and I have learned some great new things.

Although XHTML (what SVG uses) and HTML have been for a large part incompatible, the disciplines have crossed over with CSS. That means the filter I'm using for the background noise, which is this bit of code as an external SVG image file (speckles plus some blurring)..


...can also be written inline in the HTML page - which makes the filter accessible to CSS and thus makes it possible to apply it like this:


It's hard to convey how incredible awesome that is.

Now that my eyes have had some rest, I conclude that the noise layer needed a bit more blur. Most of what I saw was not actually caused by the SVG filter but by staring for too many hours on end.



Here's some before and after... subtle but still a big difference:

Sometimes you don't have to reinvent the wheel, just add your own spokes. This is the very definition of cute as a button:



Blog where I found it

It's got a nice subtle animation too when you press it. I didn't use an entire font library just for the power symbol as in the article of course (I just made an effort to reduce requests which Pagespeed seems to quite like) but made my own little SVG drawing for it (that's one of the aforementioned spokes).

Also made a sticky header with a twist (for screens with 800 pixels or more). It's optional and can be turned off in the preferences. But it finally does the parallax effect of the sky justice (which can also be turned off by the way).



I think that's about it for my web design novelties for now.

Just adding a friendly warning that overdoing it with CSS filters is quite heavy on the machinery when it needs to repaint the screen.

Having to revise some of the changes I made, applying such a filter to an entire background was not a good idea. Browsers don't have an issue with the original SVG the filter was taken from though, so the new approach is to link to one external file which holds all the previously implemented info...

Thanks for the tips again, Chris

To summarise - you can put all your textures (I only have two) inside a single external SVG file and then reference only part of it. Pretty cool.







Edit - lol, I'm also still learning from how it shows up here. Not exactly fully understanding viewBox yet.

Reminds me of me after browsing Google Fonts for hours.