I have this logo which has 2 eyes in it. I'd like to get the animated effect which will track the cursor position and look at it whole time.
I need this:
I have created this solution but still have some problem with the width of the eyes and once I get it more wide, it gets out of the border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
#import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: "Bebas Neue", cursive;
background: #0c3b5a;
}
.container {
display: flex;
background: white;
border-radius: 48px;
width: auto;
padding: 1em 2em;
}
.container .eyes {
position: relative;
width: 80px;
height: 80px;
display: block;
background-color: #fff;
margin: 0 -10px;
border-radius: 50%;
border: 2px solid black;
}
.eyes:first-child{
z-index:9
}
.container .eyes::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border-radius: 50%;
background: #000;
position: absolute;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="eyes"></div>
<div class="eyes"></div>
</div>
<script type="text/javascript">
document.querySelector("body").addEventListener("mousemove", eyeball);
function eyeball() {
const eye = document.querySelectorAll(".eyes");
eye.forEach(function (eye) {
let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
let radian = Math.atan2(event.pageX - x, event.pageY - y);
let rotate = radian * (180 / Math.PI) * -1 + 270;
eye.style.transform = "rotate(" + rotate + "deg)";
});
}
</script>
</body>
</html>
1- don't style container and eye together. actually, you have some unnecessary styles.
2- add overflow: auto; to the eye.
3- you better differentiate the eye border color from the eyeballs, because if it's the same, the eyeballs look extended a little. it's up to you.
here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
#import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: "Bebas Neue", cursive;
background: #0c3b5a;
}
.container {
display: flex;
background: white;
border-radius: 48px;
width: auto;
padding: 1em 2em;
}
.eyes {
position: relative;
width: 100px;
height: 100px;
display: block;
background-color: #fff;
margin: 0 -10px;
border-radius: 50%;
border: 1px solid orange;
overflow: auto;
}
.eyes:first-child{
z-index:9
}
.container .eyes::before {
content: "";
top: 50%;
left: 35px;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #000;
position: absolute;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="eyes"></div>
<div class="eyes"></div>
</div>
<script type="text/javascript">
document.querySelector("body").addEventListener("mousemove", eyeball);
function eyeball() {
const eye = document.querySelectorAll(".eyes");
eye.forEach(function (eye) {
let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
let radian = Math.atan2(event.pageX - x, event.pageY - y);
let rotate = radian * (180 / Math.PI) * -1 + 270;
eye.style.transform = "rotate(" + rotate + "deg)";
});
}
</script>
</body>
</html>
Related
I tried using redoing it but it doesn't work all I want is to redCar to move left and right when using the arrow keys
there was a error once but it got solved by moving the below the body and can you tell me why is that????
var blueCar = document.getElementById("bluecar");
var redCar = document.getElementById("redcar");
var result = document.getElementById("result");
var game = document.getElementById("game");
var score = document.getElementById("score");
var counter = 0;
blueCar.addEventListener("animationiteration",function(){
var random = ((Math.floor(Math.random()*3))*130)
blueCar.style.left = random+"px";
counter++;
})
**next code is not working like it sappose to do**
redCar.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
}; *this is the command of left key*
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
//this is my css which is working is fine
*{
margin: 0%;
padding: 0%;
}
body{
background-color: #34adff;
background-image: -webkit-linear-gradient(45deg,#7c7e80 50%,#323333 50%);
min-height: 800px;
}
#game{
height: 500px;
width: 390px;
background-color: 1rem solid black;
background-image:url(narutoR.png) ;
background-size: contain;
margin: 1rem auto;
overflow: hidden;
}
#bluecar{
height: 100px;
width: 130px;
background-color: #34adff;
position: relative;
top: 0px;
left: 0px;
text-align: center;
animation: move 1s linear infinite;
}
#bluecar img{
height: 100px;
}
#keyframes move {
0%{
top: 0px;
}
100%
{
top: 501px;
}
}
#redcar{
height: 100px;
width: 130px;
background-color:red;
position: relative;
top: 250px;
left: 130px;
text-align: center;
}
#redcar img{
height: 100px;
}
#result{
height: 200px;
width: 400px;
background-color: darkred;
margin:5rem ;
border: 2px solid white;
border-radius:20px ;
font-size: 30px;
text-align: center;
display:none;
}
#score{
font-size: 2.2rem;
color:goldenrod;
}
#btn{
padding: 0.5rem 1rem;
border: none;
border-radius: 20px;
background-color:black;
color:cyan;
font-size: 25px;
text-transform: uppercase;
margin-top: 10px;
cursor: pointer;
}
**this is working fine as i am able to access them perfectely**
<!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>car game</title>
<link rel="stylesheet" href="cargame.css">
</head>
<body>
<div>
<div id="game">
<div id="bluecar" > <img src="rasengan.jpeg" alt="blurcar"></div>
<div id="redcar" > <img src="pain.jpeg" alt="redcar"></div>
</div>
<div id="result">
<h1>GameOver</h1>
<p id="score"></p>
<button id="btn" onclick="location.reload()">Restart</button>
</div>
</div>
</body>
<script src="cargame.js"></script>
</html>
Add the keydown eventListener to the document.
document.addEventListener("keydown",function(e){
if(e.keyCode=="39")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft<260)
{
redCar.style.left = (redCarleft+130)+"px";
}
};
if(e.keyCode=="37")
{
var redCarleft = parseInt(window.getComputedStyle(redCar).getPropertyValue("left"))
if(redCarleft>0){
redCar.style.left = (redCarleft-130)+"px";
}
}
})
There is this code, in it I set the minimum indent between the sliders using rangeGap. Everything seems to work as it should, but they continue to run into each other. Maybe someone can tell me what is wrong.
I can't figure out if it's the positioning of the elements or if I need to change the logic in the js. It should work like this, but the thumbs should not move each other when colliding: https://codepen.io/BabylonJS/pen/gqzBWx
const progressBar = document.querySelector('.slider--progress');
const inputMin = document.querySelector('.input--min');
const inputMax = document.querySelector('.input--max');
const inputRange = [inputMin, inputMax];
const rangeGap = 50000;
inputRange.forEach(function (el) {
el.addEventListener('input', function (e) {
let minValue = parseInt(inputRange[0].value);
let maxValue = parseInt(inputRange[1].value);
if (maxValue - minValue < rangeGap) {
if (e.target.className === 'input--min') {
inputRange[0].value = maxValue - rangeGap;
} else if (e.target.className === 'input--max') {
inputRange[1].value = minValue + rangeGap;
}
} else {
progressBar.style.left = (minValue / inputRange[0].max) * 100 + '%';
progressBar.style.right = 100 - (maxValue / inputRange[1].max) * 100 + '%';
}
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: rgb(107, 216, 107);
}
.slider {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 50px;
height: 30px;
width: 500px;
padding: 15px 10px;
border-radius: 10px;
background: rgb(42, 138, 42);
}
.slider--body {
background: rgb(250, 250, 250);
height: 4px;
width: 100%;
position: relative;
border-radius: 5px;
}
.slider--progress {
position: absolute;
left: 25%;
right: 25%;
background: rgb(107, 216, 107);
height: 4px;
border-radius: 10px;
}
.slider--inputs {
position: relative;
}
.slider--inputs > input {
pointer-events: none;
}
.slider--input {
position: absolute;
top: -2.4px;
left: -3px;
height: 5px;
width: calc(100% + 2px);
background: none;
-webkit-appearance: none;
}
.slider--input::-webkit-slider-thumb {
width: 15px;
height: 15px;
background: rgb(107, 216, 107);
border-radius: 50%;
border: 1px solid rgb(42, 138, 42);
pointer-events: auto;
-webkit-appearance: none;
}
<!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>Double-range slider</title>
</head>
<body>
<div class="slider">
<div class="slider--body">
<div class="slider--progress"></div>
<div class="slider--inputs">
<input type="range" class="slider--input input--min" min="0" , max="999999" step="10" value="250000" />
<input type="range" class="slider--input input--max" min="0" , max="999999" step="10" value="750000" />
</div>
</div>
</div>
<script src="double-range-slider.js"></script>
</body>
</html>
Thanks for the help) Instead of className === 'class', I wrote classList.contains('class') and it worked!
const progressBar = document.querySelector('.slider--progress');
const inputRange = document.querySelectorAll('.slider--input');
let rangeGap = 50000;
inputRange.forEach(function (el) {
el.addEventListener('input', function (e) {
let minValue = parseInt(inputRange[0].value);
let maxValue = parseInt(inputRange[1].value);
if (maxValue - minValue < rangeGap) {
if (e.target.classList.contains('input--min')) {
inputRange[0].value = maxValue - rangeGap;
} else if (e.target.classList.contains('input--max')) {
inputRange[1].value = minValue + rangeGap;
}
} else {
progressBar.style.left = (minValue / inputRange[0].max) * 100 + '%';
progressBar.style.right = 100 - (maxValue / inputRange[1].max) * 100 + '%';
}
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background: rgb(107, 216, 107);
}
.slider {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
margin-top: 50px;
height: 30px;
width: 500px;
padding: 15px 10px;
border-radius: 10px;
background: rgb(42, 138, 42);
}
.slider--body {
background: rgb(250, 250, 250);
height: 4px;
width: 100%;
position: relative;
border-radius: 5px;
}
.slider--progress {
position: absolute;
left: 25%;
right: 25%;
background: rgb(107, 216, 107);
height: 4px;
border-radius: 10px;
}
.slider--inputs {
position: relative;
}
.slider--inputs > input {
pointer-events: none;
}
.slider--input {
position: absolute;
top: -2.4px;
left: -3px;
height: 5px;
width: calc(100% + 2px);
background: none;
-webkit-appearance: none;
}
.slider--input::-webkit-slider-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid rgb(42, 138, 42);
pointer-events: auto;
-webkit-appearance: none;
background: rgb(107, 216, 107);
}
<!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>Double-range slider</title>
</head>
<body>
<div class="slider">
<div class="slider--body">
<div class="slider--progress"></div>
<div class="slider--inputs">
<input type="range" class="slider--input input--min" min="0" , max="999999" step="10" value="250000" />
<input type="range" class="slider--input input--max" min="0" , max="999999" step="10" value="750000" />
</div>
</div>
</div>
<script src="double-range-slider.js"></script>
</body>
</html>
e.target.className === 'input--min' will always return false. If you put e.target.className in a console log you will see "slider--input input--min".
Here's the correct way for your condition 👉 Check if an element contains a class in JavaScript?
I am trying to achieve parallax effect where I have almost done but I have problem in Heading tag <h1 id="text">Merry Chrismas</h1> which is not animating. <h1 id="text">Merry Chrismas</h1> goes to top when scrolling.
let text = document.getElementById('text');
let moon = document.getElementById('moon');
let snow = document.getElementById('snow');
let leftMountain = document.getElementById('left-mountain');
let rightMountain = document.getElementById('right-mountain');
let btn = document.getElementById('btn');
window.addEventListener('scroll', function() {
let value = window.scrollY;
text.style.top = value * -0.5 + '%';
moon.style.top = value * -0.5 + '%';
snow.style.top = value * 1 + 'px';
leftMountain.style.left = value * -0.5 + 'px';
rightMountain.style.left = value * 0.5 + 'px';
btn.style.marginTop = value * 2 + 'px';
})
/* To reset all margin and padding */
* {
margin: 0;
padding: 0;
}
/* Now To remove horizontal scroll bar we have to use box sizing properties */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-family: 'lato', sans-serif;
/* min-height: 100vh; */
background: #fff;
transition: all 0.2s linear;
color: #000;
overflow-x: hidden;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
/* position: relative;
z-index: 1000; */
}
.logo {
font-size: 2rem;
}
header a {
text-decoration: none;
padding: 10px 20px;
position: relative;
z-index: 1000;
}
header a:hover {
color: #ff556e;
}
header a.active {
border: 0.125rem solid #ff556e;
border-radius: 2rem;
color: #ff556e;
}
.hero-section {
/* position: relative; */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
.hero-section h1 {
font: italic bold 4rem lato, sans-serif;
position: absolute;
}
.hero-section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
pointer-events: none;
}
#base {
transform: translateY(200px);
}
.btn {
position: absolute;
display: inline-block;
text-decoration: none;
background: #ff0;
padding: 6px 15px;
border-radius: 20px;
font-size: 1.2rem;
font-weight: bold;
transform: translateY(50px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header id="header">
Chrismas
<nav id="navigation">
Home
Description
Features
Contact Us
</nav>
</header>
<section id="heroSection" class="hero-section">
<img src="https://i.ibb.co/R605wLx/bg.png" alt="bg" id="bg">
<img src="https://i.ibb.co/LZpM2k2/moon.png" alt="moon" id="moon">
<img src="https://i.ibb.co/QnPgdXG/snow.png" alt="snow" id="snow">
<img src="https://i.ibb.co/mGgD2s7/back-mountain.png" alt="back-mountain" id="back-mountain">
<h1 id="text">Merry Chrismas</h1>
<img src="https://i.ibb.co/wCx7SMd/left-mountain.png" alt="left-mountain" id="left-mountain">
<img src="https://i.ibb.co/4YnDZTM/right-mountain.png" alt="right-mountain" id="right-mountain">
Explore
<img src="https://i.ibb.co/3kdcSVZ/base.png" alt="base" id="base">
</section>
</body>
</html>
[JSBIN Demo]
Try modifying to this:
text.style.top = value * -0.2 + '%';
#text {
position: fixed;
top: 0;
}
You can adjust to the speed that you need
I saw this example in w3schools where you set svg line attributes like x1, y1, x2, y2 and a line appears on screen. I am using same method to draw svg line between div elements using javascript and it doesn't seem to work.
I have two circle from which I read there x and y values using boundingClientRect in javascript and setting it on svg line using set attribute. I want line connecting those two circles
Here is my code
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
<!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>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
An svg element has a size, and your line is outside of the that area.
The default setting for an svg is:
svg:not(:root) {
overflow: hidden;
}
so your line won't be visible.
If you add this to your style:
svg {
overflow: visible;
border: 1px solid red;
}
You will see where your svg is located and its dimension, and overflow: visible; makes the line visible:
const circle1 = document.querySelector('.circle--1');
const circle2 = document.querySelector('.circle--2');
const line1 = document.querySelector('#line-1');
line1.setAttribute('x1', circle1.getBoundingClientRect().x);
line1.setAttribute('y1', circle1.getBoundingClientRect().y);
line1.setAttribute('x2', circle2.getBoundingClientRect().x);
line1.setAttribute('y2', circle2.getBoundingClientRect().y);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient(to right, #64b5f6, #1976d2);
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: grey;
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle--2 {
right: 10%;
bottom: 60%;
}
svg {
overflow: visible;
border: 1px solid red;
}
<!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>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle circle--1">1</div>
<div class="circle circle--2">2</div>
<svg>
<line
id="line-1"
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>
</header>
<script src="./script.js"></script>
</body>
</html>
But instead of using overflow: visible; you should change the size and/or positioning of the svg.
It has been two days im trying to solve this and i cant.
I made a customized div that displays images in a kind of a bar that auto-adjusts itself and stays centered.
And i made it work here:
https://codepen.io/SCalmStorm/pen/povwaed
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.imgstyle{
display: inline-block;
width: 40px;
height: auto;
background-position: 50px 50px;
background-size: cover;
border-radius: 50%;
margin-right: 10px;
}
#containerItem{
margin: auto;
Position: relative;
top: 65px;
background: green;
min-width: 10px;
max-width: 700px;
height:50px;
border-radius: 50px;
box-shadow: 0 0 10px 2px;
z-index: 21;
padding: 5px 5px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
}
body {
background-size: cover;
background-color: khaki;
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="styles.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Quantico&display=swap" rel="stylesheet">
<title>Quiz App</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<div class="bg"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<body>
<div id="containerItem">
</div>
</body>
<script>
number = Math.floor(Math.random() * 20) + 1
alert(number)
for (i = 0; i < number; i++) {
var img = document.createElement('img')
document.getElementById('containerItem').appendChild(img);
img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
img.className = "imgstyle";
}
var newDiv = document.createElement('img')
newDiv.id = "containerItem"
</script>
</html>
And that is great. But as i worked on my other script i needed it inserted in another div with the class StandardSlide. But it completely breaks apart :(. And the only thing i understand is that it conflicts with the position:fixed. But when i turn it off, or change it to others it messes up my container. How can i solve this without messing it up? Or without changing the fixed? Why is the fix from this new container affecting the other divs :(, i know it has to do with the relative that inherits the parent style :(:
This one, it no longer adjusts the green bar to the images.
https://codepen.io/SCalmStorm/pen/xxbPqVw
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.imgstyle{
display: inline-block;
width: 40px;
height: auto;
background-position: 50px 50px;
background-size: cover;
border-radius: 50%;
margin-right: 10px;
}
.StandardSlide{
Position: fixed;
top: 10%;
background: rgba(75, 39, 73, 0.7);
left: 15%;
right: 15%;
/*width: 80%;*/
bottom: 5%;
/*background-color: white;*/
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
z-index: 20;
}
#containerItem{
margin: auto;
Position: relative;
top: 65px;
background: green;
min-width: 10px;
max-width: 700px;
height:50px;
border-radius: 50px;
box-shadow: 0 0 10px 2px;
z-index: 21;
padding: 5px 5px;
white-space:nowrap;
overflow-x: auto;
overflow-y: hidden;
}
body {
background-size: cover;
background-color: khaki;
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="styles.css" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Quantico&display=swap" rel="stylesheet">
<title>Quiz App</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<div class="bg"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<body>
<div class="StandardSlide">
<div id="containerItem">
</div>
</div>
</body>
<script>
number = Math.floor(Math.random() * 20) + 1
//alert(number)
for (i = 0; i < number; i++) {
var img = document.createElement('img')
document.getElementById('containerItem').appendChild(img);
img.src = "https://i.pinimg.com/originals/54/a2/c6/54a2c62234d05c174e344b235cbb6f49.jpg";
img.className = "imgstyle";
}
var newDiv = document.createElement('img')
newDiv.id = "containerItem"
</script>
</html>