Hi can I ask some help please, I’m trying to randomize the letters then animate to going up, this is working fine if I statically put the letters inside the div “balloon-area”, but now I want to dynamically randomize the letters and animate it, I tried to append the HTML to the div, but the problem is that the image is getting thicker or the balloon and sometimes the balloons are blinking ? Because it adds every 1 sec.
To give some idea I want to achieve to show to the users random letters going up inside the balloon, and the user can click the balloon, but before this clicking the balloon I need to fix first the random letters display going up.
I apologize, I uploaded the images balloon, but I don’t know how can I reference it to the URL.
Thank you in advance.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<style type="text/css">
.balloon-area{
border:solid 1px red;
height:600px;
width:600px;
margin-top:50px;
}
.balloon {
width: 20%;
height: 35%;
position: absolute;
}
.balloon-area {
border: solid 1px red;
height: 600px;
width: 600px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
}
.balloon-hit-area {
width: 100%;
height: 55%;
background: transparent;
font-size: 40px;
color: #fff;
}
.balloon {
width: 20%;
height: 35%;
position: absolute;
}
.balloon {
border: 5px solid transparent; /* hide animation bug with border on button*/
animation: float 15s infinite 1s;
opacity: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.balloon button {
position: relative;
}
.balloon[data-style="1"]::before{
background-image:url("'/img/balloon/blue.png");
}
.balloon[data-style="2"]::before{
background-image:url("'/img/balloon/red.png");
}
.balloon[data-style="3"]::before{
background-image:url("/img/balloon/orange.png'");
}
.balloon[data-style="4"]::before{
background-image:url("/img/balloon/green.png'");
}
.balloon[data-style="5"]::before{
background-image:url("/img/balloon/purple.png') ");
}
.balloon[data-style="6"]::before{
background-image:url("/img/balloon/blue.png')");
}
[data-style] button {
border: 0;
}
.balloon::before{
content:'';
position: absolute;
top:0;
left:0;
width:100%;
height:130%;
background-size: 90%;
background-position-x:50%;
background-repeat:no-repeat;
}
[data-position="1"]{
left:5%;
}
[data-position="2"]{
left:70%;
}
[data-position="3"]{
left:35%;
}
[data-position="4"]{
left:42.5%;
}
[data-position="5"]{
left:75%;
}
.delay1 {
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
}
.delay2 {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
@keyframes float {
0% {
transform: translate3d(0, 600px, 0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translate3d(0, -1000px, 0);
opacity: 0;
}
}
</style>
<body>
<div class="container">
<div class="content">
<div class="row">
<div class="row balloon-area">
</div>
<div class="questionword text-center text-success"><h1>WING</h1></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<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>
<script type="text/javascript">
let word = "WING";
let answerWord = [];
setInterval(function(){
let str = genereteLetter(3);
let myArr = str.split("");
let word = '<div class="balloon delay1" style="top: 40.1%;opacity: 1;" data-style="1" data-position="1">' +
+'<button type="button" class="balloon-hit-area">'+myArr[0]+'</button>'+
'</div>' +
'<div class="balloon delay1" style="top: 85.455%;opacity: 1;" data-style="2" data-position="2">'+
+'<button type="button" class="balloon-hit-area">'+myArr[1]+'</button>'+
'</div>'+
'<div class="balloon delay1" style="top: 60.455%; opacity: 1;" data-style="3" data-position="3">'+
'<button type="button" class="balloon-hit-area" >'+myArr[2]+'</button>'+
'</div>';
// $('.balloon-area').append(word);
}, 1000);
$('.balloon-hit-area').on('click',function(){
console.log($(this).text());
});
function genereteLetter(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() *
charactersLength));
}
return result;
}
</script>
</body>
</html>
