forked from rDrama/rDrama
fix bones award
parent
83c8af6f85
commit
da5d2d5cf4
|
@ -535,8 +535,7 @@ body::after {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Bones */
|
/* Bones */
|
||||||
#animate{
|
#bones-container {
|
||||||
margin-left: 45%;
|
|
||||||
margin-top: -5%;
|
margin-top: -5%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
|
|
@ -1,20 +1,13 @@
|
||||||
let bones_container = document.getElementById('animate');
|
let bones_container = document.getElementById('bones-container');
|
||||||
const number = bones_container.dataset.bones
|
let number = parseInt(bones_container.dataset.bones)*2
|
||||||
|
|
||||||
// Stackable
|
|
||||||
// With each award, append a new image to array
|
|
||||||
const sources = ['skeleton1.webp','skeleton2.webp','skeleton3.webp','skeleton4.webp','skeleton5.webp','skeleton6.webp'];
|
const sources = ['skeleton1.webp','skeleton2.webp','skeleton3.webp','skeleton4.webp','skeleton5.webp','skeleton6.webp'];
|
||||||
|
number = Math.min(number, sources.length)
|
||||||
|
|
||||||
if(number > sources.length){
|
|
||||||
number = sources.length
|
|
||||||
}
|
|
||||||
|
|
||||||
const n = sources.length - number
|
|
||||||
const pw = screen.availWidth/6
|
const pw = screen.availWidth/6
|
||||||
|
|
||||||
let circles = [];
|
let circles = [];
|
||||||
|
|
||||||
for (let i = 0; i < 3; i++) {
|
for (let i = 0; i < number; i++) {
|
||||||
addCircle(i * 150, [10 + 0, pw]);
|
addCircle(i * 150, [10 + 0, pw]);
|
||||||
addCircle(i * 150, [10 + 0, -pw]);
|
addCircle(i * 150, [10 + 0, -pw]);
|
||||||
addCircle(i * 150, [10 - (0.5*pw), -pw]);
|
addCircle(i * 150, [10 - (0.5*pw), -pw]);
|
||||||
|
@ -27,8 +20,8 @@ for (let i = 0; i < 3; i++) {
|
||||||
function addCircle(delay, range) {
|
function addCircle(delay, range) {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
let c = new Circle(range[0] + Math.random() * range[1], 80 + Math.random() * 4, {
|
let c = new Circle(range[0] + Math.random() * range[1], 80 + Math.random() * 4, {
|
||||||
x: -0.15 + Math.random() * 0.3,
|
x: Math.random(),
|
||||||
y: 1 + Math.random() * 1
|
y: 1 + Math.random()
|
||||||
}, range);
|
}, range);
|
||||||
circles.push(c);
|
circles.push(c);
|
||||||
}, delay);
|
}, delay);
|
||||||
|
@ -60,7 +53,6 @@ function Circle(x, y, v, range) {
|
||||||
_this.x += _this.v.x;
|
_this.x += _this.v.x;
|
||||||
this.element.style.opacity = 1;
|
this.element.style.opacity = 1;
|
||||||
this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
||||||
this.element.style.webkitTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
|
||||||
this.element.style.mozTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
this.element.style.mozTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if p.award_count("bones", v) %}
|
{% if p.award_count("bones", v) %}
|
||||||
<div id="animate" data-bones="{{p.award_count('bones', v)}}"></div>
|
<div id="bones-container" data-bones="{{p.award_count('bones', v)}}"></div>
|
||||||
<script defer src="{{'events/homoween/js/bones.js' | asset}}"></script>
|
<script defer src="{{'events/homoween/js/bones.js' | asset}}"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue