JADE
.back
.center
.pair
label H
input.slider#hue( type="range" min="0" max="360" value="360")
.pair
label S
input.slider#sat( type="range" min="0" max="100" value="65")
.pair
label L
input.slider#lig( type="range" min="0" max="100" value="75")
.pair
label B
input.slider#border( type="range" min="0" max="300" value="150")
a#hide-controls Hide the controls and let me take a screenshot
SCSS
$main: hsl(0,0%,100%);
$sans: 'Open Sans', sans-serif;
$serif: 'Merriweather', serif;
body{
font-family: $sans;
max-height: 100vh;
max-width: 100vw;
overflow: hidden;
}
.back{
content: '';
position: absolute;
width: 100%;
height: 100%;
//background: linear-gradient( 35deg, darken( adjust-hue( $main, -5% ), 10% ), darken( adjust-hue($main,5%),5%));
z-index: -1;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
width: 60vh;
height: 60vh;
box-shadow: 0px 1vh 5vh rgba(darken(adjust-hue($main,-20%),45%),0.2);
border-radius: 10vh;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: lighten($main,2%);
background-position: center;
background-size: cover;
padding: 10vh 10vh 8vh;
box-sizing: border-box;
&.faded{
cursor: pointer;
&:after{
content: 'Click here when you are done to bring them back';
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
color: white;
font-family: $sans;
width: 50%;
font-size: 4vh;
line-height: 1.5;
font-weight: 100;
opacity: 0;
@keyframes fadeinout{
0%{ opacity: 0;}
20%{ opacity: 1;}
80%{ opacity: 1;}
100%{ opacity: 0;}
}
animation-name: fadeinout;
animation-duration: 2s;
animation-delay: 300ms;
animation-fill-mode: forwards;
}
}
}
.pair{
margin: auto;
width: 100%;
}
label{
display: inline-block;
width: 10%;
color: rgba(white,1);
text-align: left;
font-size: 4vh;
margin-bottom: 1vh;
font-weight: 100;
}
.slider{
display: inline-block;
width: 80%;
margin-left: 5%;
}
#hide-controls{
width: 40vh;
text-align: center;
margin: auto;
font-size: 2vh;
padding: 2vh;
color: white;
cursor: pointer;
position: absolute;
bottom: 1vh;
left: 50%;
transform: translateX(-50%);
opacity: 0.3;
font-weight: 100;
&:hover{
opacity: 1;
}
}
.sig{
position: fixed;
bottom: 8px;
right: 8px;
text-decoration: none;
font-size: 12px;
font-weight: 100;
font-family: sans-serif;
color: rgba(0,0,0,0.4);
letter-spacing: 2px;
}
//sliders
input[type=range] {
-webkit-appearance: none;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 1.5vh;
cursor: pointer;
animate: 0.2s;
box-shadow: inset 0 0.15vh 0.4vh rgba(0,0,0,0.3);
background: white;
border-radius: 1.5vh;
border: none;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0 0.2vh 0.5vh rgba(0,0,0,0.2);
border: none;
height: 4vh;
width: 4vh;
border-radius: 4vh;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1.5vh;
}
input[type=range]::-moz-range-track {
height: 1.5vh;
cursor: pointer;
animate: 0.2s;
box-shadow: inset 0 0.15vh 0.4vh rgba(0,0,0,0.3);
background: white;
border-radius: 5px;
border: none;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0 0.2vh 0.5vh rgba(0,0,0,0.2);
border: none;
height: 4vh;
width: 4vh;
border-radius: 4vh;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -1.5vh;
}
JAVASCRIPT
var clr = {
h: Number($('#hue').val()),
s: Number($('#sat').val()),
l: Number($('#lig').val()),
}
br = String( Number($('#border').val() / 10 ) ) + 'vh';
function updateUI(){
var centerColor = 'hsl('+clr.h+','+clr.s+'%,'+clr.l+'%)';
var centerShadow = '0px 1vh 3vh hsla('+(clr.h-30)+','+(clr.s*0.7)+'%,'+(clr.l*0.5)+'%, 0.3)';
$('.center').css('background-color', centerColor);
$('.center').css('box-shadow', centerShadow);
$('.center').css('border-radius', br);
var backDark = 'hsl('+(clr.h-30)+','+(clr.s*0.8)+'%,'+(clr.l*0.9)+'%)';
var backLight = 'hsl('+(clr.h+30)+','+(clr.s*1.2)+'%,'+(clr.l*1.1)+'%)';
var backGrad = 'linear-gradient( 35deg, '+backDark+', '+backLight+' )';
$('.back').css('background', backGrad);
}
$('#hue').on('mousemove change', function(){
clr.h = Number($('#hue').val());
updateUI();
})
$('#sat').on('mousemove change', function(){
clr.s = Number($('#sat').val());
updateUI();
})
$('#lig').on('mousemove change', function(){
clr.l = Number($('#lig').val());
updateUI();
})
$('#border').on('mousemove change', function(){
br = String( Number($('#border').val() / 10 ) ) + 'vh';
updateUI();
})
$('#hide-controls').on('click', function(){
$('.pair, #hide-controls').fadeOut();
$('.center').addClass('faded');
})
$('.center').on('click', function(){
$('.pair, #hide-controls').fadeIn();
$('.center').removeClass('faded');
})
$(document).ready(function(){
var direction = -1;
var ease = 1.01;
var testSlide = setInterval(function(){
clr.h += direction;
direction *= ease;
direction
$('#hue').val( clr.h );
if (clr.h <= 180){
ease = 0.99;
}
if (clr.h <= 0){
clearInterval(testSlide);
}
updateUI();
},20);
})
