<html> <head> <script src="path/to/vlex.js"></script> </head> <body> <div id="vlexContainer" style="width:100%; height:100%;"> <svg id="vlex" width="100%" height="100%" onload="VLEX(vlex)"> <!– call VLEX inline –> <circle r="100" vlex="cx:{$cX};cy:{$cY}"></circle> <!– use vlex attribute –> </svg> </div> </body> </html> SVG is deemed to be the holy grail for graphics in resposive web design! But are they really?! In situations – where you …
Tag Archives: web
Good-Looking Shapes Gallery
Layouts where content hugs the boundaries of illustrations are common in print and rare on the web. One of the reasons non-rectangular contour-hugging layouts are uncommon on the web is that they are difficult to produce. They are not difficult to produce anymore. And once again I have a flashback to (the now offline) The …
WTF, forms?
Fixing a parallax scrolling website to run in 60 FPS
I recently visited a parallax scrolling website that was just one of thousands of different parallax scrolling websites out there. One thing that I immediately noticed was that the scrolling FPS of that page was really bad. I suspected that there would be room for improvement in their parallax implementation, and I wanted to take …
Continue reading “Fixing a parallax scrolling website to run in 60 FPS”
The Illusion of Motion
Adaptive Placeholders
See the Pen Adaptive Placeholder by Danny King on CodePen. We’ve seen some floated labels before: when focussing a form field the placeholder seems to move towards a spot above the field. Adaptive placeholders goes a step further by also allowing one to change the text when something was entered into the field. Makes clever …
Advanced Animation Path with SVG
Neat animation of a roller-coaster following the tracks underneath. Uses an SVG as the animation path. The animated object itself is animated using tween.js. Also contains some cleverness to actually make the animated object point into the direction it is moving (viz. the roller-coaster its nose points towards the direction it is going, even inside …
Parallax Done Right
Parallax has become, for better or worse, an increasingly popular web trend. Done right, it feels awesome. The problem is, a vast majority of sites using parallax suffer from terrible scroll performance. A good refresher on how to do high performance animations Parallax Done Right → Related: High Performance Animations → 2D transform’s translate() vs …
Reminder: Current Color in CSS
Reminder to self, as I seem to keep forgetting this (even after having blogged about it 3 years ago): you can use currentColor as a color value in CSS. Be it for background-color, border-color, etc. — they all accept currentColor. The value it represents is the current color, so if that one changes so will …