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 →
Tag Archives: css
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 …
CSS Mac Plus
Check out this Pen! In this project I will build a 3D model of the Macintosh Plus and display it in a three dimensional setting. Using CSS Keyframe animation we’ll make it move on screen to show off the 3D effect better. Great explanatory post on how to actually make this kind of stuff. Touches …