Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.jade

Created May 28, 2017
Embed
What would you like to do?
Playing with Blend Modes
.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
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);
}
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
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;
}
<link href="//fonts.googleapis.com/css?family=Raleway:900,700,400,300" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment