Hook it up for mobile
This commit is contained in:
parent
673a6fc4b7
commit
122d7ad68d
12 changed files with 109 additions and 21 deletions
BIN
assets/audio/africa.m4a
Normal file
BIN
assets/audio/africa.m4a
Normal file
Binary file not shown.
|
|
@ -1,6 +0,0 @@
|
||||||
* { margin: 0; padding: 0; }
|
|
||||||
|
|
||||||
html, body, img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 569 B After Width: | Height: | Size: 569 B |
|
Before Width: | Height: | Size: 618 KiB After Width: | Height: | Size: 618 KiB |
|
|
@ -1,10 +1,10 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'icomoon';
|
font-family: 'icomoon';
|
||||||
src:url('fonts/icomoon.eot?-l03f6i');
|
src:url('../fonts/icomoon.eot?-l03f6i');
|
||||||
src:url('fonts/icomoon.eot?#iefix-l03f6i') format('embedded-opentype'),
|
src:url('../fonts/icomoon.eot?#iefix-l03f6i') format('embedded-opentype'),
|
||||||
url('fonts/icomoon.woff?-l03f6i') format('woff'),
|
url('../fonts/icomoon.woff?-l03f6i') format('woff'),
|
||||||
url('fonts/icomoon.ttf?-l03f6i') format('truetype'),
|
url('../fonts/icomoon.ttf?-l03f6i') format('truetype'),
|
||||||
url('fonts/icomoon.svg?-l03f6i#icomoon') format('svg');
|
url('../fonts/icomoon.svg?-l03f6i#icomoon') format('svg');
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
26
assets/styles/style.css
Normal file
26
assets/styles/style.css
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
* { margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
html, body, img, #container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
top: 50% !important;
|
||||||
|
left: 50% !important;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
background: rgba(0, 0, 0, .5);
|
||||||
|
color: white;
|
||||||
|
font-size: 3em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
88
index.html
88
index.html
|
|
@ -6,19 +6,66 @@
|
||||||
<!--[if IE]>
|
<!--[if IE]>
|
||||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
|
<link rel="stylesheet" href="assets/styles/style.css" type="text/css" />
|
||||||
<script src="assets/js/rainyday.js"></script>
|
<link rel="stylesheet" href="assets/styles/font.css" type="text/css" />
|
||||||
|
<script src="assets/scripts/rainyday.js"></script>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.7.1/jquery.jplayer/jquery.jplayer.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="run()">
|
|
||||||
<body>
|
<body>
|
||||||
<audio autoplay="autoplay" loop="loop">
|
<!--<audio autoplay="autoplay" loop="loop">
|
||||||
<source src="assets/audio/africa.ogg" />
|
<source src="assets/audio/africa.ogg" />
|
||||||
<source src="assets/audio/africa.mp3" />
|
<source src="assets/audio/africa.mp3" />
|
||||||
</audio>
|
</audio>-->
|
||||||
|
|
||||||
<img id="background" src="" />
|
<img id="background" src="" />
|
||||||
<script>
|
|
||||||
function run() {
|
<div id="container">
|
||||||
|
<div id="player"></div>
|
||||||
|
<div id="play" class="button"><i class="icon-play"></i></div>
|
||||||
|
<div id="pause" class="button"><i class="icon-pause"></i></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function() {
|
||||||
|
if(isMobile.any()) {
|
||||||
|
$('#pause').hide();
|
||||||
|
} else {
|
||||||
|
$('#play').hide();
|
||||||
|
$('#pause').hide();
|
||||||
|
}
|
||||||
|
var mediaPlayer = jQuery('#player');
|
||||||
|
|
||||||
|
mediaPlayer.jPlayer({
|
||||||
|
//swfPath: '/swf/Jplayer.swf',
|
||||||
|
solution: "html",//"flash, html",
|
||||||
|
supplied : 'mp3, oga, m4a',
|
||||||
|
cssSelector: {
|
||||||
|
play: '#play',
|
||||||
|
},
|
||||||
|
|
||||||
|
ready: function() {jQuery(this).jPlayer("setMedia", {
|
||||||
|
mp3: 'assets/audio/africa.mp3',
|
||||||
|
oga: 'assets/audio/africa.oga',
|
||||||
|
m4a: 'assets/audio/africa.m4a'
|
||||||
|
}).jPlayer("play");}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#play').click(function() {
|
||||||
|
if(isMobile.any()) {
|
||||||
|
$('#play').hide();
|
||||||
|
$('#pause').show();
|
||||||
|
}
|
||||||
|
$('#player').jPlayer('play');
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#pause').click(function() {
|
||||||
|
if(isMobile.any()) {
|
||||||
|
$('#play').show();
|
||||||
|
$('#pause').hide();
|
||||||
|
}
|
||||||
|
$('#player').jPlayer('pause');
|
||||||
|
});
|
||||||
|
|
||||||
var image = document.getElementById('background');
|
var image = document.getElementById('background');
|
||||||
image.onload = function() {
|
image.onload = function() {
|
||||||
var engine = new RainyDay({
|
var engine = new RainyDay({
|
||||||
|
|
@ -26,9 +73,30 @@
|
||||||
});
|
});
|
||||||
engine.rain([ [3, 2, 2] ], 100);
|
engine.rain([ [3, 2, 2] ], 100);
|
||||||
};
|
};
|
||||||
image.src = 'assets/img/africa.png';
|
image.src = 'assets/images/africa.png';
|
||||||
image.crossOrigin = 'anonymous';
|
image.crossOrigin = 'anonymous';
|
||||||
}
|
});
|
||||||
|
|
||||||
|
var isMobile = {
|
||||||
|
Android: function() {
|
||||||
|
return navigator.userAgent.match(/Android/i);
|
||||||
|
},
|
||||||
|
BlackBerry: function() {
|
||||||
|
return navigator.userAgent.match(/BlackBerry/i);
|
||||||
|
},
|
||||||
|
iOS: function() {
|
||||||
|
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
|
||||||
|
},
|
||||||
|
Opera: function() {
|
||||||
|
return navigator.userAgent.match(/Opera Mini/i);
|
||||||
|
},
|
||||||
|
Windows: function() {
|
||||||
|
return navigator.userAgent.match(/IEMobile/i);
|
||||||
|
},
|
||||||
|
any: function() {
|
||||||
|
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue