Playing with Blend Modes

index.jade

.changer
	.sub Playing with
	h1 Color Blend Modes
	.demos
		a(data-go="1") cloudsuit
		a(data-go="2") urbansky
		a(data-go="3") knowledge
#container

playing-with-blend-modes.markdown

Playing with Blend Modes

Inspired by True Detective's opening.

A Pen by Renan C. Araujo on CodePen.

License.

script.js

var demos = [];



var cloudsuit = {
	one : {
		bg: "http://caraujo_pens.surge.sh/images/ZnkfwAR.jpg",
		bm: "none" 
	},
	two : {
		bg: "http://caraujo_pens.surge.sh/images/ONBXKkS.jpg",
		bm: "lighten" 
	},
	three : {
		bg: "http://caraujo_pens.surge.sh/images/qKNpn9G.png",
		bm: "multiply" 
	}
}
demos.push(cloudsuit);


var urbansky = {
	one : {
		bg: "http://caraujo_pens.surge.sh/images/l1MS7kk.jpg",
		bm: "none" 
	},
	two : {
		bg: "http://caraujo_pens.surge.sh/images/6QBLNy6.jpg",
		bm: "multiply" 
	},
	three : {
		bg: "http://caraujo_pens.surge.sh/images/bmnzJRs.png",
		bm: "none" 
	}
}
demos.push(urbansky);


var knowledge = {
	one : {
		bg: "http://caraujo_pens.surge.sh/images/YpTSfYD.jpg",
		bm: "none" 
	},
	two : {
		bg: "http://caraujo_pens.surge.sh/images/ziAdjNM.jpg",
		bm: "multiply" 
	},
	three : {
		bg: "http://caraujo_pens.surge.sh/images/dnfONso.png",
		bm: "none" 
	}
}
demos.push(knowledge);


var container = document.getElementById("container");
var active;
var applyDemo = function(number){
	console.log(number);
	var go = demos[number-1];

	container.innerHTML = "";

	

	var f1 = document.createElement("div");
	f1.setAttribute("id", "f1");
	var style = "background-image: url(" + go.one.bg + "); mix-blend-mode: " + go.one.bm + ";";
	f1.setAttribute("style", style);
	container.appendChild(f1);


	var f2 = document.createElement("div");
	f2.setAttribute("id", "f2");
	var style = "background-image: url(" + go.two.bg + "); mix-blend-mode: " + go.two.bm + ";";
	f2.setAttribute("style", style);
	container.appendChild(f2);

	var f3 = document.createElement("div");
	f3.setAttribute("id", "f3");
	var style = "background-image: url(" + go.three.bg + "); mix-blend-mode: " + go.three.bm + ";";
	f3.setAttribute("style", style);
	container.appendChild(f3);
	active = number;

	document.body.setAttribute("data-demo", number);
}
applyDemo(1);


$('.demos').on('click', 'a', function(event) {
	event.preventDefault();
	var t = this;
		
	if(active == t.getAttribute("data-go")) return;
	
	$(container).fadeOut({
		duration: 1000,
		complete: function(){
			applyDemo(t.getAttribute("data-go"));
			$(container).fadeIn(1000);
		}
	});
}); 	

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.less

a:hover {
    cursor: pointer;
}
body, html{
	height: 100%;
	font-family: 'Raleway', Helvetica, Roboto, Arial,  sans-serif;
}
.changer{
	position: absolute;
	z-index: 30;
	width: 230px;
	left: 10%;
	bottom: 10%;
	padding: 0px;
	color: #777777;
	.sub{
		font-weight: 300;
	}
	h1{
		font-size: 36/16em;
		font-weight: 800;
		
	}
	.demos{
		line-height: 1;
		a{
			color: #fff;
			display: block;
			margin: 15px 0;
			font-size: 19/16em;
			&[data-go="1"]{
				color: #40BBB8;
			}
			&[data-go="2"]{
				color: #B24600;
			}
			&[data-go="3"]{
				color: #98ADA4;
			}
		}
	}
}


#container{
	.grab(20px);
	overflow: hidden;
	>div{
		.grab(0px);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
	}

	
}


//animations
[data-demo="1"]{
	#container{
		#f1{
			left: 40%;
			right: auto;
			width: 100%;
			.animation(roll 60s linear infinite);
			.keyframes(roll, {
				50%{
					.translate(-40%,0);
				}
				100%{
					.translate(0%,0);
				}
				})
		}
	
	}
}

[data-demo="2"]{
	#container{
		#f1{
			
			.animation(zoomin 30s linear infinite);
			.keyframes(zoomin, {
				50%{
					.scale(1.2);
				}
				100%{
					.scale(1);
				}
				})
		}
		#f2{
			.scale(1.1);
			.animation(zoomout 30s linear infinite);
			.keyframes(zoomout, {
				50%{
					.scale(1);
				}
				100%{
					.scale(1.1);
				}
				})
		}
		#f3{
			.scale(1.1);
			.animation(zoomout 30s linear infinite);
		}
	}

}


[data-demo="3"]{
	#container{
		#f1{
			.translate(10%, 0%);
			
			.opacity(0);
			.animation(opa 40s linear infinite);
			.keyframes(opa, {
				30%{
					.opacity(1);
				}
				50%{
					.opacity(1);
					.translate(0%,0%);
				}
				70%{
					.opacity(1);
				}
				100%{
					.opacity(0);
					.translate(10%, 0%);
				}
				})
		}
	}
}



//used mixins
.translate(
	@x,
	@y:0
	){
	-webkit-transform: translate(@x,@y);
	-moz-transform: translate(@x,@y);
	-ms-transform: translate(@x,@y);
	-o-transform: translate(@x,@y);
	transform: translate(@x,@y);
}
.scale(
	@factor
	){
	-webkit-transform: scale(@factor);
	-moz-transform: scale(@factor);
	-ms-transform: scale(@factor);
	-o-transform: scale(@factor);
	transform: scale(@factor);
}
.opacity(
	@opacity:0.5
	){
	opacity: @opacity;
	-webkit-opacity: @opacity;
	-moz-opacity: @opacity;
}
.animation(
	@name
	){
	-webkit-animation: @name;
	-moz-animation: @name;
	animation: @name;
	-ms-animation: @name;
}
.keyframes(
	@name;
	@arguments
	){
	@-moz-keyframes @name{    
		@arguments();
	}
	@-webkit-keyframes @name{
		@arguments();
	}
	@keyframes @name{
		@arguments();
	}
}
.grab( @d : 0px ){
	position: absolute;
	top: @d;
	left: @d;
	right: @d;
	bottom: @d;
}

styles

<link href="//fonts.googleapis.com/css?family=Raleway:900,700,400,300" rel="stylesheet" />