CSS transformaties & transities

Met een vleugje Javascript

Peter Nederlof

n noor notes, p voor fullscreen

Hallo

Twitter
@peterlof, @ExMachinaGames

Ex Machina Games
http://www.exmachinagames.com

Github
https://github.com/peterned

Slides
zsm online!

Inhoud

  1. Transformaties
  2. Transities
  3. Keyframes
  4. Scripting

Transformaties

Prefixes?

#derp {
	-webkit-transform: translate(50px, 50px);
	-moz-transform: translate(50px, 50px);
	-ms-transform: translate(50px, 50px);
	-o-transform: translate(50px, 50px);
	transform: translate(50px, 50px);
}

Denk die erbij ...

Translate

translate(x, y), translateX(x), translateY(y) 

#derp {
	transform: translate(50px, 50px);
}

Scale

#derp {
	transform: scale(2, 0.5);
}

Rotate

#derp {
	transform: rotate(30deg);
}

Skew

#derp {
	transform: skew(30deg, 0);
}

Combinaties

#derp {
	transform: translate(50px, 50px) scale(2, 0.5) rotate(30deg);
}

2D Matrix

#derp {
	transform: matrix(1.175,-0.429,-0.145,0.965,-75.202,53.250);
}

Idem in 3D

Properties

  1. translate3d, translateX, Y, Z
  2. rotate3d, rotateX, Y, Z
  3. scale3d, scaleX, Y, Z
  4. matrix3d
  5. perspective
  6. transform-origin
  7. transform-style

Translate, Rotate

translate3d(x, y, z), en losse X, Y en Z, etc 

#derp {
	transform: translate3d(0, 20px, 100px) rotateY(20deg);
}

Matrix3D

This function allows you to specify the raw 4x4 homogeneous transformation matrix of 16 values in column-major order. Have fun with that!

Matrix3D

#derp {
	transform: matrix3d(0.869295848659877, -0.03752066987527169,
	-0.4928660333547193, 0, 0.09933466539753062, 0.9900332889206209,
	0.09983341664682815, 0, 0.48420796333090704, -0.13574345715771877,
	0.8643589312813316, 0, 116.20991119941769, 12.5784297178525,
	112.55385649248043, 1);
}

Genereer dit aub (volgt)

Transities

Transition

#derp {
	transition:
		property duration easing delay,
		property duration easing delay;
}

#derp {
	transition:
		transform 0.5s ease-out,
		opacity 0.5s linear;
}

#derp {
	transition: all 0.5s ease-out;
}

Vanuit CSS, :hover

#derp {
	transition: transform 0.5s ease-out;
}

#derp:hover {
	transform: scale(1.25, 1.25);
}

2 (of meer) properties

#derp {
	transition: transform 0.5s, opacity 0.5s;
	opacity: 0;
}

#derp:hover {
	transform: rotate(90deg);
	opacity: 1;
}

met delays

#derp {
	transition: transform 0.5s, opacity 0.5s 0.5s;
}

#derp:hover {
	transition: transform 0.5s 0.5s, opacity 0.5s;
}

Bij een :hover worden onmiddelijk de nieuwe delays toegekend!

Keyframes

Voor complexere animaties

Keyframes

@keyframes derper {
	0%   { properties }
	10%  { properties }
	/* ... */
	100% { properties }
}

#derp { animation: derper 2s 3; }

Performance!

Scripting

Voor animatie met interactie

Scripting obv classes

.left #derp { ... }
.right #derp { ... }
< >

Slideshow

  • 1
  • 3
  • 5

Eindeloos scrollen? 

// modulo, %
index = ( index + 1 ) % amount;

Slideshow

.slideshow li {
	transition: transform 0.5s ease-out, opacity 0.5s;
	opacity: 0;
}

.slideshow li.current {
	transition-delay: 0.25s;
	opacity:1;
}

.slideshow li.next {
	transform: translateX(75px) rotateY(20deg);
}

.slideshow li.prev {
	transform: translateX(-70px) rotateY(-20deg);
}

Scripting obv events

Transitie op alles met class fx-* 

*[class*=fx-] {
	transition: transform 0.5s, opacity 0.5s;
}

Met specifieke classes voor effecten: 

	.fx-fadein {
		opacity: 0;
	}

	.fx-slideup {
		transform: translate(0, 20px);
	}

Triggers

Een trigger class, 

.fx-run {
	transform: translate(0, 0);
	opacity: 1;
}

Triggers

En trigger script: 

document.addEventListener('DOMNodeInserted', function(e){

	// inserted node
	var node = e.target;

	// check for the fx class
	if(/fx-/.test(node.className)) {

		// defer classname assignment
		setTimeout(function(){
			node.className += ' fx-run';
		}, 0);
	}
});

Demo

<p class="fx-fadein fx-slideup">
	fadein
</p>

click ...

Scripting style properties

via HTMLElement.style:

var node = document.querySelector('#derp');
var style = node.style;

style.setProperty('transform', 'rotateY(20deg)', '');

Met Matrix3D

De identity matrix: 

var identity = [
	1, 0, 0, 0,
	0, 1, 0, 0,
	0, 0, 1, 0,
	0, 0, 0, 1
];

Scripted Matrix3D

Van eerder:

#derp {
	transform: matrix3d(0.869295848659877, -0.03752066987527169,
	-0.4928660333547193, 0, 0.09933466539753062, 0.9900332889206209,
	0.09983341664682815, 0, 0.48420796333090704, -0.13574345715771877,
	0.8643589312813316, 0, 116.20991119941769, 12.5784297178525,
	112.55385649248043, 1);
}

Scripted Matrix3D

var Matrix = function(entities) {
	this.entities = entities;
}

Matrix.prototype = {
	translate: function(x, y, z) {
		return this.multiply([
			1, 0, 0, 0,
			0, 1, 0, 0,
			0, 0, 1, 0,
			x, y, z, 1
		]);
	},

	// ...

Scripted Matrix3D

	rotateY: function(a) {
		var c = Math.cos(a);
		var s = Math.sin(a);
		return this.multiply([
			 c, 0, s, 0,
			 0, 1, 0, 0,
			-s, 0, c, 0,
			 0, 0, 0, 1
		]);
	},

	// ...

	toString: function() {
		return 'matrix3d(' + this.entities.join(',') + ')';
	}
};

Scripted Matrix3D

var derp = new Matrix().
			translate(0, 100, -50).
			rotateX(0.4); //rad

var style = document.querySelector('#derp').style;

style.setProperty('transform', derp.toString(), '');

Voorbeeld

List items in een cirkel


var r = Math.PI * 2; // full circle;
var l = items.length; // aantal items

for ( var i = 0; i < l; i++) {
	// angle
	var angle = (r / l) * i;

	// coordinates
	var x = Math.cos(angle) * 300;
	var y = 50;
	var z = Math.sin(angle) * 300;

	// matrix
	var m = new Matrix().rotateY(angle).translate(x, y, z);

	// assign
	items[i].style.setProperty('transform', m.toString(), '');
}

List items in een cirkel

Wordt:

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Demo's

Einde