<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Drew</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="./drew.css" />
</head>
<body>
<div class="drew-div-cover">
<div class="drew-div-1"></div>
<div class="drew-div-2"></div>
<div
class="info-div"
data-toggle="popover"
data-trigger="hover focus"
title="Key Hints"
>
<!-- <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> -->
<span
class="fa fa-info-circle"
data-bs-toggle="modal"
data-bs-target="#myModal"
></span>
</div>
<div class="modal" tabindex="-1" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Key Hints</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<table style="text-align: center" class="info-table mx-auto">
<tr>
<th>KEY</th>
<th>ACTION</th>
</tr>
<tr>
<td>B</td>
<td>Change Background</td>
</tr>
<tr>
<td>I</td>
<td>Open Key Hints Menu</td>
</tr>
<tr>
<td>SPACE</td>
<td>Pause/Continue Animation</td>
</tr>
<tr style="border-top: 1px solid #ccc">
<th>MOUSE EVENT</th>
<th>ACTION</th>
</tr>
<tr>
<td>Double Click</td>
<td>Pause Animation</td>
</tr>
<tr>
<td>Move Out</td>
<td>Pause Animation</td>
</tr>
<tr>
<td>Move In</td>
<td>Continue Animation</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
<script src="./drew.js"></script>
</body>
</html>
body {
height: 100vh;
margin: 0;
}
.drew-div-cover {
height: 100%;
display: flex;
}
.drew-div-1 {
height: 100%;
width: 50%;
overflow: hidden;
background: red;
transition: ease 1s;
position: relative;
}
.drew-div-2 {
height: 100%;
width: 50%;
overflow: hidden;
background: green;
transition: ease 1s;
position: relative;
}
.info-div {
position: absolute;
right: 10px;
top: 10px;
}
.info-div span {
padding: 5px;
color: rgb(228, 228, 228);
height: fit-content;
opacity: 0.7;
font-size: 20px;
cursor: pointer;
transition: 0.2s ease;
}
.info-div span:hover {
opacity: 1;
transform: scale(1.1);
}
.info-table td {
padding: 5px;
}
var run = true;
var myInterval;
var drewDiv1 = $(".drew-div-1"),
drewDiv2 = $(".drew-div-2");
var div1Array = [],
div2Array = [];
var myModal = new bootstrap.Modal(document.getElementById("myModal"), {
keyboard: true,
});
$(() => {
createMoreDivs();
moveDiv();
moveInnerDiv();
changeDivBackground();
setInterval(moveDiv, 1000);
setInterval(moveInnerDiv, 9000);
});
$(window).on("dblclick", () => {
if (run) run = false;
else {
run = true;
moveInnerDiv();
moveDiv();
}
});
$(window).on("keypress", (e) => {
// console.log(e.keyCode);
if (e.keyCode == 32) {
if (run) run = false;
else {
run = true;
moveInnerDiv();
moveDiv();
}
} else if (e.keyCode == 98 || e.keyCode == 66) {
changeDivBackground();
} else if (e.keyCode == 105 || e.keyCode == 73) {
myModal.toggle();
}
});
$(window).on("mouseenter", () => {
if (!run) {
run = true;
moveInnerDiv();
moveDiv();
}
});
$(window).on("mouseleave", () => {
run = false;
});
$(".info-div span").on("mouseover", () => {
$("[data-toggle=popover]").popover("show");
});
$(".info-div span").on("mouseout", () => {
$("[data-toggle=popover]").popover("hide");
});
function changeDivBackground() {
drewDiv1.css({
background:
"linear-gradient(to right, " +
"#" +
Math.floor(Math.random() * 16777215).toString(16) +
", " +
"#" +
Math.floor(Math.random() * 16777215).toString(16) +
" )",
});
drewDiv2.css({
background:
"linear-gradient(to right, " +
"#" +
Math.floor(Math.random() * 16777215).toString(16) +
", " +
"#" +
Math.floor(Math.random() * 16777215).toString(16) +
" )",
});
}
function moveDiv() {
if (run) {
var drewDiv1Css, drewDiv2Css;
drewDiv1Css = {
"border-top-right-radius": Math.floor(Math.random() * 400),
"border-bottom-right-radius": Math.floor(Math.random() * 400),
};
drewDiv2Css = {
"border-top-left-radius": Math.floor(Math.random() * 400),
"border-bottom-left-radius": Math.floor(Math.random() * 400),
};
drewDiv1.css(drewDiv1Css);
drewDiv2.css(drewDiv2Css);
}
}
function moveInnerDiv() {
if (run) {
div1Array.forEach((element) => {
var widthHeight = Math.floor(Math.random() * 100);
$(element).css({
background: "#" + Math.floor(Math.random() * 16777215).toString(16),
top: Math.random() * $(".drew-div-1").height() - $(element).height(),
left: Math.random() * $(".drew-div-1").width() - $(element).width(),
width: widthHeight,
height: widthHeight,
filter: "blur(" + (Math.floor(Math.random() * (5 - 0 + 1)) + 0) + "px)",
});
});
div2Array.forEach((element) => {
var widthHeight = Math.floor(Math.random() * 100);
$(element).css({
background: "#" + Math.floor(Math.random() * 16777215).toString(16),
top: Math.random() * $(".drew-div-2").height() - $(element).height(),
left: Math.random() * $(".drew-div-2").width() - $(element).width(),
width: widthHeight,
height: widthHeight,
filter: "blur(" + (Math.floor(Math.random() * (5 - 0 + 1)) + 0) + "px)",
});
});
}
}
function createMoreDivs() {
var num1 = Math.floor(Math.random() * (50 - 20 + 1)) + 20;
var num2 = Math.floor(Math.random() * (50 - 20 + 1)) + 20;
// var num1 = 50;
// var num2 = 50;
initCss = "border-radius:100%; transition: 10s ease; position: absolute;";
var drewDiv1Inside = "",
drewDiv2Inside = "";
for (var i = 0; i < num1; i++) {
div1Array.push(".drew-div-1-" + i);
drewDiv1Inside +=
"<div class='drew-div-1-" +
i +
"' style=\"" +
initCss +
" top: " +
Math.floor(Math.random() * $(".drew-div-1").height()) +
"px; left: " +
Math.floor(Math.random() * $(".drew-div-1").width()) +
"px; width: 60px; height: 60px; background: #" +
Math.floor(Math.random() * 16777215).toString(16) +
';"></div>';
}
for (var ij = 0; ij < num2; ij++) {
div2Array.push(".drew-div-2-" + ij);
drewDiv2Inside +=
"<div class='drew-div-2-" +
ij +
"' style=\"" +
initCss +
" top: " +
Math.floor(Math.random() * $(".drew-div-2").height()) +
"px; left: " +
Math.floor(Math.random() * $(".drew-div-2").width()) +
"px; width: 60px; height: 60px; background: #" +
Math.floor(Math.random() * 16777215).toString(16) +
';"></div>';
}
drewDiv1.html(drewDiv1Inside);
drewDiv2.html(drewDiv2Inside);
}
