How to change the background image of an element randomly? - javascript

I have recently created a program which creates new element when someone clicks it. The new element which is created has some specific CSS styling. Now i want it's background to randomly change when the user clicks on button. Like the first time when someone clicks the background is red another time its green and so on like this.. My code is -
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
I want the background color of this box to change randomly..Please help, any help is appreciated..

as you can see from the code, I created a function that randomizes the numbers and puts them in the rgb.
function random_bg_color() {
var x = Math.floor(Math.random() * 256);
var y = Math.floor(Math.random() * 256);
var z = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + x + "," + y + "," + z + ")";
return bgColor;
}
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
bubbles.style.backgroundColor = random_bg_color();
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
For answer your comment :
Generate random image:
var Images = new Array("https://via.placeholder.com/150/0000FF/808080","https://via.placeholder.com/150/FF0000/FFFFFF",
"https://via.placeholder.com/150/FFFF00/000000");
function randompic() {
var randomNum = Math.floor(Math.random() * Images.length);
return Images[randomNum];
}
function a1click(){
var body = document.querySelector('body');
var bubbles = document.createElement("span");
var size = Math.random() * 100;
bubbles.style.width = 10 + size+'px';
bubbles.style.height = 10 + size+'px';
bubbles.style.backgroundImage = "url('"+randompic()+"')";
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
body{
background: rgb(73, 156, 145);
}
#a1{
position: relative;
top: 350px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: #000;
animation: tweek 1s linear infinite;
transform-origin: top;
background-size: cover;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>

This seems to work:
http://jsfiddle.net/mcuzq9rb/
I included a random color generator and applied it to the style of the floating squares.
Let me know if it's what you wanted.

I would style the box with an rga-value, similar to how you randomly set the size of the bubble:
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
bubbles.style.backgroundColor = "rgb("+r+", "+g+", "+b+")";

Here's a little function that uses rando.js to set an element's background color to a random hex string.
function setRandomBackgroundColor(element) {
var hexString = "#";
for (var i = 0; i < 3; i++) {
var hex = rando(255).toString(16);
hexString += hex.length == 1 ? "0" + hex : hex;
}
element.style.backgroundColor = hexString;
}
<script src="https://randojs.com/1.0.0.js"></script>
<button onclick="setRandomBackgroundColor(document.body);">Set random background color</button>

Related

How to make a collision detection between this 2 divs?

I want to activate a collision detection between the green and red div, simple, just square collision.
I need it for a game like the dinosaur of google, I'm designing for a class proyect.
I putted the var of the size form macaco and obstaculo in comment, beacuse something is not working in it, if i leave it normal, the jump function does not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inicio esqueleto</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<div onclick="saltar()" id="macaco" class="macaco"></div>
<div id="obstaculo"></div>
<script type="text/javascript">
var macaco = document.getElementById("macaco");
var obstaculo = document.getElementById("obstaculo");
function saltar(){
macaco.classList.add("play");
setTimeout(function(){
macaco.classList.remove("play");
},1000);
}
// var macaco = {x: 40, y: 70, width: 40, height: 70};
// var obstaculo = {x: 40, y: 50, width: 40, height: 50};
function collision(macaco, obstaculo){
if (macaco.x < obstaculo.x + obstaculo.width &&
macaco.x + macaco.width > obstaculo.x &&
macaco.y < obstaculo.y + obstaculo.height &&
macaco.y + macaco.height > obstaculo.y
) {
alert("It worked!")
// Colision detectada
} return true
}
</script>
</body>
</html>
#macaco {
background-color: green;
height: 70px;
width: 40px;
transform: translateX(15vw);
position: absolute;
bottom: 22px;
position: absolute;
}
#obstaculo {
background-color: red;
height: 50px;
width: 40px;
transform: translateX(50vw);
position: absolute;
bottom: 22px;
position: absolute;
animation: linear obstaculo 2s;
}
.play {
animation: linear saltar 1s;
}
#keyframes saltar {
0% {transform: translatey(0px) translateX(15vw)}
50% {transform: translatey(-120px) translateX(15vw)}
100% {transform: translatey(0px) translateX(15vw)}
}
#keyframes obstaculo {
0% {transform: translatey(0) translateX(50vw)}
100% {transform: translatey(0) translateX(0vw)}
}
For a collision between 2 rectangles you can observe only the x (width) part. So it's down to 2 ranges colliding.
[x1, x1 + w1] and [x2, x2 + w2].
This will not happen when x1 + w1 < x2 or x2 + w2 < x1.
So it will happen when the opposite of above happens. Using some Boolean arithmetic (de morgen law) it comes down to:
x1 + w1 >= x2 and x2 + w2 >= x1 (1D collision between 2 ranges)
Back to the 2 rectangles, this needs to happen also for the y side, so we can combine them all to:
function isRectColliding(rect1, rect2) {
return (rect1.x + rect1.width) >= rect2.x &&
(rect2.x + rect2.width) >= rect1.x &&
(rect1.y + rect1.height) >= rect2.y &&
(rect2.y + rect2.height) >= rect1.y
}
var rect1 = macaco.getBoundingClientRect()
var rect2 = macaco2.getBoundingClientRect()
var rect3 = obstaculo.getBoundingClientRect()
console.log('isRectColliding(rect1, rect3)', isRectColliding(rect1, rect3))
console.log('isRectColliding(rect2, rect3)', isRectColliding(rect2, rect3))
#macaco {
background-color: green;
height: 70px;
width: 40px;
transform: translateX(15vw);
position: absolute;
bottom: 22px;
}
#macaco2 {
background-color: yellow;
height: 70px;
width: 40px;
transform: translateX(45vw);
position: absolute;
bottom: 22px;
}
#obstaculo {
background-color: red;
height: 50px;
width: 40px;
transform: translateX(50vw);
position: absolute;
bottom: 22px;
position: absolute;
animation: linear obstaculo 2s;
}
<div id="macaco"></div>
<div id="macaco2"></div>
<div id="obstaculo"></div>

JS card animation + scss

My idea is to create a smooth animation of the appearance of the card from anywhere on the screen to the center. I already have an attractive animation with simultaneous zoom and rotation. It remains to make sure that on click the card from any center of the screen moves smoothly to the center, when closed, to its original position. It is advisable to do this in pure js. It is possible with the connection of libraries, it will also be useful
JS:
card = document.querySelector(".card");
front = document.querySelector(".front");
back = document.querySelector(".back");
exit = document.querySelector(".back-exit");
// //data of screen
// pageWidth = document.documentElement.scrollWidth;
// pageHeight = document.documentElement.scrollHeight;
// //date for front part
// heightOfBlock = front.offsetHeight;
// widthOfBlock = front.clientWidth;
// //date for back part
// heightOfBlock2 = back.offsetHeight;
// widthOfBlock2 = back.clientWidth;
front.addEventListener("click", function () {
front.classList.add("active");
back.classList.add("active");
back.classList.add("scale");
function background() {
card.classList.add("active");
}
// front.style.top = (pageHeight / 2) - (heightOfBlock / 2) + 'px';
// front.style.left = (pageWidth / 2) - (widthOfBlock / 2) + 'px';
// back.style.top = (pageHeight / 2) - 300 + 'px';
// back.style.left = (pageWidth / 2) - 500 + 'px';
setTimeout(background, 500);
});
exit.addEventListener("click", function () {
front.classList.remove("active");
back.classList.remove("active");
back.classList.remove("scale");
card.classList.remove("active");
// front.style.top = 0 + 'px';
// front.style.left = 0 + 'px';
// back.style.top = 0 + 'px';
// back.style.left = 0 + 'px';
});
* {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
}
body {
overflow: hidden;
}
.card {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.card.active {
background-color: rgba(0, 0, 0, 0.8);
transition: background 1s;
}
.front,
.back {
cursor: pointer;
width: 298px;
height: 199px;
overflow: hidden;
backface-visibility: hidden;
position: absolute;
transition: transform 0.5s linear;
border-radius: 30px;
background-color: #111;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.front {
transform: perspective(600px) rotateY(0deg);
transition: 0s ease;
}
.back {
transform: perspective(600px) rotateY(540deg);
background-color: rgb(70, 70, 70);
transition: 0s ease;
&-exit {
position: absolute;
top: 20px;
right: 20px;
color: rgb(126, 19, 19);
&:hover {
text-decoration: underline;
}
}
}
.front.active {
transform: perspective(600px) rotateY(-540deg);
transition: 1.2s ease;
animation: 1s linear scale;
}
.back.active {
transform: perspective(600px) rotateY(0deg);
transition: 1.2s ease;
font-size: 3rem;
.back-exit {
font-size: 1.3rem;
}
/* Запускать анимацию, когда класс активный */
animation: 1s linear scale;
}
.back.scale {
width: 1000px;
height: 600px;
}
/* Написать анимацию */
#keyframes scale {
from {
width: 298px;
height: 199px;
}
to {
width: 1000px;
height: 600px;
}
}
<!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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="front">
Hello It's me!
</div>
<div class="back">
<div class="back-exit">close</div>
Bye!
</div>
</div>
<!-- <h1>По клику блок выровняется.</h1>
<h2>Можно проскролить и кликнуть где-нибудь внизу.</h2>
<div id="testBlock"></div> -->
<script src="./script.js"></script>
</body>
</html>
The code is a little incorrect because of what I'm doing in sass

i want to join these two vertical lines with my custom cursor starting and ending which is a line(horizontal)

<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
perspective: 500px;
perspective-origin: top;
transform-style: preserve-3d;
width: 100%;
height: 100vh;
background: black;
position: relative;
}
.cursor {
position: absolute;
width: 8rem;
height: 3px;
border-radius: 10px;
background: white;
z-index: 11;
left: -50px;
top: 30px;
transform-style: preserve-3d;
transform: translateZ(100px) rotateX(-0deg);
}
.follow_cursor {
position: absolute;
background: white;
width: 2px;
height: 5rem;
z-index: 2;
top: 100%;
left: 0%;
right: 0;
transform-origin: top;
backdrop-filter: blur(20px);
}
.follow_cursor2 {
position: absolute;
background: white;
width: 2px;
height: 2rem;
z-index: 3;
top: 100%;
left: 100%;
right: 0px;
transform-origin: top;
backdrop-filter: blur(20px);
}
</style>
</head>
<body>
<!-- this div need to be fixed -->
<div class="follow_cursor"></div>
<div class="follow_cursor2"></div>
<div class="cursor"></div>
</body>
<script>
let cursor = document.querySelector(".cursor");
let main = document.querySelector(".main");
const follow = document.querySelector(".follow_cursor");
const follow_2 = document.querySelector(".follow_cursor2");
const origR = follow.getBoundingClientRect();
const origR_2 = follow_2.getBoundingClientRect();
document.onmousemove = (e) => {
let x = e.pageX;
let y = e.pageY;
cursor.style.transform = `translate3d(${x}px, ${y}px , 0)`;
// calculate distance and angle.
let xf = origR.left + origR.width / 2;
let x2f = origR_2.left + origR_2.width / 2;
let yf = origR.top;
let y2f = origR_2.top;
// // distance to cursor from follow
let dist = Math.sqrt((xf - x) * (xf - x) + (yf - y) * (yf - y));
let dist2 = Math.sqrt((x2f - x) * (x2f - x) + (y2f - y) * (y2f - y));
// console.log(dist)
var angle = 0;
var angle2 = 0;
// get the rotation angle
angle = 90 + (Math.atan2(yf - y, xf - x) * 180) / Math.PI;
angle2 = 90 + (Math.atan2(y2f - y, x2f - x) * 180) / Math.PI;
follow.style.transform =
"rotateZ(" + angle + "deg) scaleY(" + dist / origR.height + ")";
follow_2.style.transform =
"rotateZ(" + angle2 + "deg) scaleY(" + dist2 / origR_2.height + ")";
};
</script>
</html>
i am trying to join the vertical lines with my custom cursor but its not working.
i need to join these cursor ending with these vertical line endings.
the link of this image given below
you can run the snippets and check the image to take the refrence what i am trying to do.
i will be thankful if you will help me.
my communication skill are not good hope you will understand
i want this lines to look like this in the image
Your code was hard to read, but I think the transform: translateZ() in the initial css had to do with the error.
I've made you a working example containing 3 elements: the lines and the custom cursor.
I calculate the window height (win_H) and width (win_W) and the width of the custom cursor (myc_W).
The lines are fixed at the left and right bottom of the window, touching at the left and right corner of the custom pointer. From there it's simply maths: calculate the triangles (Pythagoras c2=a2+b2) and the angles (note the angles are in radials, not degrees!).
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
perspective: 500px;
perspective-origin: top;
transform-style: preserve-3d;
width: 100%;
height: 100vh;
background: black;
position: relative;
}
#my_cursor {
position: absolute;
width: 8rem;
height: 3px;
border-radius: 10px;
background: white;
left: 0px;
top: 0px;
}
#line_1{
position: absolute;
background: white;
width: 2px;
height: 100%;
bottom: 0;
left: 0;
transform-origin: bottom left;
backdrop-filter: blur(20px);
}
#line_2{
position: absolute;
background: white;
width: 2px;
height: 100%;
bottom: 0;
right: 0;
transform-origin: bottom right;
backdrop-filter: blur(20px);
}
</style>
</head>
<body>
<div id="line_1"></div>
<div id="line_2"></div>
<div id="my_cursor"></div>
</body>
<script>
let
my_cursor = document.getElementById("my_cursor"),
line_1 = document.getElementById("line_1"),
line_2 = document.getElementById("line_2"),
win_W=window.innerWidth,
win_H=window.innerHeight,
myc_W=(my_cursor.getBoundingClientRect().width)/2
;
//SET STARTING POSITION in middle of screen
_calculate( (win_W/2), (win_H/2));
document.onmousemove = (e) => {
_calculate( e.pageX, e.pageY);
}
function _calculate(mouseX,mouseY){
//CUSTOM CURSOR position:
let myc_XL = mouseX - myc_W,
myc_XR = mouseX + myc_W,
myc_Y = mouseY;
my_cursor.style.transform = `translate3d(${myc_XL}px, ${myc_Y}px , 0)`;
let a,b,c,angle;
//LINE 1
a = myc_XL;
b = win_H - mouseY;
c = Math.sqrt((a*a)+(b*b));
angle = Math.asin( a /c );
line_1.style.transform = "rotateZ(" + angle + "rad) scaleY(" + (c/win_H) + ")";
//LINE 2
a = win_W - myc_XR;
c = Math.sqrt((a*a)+(b*b));
angle = Math.asin( a / c );
line_2.style.transform = "rotateZ(" + (-angle) + "rad) scaleY(" + (c/win_H) + ")";
};
</script>
</html>

