Skip to content

Instantly share code, notes, and snippets.

@mcanthony

mcanthony/PreAmp .markdown

Created October 10, 2015 05:36
Show Gist options
  • Save mcanthony/b94151d40f2a0de69142 to your computer and use it in GitHub Desktop.
Save mcanthony/b94151d40f2a0de69142 to your computer and use it in GitHub Desktop.
Download ZIP
PreAmp
Raw
index.html
<div class="container">
<div class="left-side">
<div class="title">
PREAMP
</div>
</div>
<div class="right-side">
<div class="presets">
<span>Presets:</span>
<div class="dropper">
Custom
<span></span>
</div>
<button>Reset</button>
</div>
<div class="amp">
<svg width="500" height="320">
<defs>
<linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#9896B4"/>
<stop offset="100%" stop-color="#807EFA"/>
</linearGradient>
</defs>
<path class="wave"
fill="none"
stroke="#FAEE83"
stroke-width="3"
stroke-linejoin="round"
stroke-linecap="round"
/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round" d="M 60 10 L 60 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round" d="M 120 10 L 120 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round" d="M 180 10 L 180 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round" d="M 240 10 L 240 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round" d="M 300 10 L 300 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round" d="M 360 10 L 360 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round" d="M 420 10 L 420 310"/>
<rect class="amount-track" name="0" width="4" x="58" fill="url(#linear)" />
<circle cx="60" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="1" width="4" x="118" fill="url(#linear)" />
<circle cx="120" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="2" width="4" x="178" fill="url(#linear)" />
<circle cx="180" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="3" width="4" x="238" fill="url(#linear)" />
<circle cx="240" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="4" width="4" x="298" fill="url(#linear)" />
<circle cx="300" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="5" width="4" x="358" fill="url(#linear)" />
<circle cx="360" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="6" width="4" x="418" fill="url(#linear)" />
<circle cx="420" cy="310" r="2" fill="#807EFA"/>
<circle class="dragger" name="0" cx="60" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="1" cx="120" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="2" cx="180" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="3" cx="240" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="4" cx="300" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="5" cx="360" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="6" cx="420" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
</svg>
<input type="range" value="50" orient="vertical" name='0' style="left: 60px;"/>
<input type="range" value="75" orient="vertical" name='1' style="left: 120px;"/>
<input type="range" value="25" orient="vertical" name='2' style="left: 180px;"/>
<input type="range" value="90" orient="vertical" name='3' style="left: 240px;"/>
<input type="range" value="10" orient="vertical" name='4' style="left: 300px;"/>
<input type="range" value="60" orient="vertical" name='5' style="left: 360px;"/>
<input type="range" value="50" orient="vertical" name='6' style="left: 420px;"/>
</div>
<div class="labels">
<div class="lab">32</div>
<div class="lab">64</div>
<div class="lab">128</div>
<div class="lab">256</div>
<div class="lab">512</div>
<div class="lab">1K</div>
<div class="lab">2K</div>
</div>
</div>
</div>
<!--CREDITS-->
<p>Based on a <a href="https://dribbble.com/shots/2263756-Day-090-Equalizer" target="_blank"><img src="https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-big-77cb1edbdf66504815845c671e84465c.png"></a> by <a href="https://dribbble.com/NpaulFlavius" target="_blank">Paul Flavius Nechita</a></p>
Raw
script.js
var graphData = [50,75,25,90, 10, 60, 50];
$(document).ready(function(){
updateGraph();
});
$('input').mousemove(function(){
var index = $(this).attr('name');
var newValue = $(this).val();
graphData[index] = newValue;
updateGraph();
});
var heightOfGraph = 300;
var updateGraph = function(){
//first update the wave
var returnString = 'M 60 ' + (heightOfGraph - (graphData[0]*3) + 10);
var curveAmount = 30;
var xoffset = 120;
for(var i = 1; i < graphData.length; i++){
var thisDataPoint = heightOfGraph - (graphData[i]*3) + 10;
returnString += " S " + (xoffset -curveAmount) + " " + thisDataPoint + " " + xoffset + " " + thisDataPoint;
xoffset += 60;
}
$('.wave').attr('d', returnString);
//now update the handles
$('.dragger').each(function(element){
var index = $(this).attr('name');
$(this).attr('cy', (heightOfGraph - (graphData[index]*3) + 10));
});
//now update the tracking amount
$('.amount-track').each(function(){
var index = $(this).attr('name');
$(this).attr('height', (graphData[index]*3)).attr('y', (heightOfGraph - (graphData[index]*3) + 10));
});
};
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700);
body{
background-image:
linear-gradient(
to right,
#EBE9F4,
#A2A1A9
);
color: white;
font-family: Lato;
font-weight: 300;
}
.container{
animation: showCard 1s ease forwards;
background-image:
linear-gradient(
to top right,
#31313B,
#3B3A52
);
width: 680px;
height: 480px;
border-radius: 10px;
display: block;
position: absolute;
left: 0;
top: 0;
bottom:0;
right: 0;
margin: auto;
border-bottom: solid 1px rgba(0,0,0,0.1);
box-shadow: 0 20px 20px -15px black,
inset 0 -50px 50px 0px rgba(0,0,0,0.1);
overflow: hidden;
.left-side{
width: 160px;
height: 100%;
background-color: rgba(0,0,0,0.5);
float: left;
.title{
padding: 50px;
font-size: 14px;
}
}
.right-side{
position: relative;
float: left;
width: calc(100% - 160px);
height: 100%;
.presets{
width: calc(100% - 120px);
margin-left: 60px;
padding: 40px 0px;
opacity: 0.4;
font-size: 14px;
overflow: hidden;
& *{
float: left;
}
.dropper{
padding: 5px;
border: solid 2px rgba(255,255,255,0.4);
border-radius: 8px;
width: 200px;
margin: 0px 10px;
display: inset-block;
position: relative;
top: -7px;
span{
background-image: url(http://s12.postimg.org/46lds9dah/ic_arrow_drop_down_48px_128.png);
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
width: 26px;
height: 26px;
position: absolute;
right: 5px;
top: 0px;
display: block;
}
}
button{
position: relative;
top: -7px;
padding: 5px 25px;
border: solid 2px rgba(255,255,255,0.4);
background-color: transparent;
color: white;
font-family: Lato;
font-weight: 300;
font-size: 14px;
border-radius: 8px;
}
}
.amp{
width: 100%;
position: relative;
height: 320px;
input[type=range] {
opacity: 0;
width: 8px;
height: 300px;
position: absolute;
left: 0px;
top: 10px;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
}
.labels{
width: 100%;
overflow: hidden;
height: 20px;
position: relative;
left: 36px;
opacity: 0.3;
font-size: 12px;
margin-top: 5px;
.lab{
color: white;
text-align: center;
width: 60px;
left: -60px;
float: left;
}
}
}
}
svg{
position: absolute;
left: 7px;
top: 2px;
}
@keyframes showCard {
0%{
top: 50px;
opacity: 0;
}
100%{
top: 0px;
opacity: 1;
}
}
p{
position: fixed;
bottom: 0px;
left: 15px;
color: #333333;
font-family: Lato;
font-weight: 300;
overflow: hidden;
a:link, a:visited{
color: #333333;
}
a:hover{
opacity: 0.5;
}
img{
width: 20px;
height: 20px;
position: relative;
top: 6px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment