A trend I’m seeing for the coming year is the rise of Transitional Interfaces on the web. A fine example is the aforementioned Fluidbox, or this interface (extract from the post linked): Sparked by the post linked — which you should read — I started goofing around with CSS transforms and transitions a bit. The …
Tag Archives: css
Fluidbox
I adore the smooth transition offered by Medium’s lightbox module — no disruptive modal window, and opening/closing of the lightbox is intuitive and straightforward. So I tasked myself with a little challenge — replicate it, and improve on it, if possible. CSS transitions and transforms FTW Fluidbox Demo → Fluidbox Source (GitHub) → Fluidbox Explanation →
Skrollr – CSS animations linked to scroll position
Having seen a few single-page year in review minisites the past few weeks, it’s clear that Skrollr has become the de facto standard to implement parallax scrolling effects into your websites. The idea behind Skrollr is straightforward: link a target CSS property+value to a given scroll position, via data-* attributes: <div id="example" data-0="width:100%;" data-1500="width:0%;"></div> Skrollr …
Continue reading “Skrollr – CSS animations linked to scroll position”
Myth
Unfolding the Box Model: Exploring CSS3 transforms
60fps scrolling using pointer-events: none
CSS Scroll Snap Points
Great to see this proposed (many people are using it nowadays, boosted by the iPhone 5s page). .gallery { scroll-snap-type: mandatory; scroll-snap-points-x: snapList(786px, 1643px, 2483px, 3264px, 4054px, 4402px); } Don’t like the fact that one needs to specify explicit values (be it in pixels, ems, or percentages), as not all children can be of the …
Cutting down on vendor prefixes
There are a bunch of CSS properties that we can safely stop using vendor prefixes for, or at least considerably cut down on the number of prefixes. No need to provide vendor prefixes for all versions ever of all browsers ever nowadays. Take CSS3 transitions for example. The code below will do just fine in …
Creating Non-Rectangular Layouts with CSS Shapes
With the introduction of CSS Shapes into the web, wrapping content in custom non-rectangular shapes, and recreating print designs and layouts on the web becomes a piece of cake! In this article we’re going to go over the basics of declaring shapes, and creating some simple layouts using these new CSS technologies. Creating Non-Rectangular Layouts …
Continue reading “Creating Non-Rectangular Layouts with CSS Shapes”
Scroll Animations
A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the animated class which actually starts the animation: it is only added once the element is in view. Check out this Pen! Note that the event handler is not debounced as we need …