5,291 projects/exhibition/mark bradford/assets/404_2.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1,579 projects/exhibition/mark bradford/assets/animate.css
View file

Large diffs are not rendered by default.

12 projects/exhibition/mark bradford/assets/jquery.animate-colors-min.js
View file
180 projects/exhibition/mark bradford/assets/main.css
View file
@@ -0,0 +1,180 @@
* {
box-sizing: border-box;
}

body{

}

.canvas {
height: 590px;
width: 1140px;
left: 90px;
}

.numbers {
background-image: url("404_2.svg");
background-repeat: no-repeat;
background-position: center top;
margin-top: -40px;
height: 590px;
width: 1140px;
overflow: hidden;
position: absolute;
left: 90px;
z-index: 1;
}


#four1 {
position: absolute;
background-color: black;
z-index: 2;
width: 45px;
height: 155px;
left: 320px;
top: 127px;
}

#four1:hover{
animation: shake 3s infinite;
}

@keyframes shake {
from, to {
transform: translate3d(0, 0, 0);
}

10%, 30%, 50%, 70%, 90% {
transform: translate3d(-10px, 0, 0);
}

20%, 40%, 60%, 80% {
transform: translate3d(10px, 0, 0);
}
}

#four2{
width: 122px;
height: 43px;
top: 238px;
left: 371px;
z-index: 2;
position: absolute;
background-color: black;
}

#four2:hover{
animation: shake 4s infinite;
}

#four3{
position: absolute;
background-color: black;
z-index: 2;
width: 45px;
height: 104px;
left: 448px;
top: 129px;
}

#four3:hover{
animation: shake 3.5s infinite;
}

#four4{
position: absolute;
background-color: black;
z-index: 2;
width: 45px;
height: 112px;
left: 448px;
top: 291px;
}

#four4:hover{
animation: shake 5s infinite;
}


#zero1{
position: absolute;
background-color: black;
z-index: 2;
width: 45px;
height: 221px;
left: 548px;
top: 127px;
}

#zero2{
position: absolute;
background-color: black;
z-index: 2;
width: 120px;
height: 45px;
left: 599px;
top: 127px;
}

#zero3{
position: absolute;
background-color: black;
z-index: 2;
width: 44px;
height: 223px;
left: 675px;
top: 177px;
}

#zero4{
position: absolute;
background-color: black;
z-index: 2;
width: 121px;
height: 44px;
left: 548px;
top: 356px;
}



#four1b{
position: absolute;
background-color: black;
z-index: 2;
width: 45px;
height: 155px;
left: 771px;
top: 127px;
}

#four2b{
width: 122px;
height: 43px;
top: 239px;
left: 822px;
z-index: 2;
position: absolute;
background-color: black;
}

#four3b{
position: absolute;
background-color: black;
z-index: 2;
width: 45px;
height: 104px;
left: 899px;
top: 129px;
}

#four4b{
position: absolute;
background-color: black;
z-index: 2;
width: 45px;
height: 112px;
left: 899px;
top: 288px;
}
124 projects/exhibition/mark bradford/assets/script.js
View file
@@ -0,0 +1,124 @@
$(document).ready(function(){

var four1 = $('#four1');
function runIt() {
four1.animate({top:'+=10'}, 1000);
four1.animate({top:'-=10'}, 1000, runIt);
}

runIt();


var four2 = $('#four2');
function runIt2() {
four2.animate({top:'+=10'}, 3000);
four2.animate({top:'-=10'}, 3000, runIt2);
}

runIt2();


var four3 = $('#four3');
function runIt3() {
four3.animate({top:'+=13'}, 2000);
four3.animate({top:'-=13'}, 2000, runIt3);
}

runIt3();


var four4 = $('#four4');
function runIt4() {
four4.animate({top:'+=13'}, 1400);
four4.animate({top:'-=13'}, 1400, runIt4);
}

runIt4();




var zero1 = $('#zero1');
function runZero() {
zero1.animate({top:'+=10'}, 2000);
zero1.animate({top:'-=10'}, 2000, runZero);
}

runZero();


var zero2 = $('#zero2');
function runZero2() {
zero2.animate({top:'+=8'}, 1100);
zero2.animate({top:'-=8'}, 1100, runZero2);
}

runZero2();


var zero3 = $('#zero3');
function runZero3() {
zero3.animate({top:'+=13'}, 3000);
zero3.animate({top:'-=13'}, 3000, runZero3);
}

runZero3();


var zero4 = $('#zero4');
function runZero4() {
zero4.animate({top:'+=11'}, 2400);
zero4.animate({top:'-=11'}, 2400, runZero4);
}

runZero4();





var four1b = $('#four1b');
function runItb() {
four1b.animate({top:'+=7'}, 1100);
four1b.animate({top:'-=7'}, 1100, runItb);
}

runItb();


var four2b = $('#four2b');
function runItb2() {
four2b.animate({top:'+=12'}, 3000);
four2b.animate({top:'-=12'}, 3000, runItb2);
}

runItb2();


var four3b = $('#four3b');
function runItb3() {
four3b.animate({top:'+=15'}, 2000);
four3b.animate({top:'-=15'}, 2000, runItb3);
}

runItb3();


var four4b = $('#four4b');
function runItb4() {
four4b.animate({top:'+=10'}, 1500);
four4b.animate({top:'-=10'}, 1500, runItb4);
}

runItb4();





}); //end





47 projects/exhibition/mark bradford/exhibition_404.html
View file
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>

<head>
<title>exhibition</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">
<!-- jquery -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="assets/script.js"></script>
<script src="assets/jquery.animate-colors-min.js"></script>


</head>

<body>


<div class="canvas">

<div class="numbers">
</div>

<div id="four1"></div>
<div id="four2"></div>
<div id="four3"></div>
<div id="four4"></div>
<!-- -->
<div id="zero1"></div>
<div id="zero2"></div>
<div id="zero3"></div>
<div id="zero4"></div>

<div id="four1b"></div>
<div id="four2b"></div>
<div id="four3b"></div>
<div id="four4b"></div>


</div>

</body>


</html>