Reverse cascade

  • First
  • Second
  • Third
  • Fourth
  • Fifth
  • Sixth

- 1 min read

The reverse cascade was a further exploration into cascading sequences, this is a fairly simple experiment aimed to look like something is building up quickly. In practice, this experiment would have difficulties with being production ready, one of its major flaws is having to know exactly how many items you have in order to calculate the z-index and the timing of each item in order to bring them up.

The target selector

In this example I'm using the :target selector, I usually throw together experiments quickly using the target selector because it saves me the time of writing javascript that fires the event I'm looking to do. It's a nice javascript-free way of changing behaviour of classes based on what the URL fragment #tag is.

To use the :target selector, add an ID to where you want behaviour to change, in this example I chose to add the 'result' ID to the demo container, then add what you want done to it using the :target in the style. One of the downsides to this technique is that it makes it a bit less transportable, sometimes it'll be more appropriate to use javascript. The other downside is noticeable page jumps to where the ID meets the top of the browser. You can avoid this by having the interaction below the ID - but this is far from ideal and is pretty much only useful for prototyping.

					

	/*

	Initial state
	We're animating 3 properties Skew,
	background color, and translateY (position on the Y-axis)

	*/

	.d-reverse-cascade li {

	  background:#1b733c;
	  border-top:1px solid #000;
	  display:block;
	  list-style-type:none;
	  padding:2em;
	  position:relative;
	  transform-origin:bottom center;
	  transition:transform 750ms ease-in-out,
	  background-color 1000ms ease-in-out;

	}

	/*

		Using the :target pseudo we can say that
		while #result is at the end of the URL
		apply the transform below to every list item
		inside of .d-reverse-cascade

	*/

	#result:target .d-reverse-cascade li {

		transform:rotateX(0deg) translateY(0) translateZ(0);
		background-color:#38cc70;

	}

	/*
		Positioning:
		Depending on where the item falls within the list,
		we want to move the item off the screen so we need to move it further,
		the closer each item is to the top of the screen.
		We also want to alter the Z-index, to make them appear to move in
	*/

	.d-reverse-cascade li:nth-of-type(6) {

	   transform: rotateX(-90deg) translateY(16em) translateZ(11em) skewX(-45deg);

	}

	.d-reverse-cascade li:nth-of-type(5) {

  		transform: rotateX(-90deg) translateY(20em) translateZ(15em) skewX(-45deg);
	}

	/*
		Delays:
		The earlier the list item, the less of a delay,
		I'm also using where it falls in the list to determine
		the z-index or which item is layered in front of which
	*/

	.d-reverse-cascade li:nth-of-type(6) {

	  transition-delay: -400ms;
	  z-index: 6;

	}

	.d-reverse-cascade li:nth-of-type(5) {

	  transition-delay: -200ms;
  	  z-index: 5;

	}

	.d-reverse-cascade li:nth-of-type(4) {

	  transition-delay: 0ms;
	  z-index: 4;

	}