Skip to content

Instantly share code, notes, and snippets.

@mcnemesis mcnemesis/index.html
Created Dec 14, 2017

Embed
What would you like to do?
NGOMA
<!-- msg template -->
<script type="text/template" id="msg_template">
<li class="content">
<p class="img" style='background-image: url("<%= img %>")'> </p>
<p class="msg"><%= msg %></p>
</li>
</script>
<!-- main html -->
<a href="https://github.com/uriuriuriu/beat.js" target="_blank"><h1 id="title">NuChwezi Chan</h1></a>
<ul id="box"></ul>
/*!
* beat.js - This script drives the events in bpm base.
* from uriuriuriu https://github.com/uriuriuriu/beat.js
*
* var beatJs = new beatJs({
* bpm: 120,
* rhythm:[4,4,4,2,2], // set to 16 in total.
* repeat: true
* });
* beatJs.push(pre_callback1);
* beatJs.push(pre_callback2);
* beatJs.run();
* beatJs.stop();
*
*/
(function(window){
'use strict';
function beatJs(options){
var options = $.extend({
bpm: 120,
rhythm:[4,4,4,2,2],
repeat: true
}, options);
this.options = options;
this.isRun = false;
this.rhythmCnt = 0;
this.oneBeatMsec = 0;
this.cnt = 0;
this.animationID = "";
this.startTime = 0;
this.queue = [];
this.rhythmMaxCnt = this.options.rhythm.length - 1;
}
beatJs.prototype.push = function(pre_callback){
this.queue.push(pre_callback);
};
beatJs.prototype.run = function(){
this.isRun = true;
this.cnt = this.rhythmCnt = 0;
this.startTime = new Date().getTime();
this.oneBeatMsec = 15000 / this.options.bpm;
var self = this;
var queueCount = self.queue.length;
function main(){
self.queue[self.cnt%queueCount]();
self.cnt++;
}
function checkUpdate(){
var rhythm = self.options.rhythm[self.rhythmCnt];
var now = new Date().getTime();
var bool = false;
if (self.oneBeatMsec * rhythm <= (now - self.startTime)) {
self.startTime = now;
self.rhythmCnt = (self.rhythmCnt + 1) % self.options.rhythm.length;
bool = true;
}
return bool;
};
function loop(){
if(!self.options.repeat && (self.rhythmMaxCnt < self.cnt)){
self.stop();
self.cnt = self.rhythmCnt = 0;
}else{
self.animationID = requestAnimationFrame( loop );
if(checkUpdate()){
main();
};
};
};
main();
loop();
};
beatJs.prototype.stop = function(){
this.isRun = false;
cancelAnimationFrame(this.animationID);
};
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(f) { return window.setTimeout(f, 1000 / 60); };
}());
window.cancelAnimationFrame = (function() {
return window.cancelAnimationFrame ||
window.cancelRequestAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.msCancelAnimationFrame ||
window.msCancelRequestAnimationFrame ||
window.oCancelAnimationFrame ||
window.oCancelRequestAnimationFrame ||
function(id) { window.clearTimeout(id); };
}());
window.beatJs = beatJs;
})(window);
// msg html template
var _msgTemplate = $("#msg_template").text();
var _createMsg = _.template(_msgTemplate);
function getMsgHtml(img, msg) {
return _createMsg({"img": img, "msg":msg});
}
// main
var k = 0;
var beat = new beatJs({bpm:120,repeat:true});
var imgURL = "http://lorempixel.com/80/80/people/";
beat.push(function(){
$("#box").prepend(getMsgHtml(imgURL,"one "+k++));
});
/*
beat.push(function(){
$("#box").prepend(getMsgHtml(imgURL,"two "+k++));
});
beat.push(function(){
$("#box").prepend(getMsgHtml(imgURL,"three "+k++));
});
beat.push(function(){
$("#box").prepend(getMsgHtml(imgURL,"knock! "+k++));
});
beat.push(function(){
$("#box").prepend(getMsgHtml(imgURL,"knock! "+k++));
});
*/
beat.run();
$("#title").click(function(){
if(beat.isRun){
beat.stop();
}else{
beat.run();
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js"></script>
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script:700);
@function makelongshadow($color) {
$val: 0px 0px $color;
@for $i from 1 through 50 {
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
@return $val;
}
@mixin longshadow($color) {
text-shadow: makelongshadow($color);
}
$color: #ddd;
$bgColor: #111;
*{
color:$color;
}
body {
background-color : #333;
font-size:12px;
margin:20px;
}
h1{
text-align:center;
font-size:50px;
font-family: 'Dancing Script', cursive;
font-weight:bold;
line-height:50px;
margin-bottom:20px;
@include longshadow(darken($color, 80% ));
}
a{
text-decoration: none;
}
h1:hover{
cursor :pointer;
color: #dddd22;
z-index:100;
}
#box{
margin:0 auto;
width:600px;
}
@-webkit-keyframes showAnimation {
0% {-webkit-transform:scale(0.1, 0.0); opacity: 0;}
80% {-webkit-transform:scale(1.1, 0.1); opacity: 0.4;}
94% {-webkit-transform:scale(1.04, 1.04); opacity: 0.8;}
100% {-webkit-transform:scale(1, 1); opacity: 1;}
}
.content{
width:600px;
margin-bottom:10px;
display:box; display:-moz-box; display:-webkit-box;
-webkit-transform: translate3d(0, 0, 0);
-webkit-animation: showAnimation 0.25s ease-out;
}
.img{
width:80px;
height:80px;
background-color:$bgColor;
border:4px solid $bgColor;
@include border-radius(10px, 10px);
}
.msg{
width:500px;
margin-left:10px;
background-color:#ccc;
color:#333;
padding:10px;
@include border-radius(10px, 10px);
font-family: 'Josefin Slab', serif;
font-size:28px;
position: relative;
border: 4px solid $bgColor;
}
.msg:after, .arrow_box:before {
right: 100%;
top: 50px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.msg:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: #ccc;
border-width: 10px;
margin-top: -30px;
}
.msg:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: $bgColor;
border-width: 36px;
margin-top: -36px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.