pop words
by John Doe
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/16.7.3/jcanvas.js"></script>
<div class='box'></div>
CSS
body {
background-color: #000;
}
JavaScript
(function($) {
$(document).ready(function() {
function showWords() {
var textArray = [
"СПАСИБО",
"ПОЖАЛУЙСТА",
"СКИДКА",
"АКЦИЯ",
"ОПЛАТА КАРТОЙ",
"ВСЕГО ДОБРОГО",
"НОВИНКИ",
"ВАШ ЗАКАЗ"
];
function makeDiv(layerName, cond) {
var divsize = ((Math.random() * 100) + 50).toFixed();
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * (250 - divsize)).toFixed();
var rightLimit = $(window).width() - 130;
var randomWord = textArray[(Math.floor(Math.random() * textArray.length))];
if (posy < 30) {
posy = 30;
} else if (posy > 100) {
posy = 100;
}
if (posx < 130) {
posx = 130;
} else if (posx > rightLimit) {
posx = rightLimit;
}
$('<canvas/>').attr({
width: $(document).width(),
height: 140
}).addClass('word').drawText({
layer: true,
name: layerName,
fillStyle: '#fff',
x: posx,
y: posy,
fontSize: '10px',
fontFamily: 'PF BeauSans Pro, sans-serif',
fontStyle: 700,
text: randomWord,
scale: 1,
opacity: 0
})
.appendTo('body')
.animateLayer(layerName, {}, 1, function(layer) {
$(this).animateLayer(layer, {
opacity: 1
}, 1500);
$(this).animateLayer(layer, {
scale: 2.2
}, 1500);
$(this).animateLayer(layer, {
scale: 1
}, 1500);
$(this).animateLayer(layer, {
opacity: 0
}, {
duration: 1500,
complete: function() {
if (cond) {
console.log(true);
...