when i run .onclick, it runs once, and then it doesnt work again

to my understanding, .onclick, should work each time I click the button, however this is only working once. This is my code so far
var left = document.getElementById("left");
left.onclick = moveLeft;
function moveLeft() {
var box = document.getElementById("box1");
var pos = 200;
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
like I said, it works, but only once, it shifts the box to the left one square, but it shouldn't stop until after 5 squares.
please help...
The first answer is right, your pos variable revalue to 200 when you click your button everytime.
So it is just from 200 to 250 everytime.it look like same everytime.
try like this:
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
That is because your pos variable is defined inside the moveLeft function. Every time the function is executed, the pos is always 200. Define it outside the moveLeft function.
Either make pos global as in below snippet.
Or set it dynamically within the function.
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>

Text transition/animation onclick in javascript function and HTML

I have a button triggering this function on click:
<button onclick="showAdvice()">Advice!</button>
<p id="text"></p>
<script>
function showAdvice() {
var advices = ["1","2","3"];
var choose = Math.floor(Math.random() * advices.length);
document.getElementById("text").innerHTML = advices[choose];
}
</script>
The onclick action generates advices in "text" paragraph, they appear in random order. I want them to have a transition in between - opacity, fade out/fade in. How can I achieve this in CSS/JavaScript?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<style type="text/css" media="screen">
#pContainer {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
#pContainer > p {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.5s linear;
}
#pContainer > p.show {
opacity: 1;
}
#pContainer > p.hide {
opacity: 0;
}
</style>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<button onclick="showAdvice()">Advice!</button>
<div id="pContainer">
<p id="text" class="show"></p>
<p id="text02" class="hide"></p>
</div>
<script>
function showAdvice() {
var advices = ["1","2","3"];
var choose = Math.floor(Math.random() * advices.length);
$('#pContainer p.hide')
.text(advices[choose])
.removeClass('hide')
.addClass('show')
.siblings('p')
.removeClass('show')
.addClass('hide');
}
</script>
</body>
</html>
You can use jquery to create animations.
function showAdvice() {
$("#text").hide();
var advices = ["1", "2", "3"];
var choose = Math.floor(Math.random() * advices.length);
document.getElementById("text").innerHTML = advices[choose];
$("#text").fadeIn();
}
Example:
https://jsfiddle.net/90mxq8bf/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<style type="text/css" media="screen">
#pContainer {
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
}
#pContainer > p {
position: absolute;
top: 0;
left: 0;
/* transition: opacity 0.5s linear; */
}
#pContainer > p.show {
/* opacity: 1; */
opacity: 1;
-webkit-animation: showP 0.85s linear;
}
#pContainer > p.hide {
/* opacity: 0; */
opacity: 0;
top: -50px;
-webkit-animation: hideP 0.85s linear;
}
#-webkit-keyframes showP {
0%{
opacity: 0;
top: -50px;
}
100%{
opacity: 1;
top: 0px
}
}
#-webkit-keyframes hideP {
0%{
opacity: 1;
top: 0px;
}
80%{
opacity: 0;
}
90%{
top: 105px; /* container height + 5*/
}
100%{
opacity: 0;
top: -50px;
}
}
</style>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<button onclick="showAdvice()">Advice!</button>
<div id="pContainer">
<p id="text" class="show"></p>
<p id="text02" class="hide"></p>
</div>
<script>
function showAdvice() {
var advices = ["1","2","3"];
var choose = Math.floor(Math.random() * advices.length);
$('#pContainer p.hide')
.text(advices[choose])
.removeClass('hide')
.addClass('show')
.siblings('p')
.removeClass('show')
.addClass('hide');
}
</script>
</body>
</html>

Categories