I know this question can be answered in many ways but I need someone to do this for me. I want my animation to do its thing and then a random number pops up? Right now I have 2 functions in one click (I need that). I'm new to this and a simple formula would be great! Can anyone help, if you can it would be appreciated! Thank you!
THIS IS ALL THE CODE!
startbtn = function() {
$('.wheel').addClass('animated-wheel');
setTimeout(setRandom('random') {}, 6000);
}
function getRandom() {
var values = [1, 15, 30, 45];
return values[Math.floor(Math.random() * values.length)];
}
function setRandom(id) {
document.getElementById(id).innerHTML = getRandom();
}
function refresh() {
location.reload();
};
.number {
text-align: center;
color: white;
font-size: 78px;
}
.wheel {
width: 200px;
height: 100px;
left: 600px;
top: 300px;
background: green;
position: relative;
}
.animated-wheel {
-webkit-animation: myfirst4s 2;
-webkit-animation-direction: alternate;
animation: myfirst 4s 2;
animation-direction: alternate;
}
#-webkit-keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: black;
left: 600px;
top: 0px;
}
66% {
background: red;
left: 600px;
top: 650px;
}
100% {
background: black;
left: 600px;
top: 0px;
}
}
#keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: green;
left: 600px;
top: 300px;
}
66% {
background: black;
left: 600px;
top: 0px;
}
100% {
background: red;
left: 600px;
top: 650px;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!DOCTYPE html>
<html>
<head></head>
<title>The Wheel!</title>
<body bgcolor="orange">
<head>
</head>
<div class="wheel">
<h1 class="number" id="random"></h1>
</div>
<button onclick="startbtn();setRandom('random');">Start</button>
<button onclick="refresh()">Reset</button>
</body>
</html>
You had a syntax error in your setTimeout():
startbtn = function() {
$('.wheel').addClass('animated-wheel');
setTimeout(function() {
// Remove animation class
setRandom('random');
$('.wheel').removeClass('animated-wheel');
}, 6750);
}
function getRandom() {
var values = [1, 15, 30, 45];
return values[Math.floor(Math.random() * values.length)];
}
function setRandom(id) {
document.getElementById(id).innerText = getRandom();
}
function refresh() {
location.reload();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head></head>
<title>The Wheel!</title>
<body bgcolor="orange">
<head>
<style>
.number {
text-align: center;
color: white;
font-size: 78px;
}
.wheel {
width: 200px;
height: 100px;
left: 600px;
top: 300px;
background: green;
position: relative;
}
.animated-wheel {
-webkit-animation: myfirst4s 2;
-webkit-animation-direction: alternate;
animation: myfirst 4s 2;
animation-direction: alternate;
}
#-webkit-keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: black;
left: 600px;
top: 0px;
}
66% {
background: red;
left: 600px;
top: 650px;
}
100% {
background: black;
left: 600px;
top: 0px;
}
}
#keyframes myfirst {
0% {
background: green;
left: 600px;
top: 300px;
}
33% {
background: green;
left: 600px;
top: 300px;
}
66% {
background: black;
left: 600px;
top: 0px;
}
100% {
background: red;
left: 600px;
top: 650px;
}
}
</style>
</head>
<div class="wheel">
<h1 class="number" id="random"></h1>
</div>
<button onclick="startbtn();">Start</button>
<button onclick="refresh()">Reset</button>
</body>
</html>
Hope this helps,
There are tons of more elegant way but here is correction of your error:
setTimeout(function(){
setRandom('random')
}, 6000);
Related
So I made this site using css, javascript and html. On my local system, the internal css that i've added to my html file loads perfectly. But when i deploy it online (I use netlify) that internal css seems not loaded and I cant see any content.
I even tried to remove that internal css and make another file and link to my html document, still no signs of work. It is now too brainstorming to me, as i am not able to find any solutions.
I am sharing the links of the file if anyone of you would like to help me, please?
gsap.to('#moon',{
scrollTrigger:{
scrub: 1
},
scale: 1.5,
})
gsap.to('#bg',{
scrollTrigger:{
scrub: 1
},
scale: 1.2,
})
gsap.to('#santa',{
scrollTrigger:{
scrub: 1
},
scale: 1.5,
y: -500,
x: 2400
})
gsap.to('#tree',{
scrollTrigger:{
scrub: 1
},
x: -250
})
gsap.to('#cloud1',{
scrollTrigger:{
scrub: 1
},
x: -150
})
gsap.to('#cloud2',{
scrollTrigger:{
scrub: 1
},
x: 200
})
gsap.to('#text1',{
scrollTrigger:{
scrub: 1
},
y: -950
})
gsap.to('#text2',{
scrollTrigger:{
scrub: 1
},
y: -950
})
#import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Frijole';
font-weight: 200;
}
body{
/* background: rgb(97, 0, 0); */
height: 200vh;
}
section{
position: fixed;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0, 10, 68);
mix-blend-mode: screen;
}
section img#bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section img#cloud1{
position: absolute;
top: 100px;
left: 50px;
max-width: 600px;
z-index: 2;
}
section img#cloud2{
position: absolute;
top: 200px;
right: 50px;
max-width: 600px;
z-index: 2;
}
section img#santa{
position: absolute;
bottom: 50px;
left: -600px;
z-index: 1;
max-width: 600px;
transform: scale(0.5);
}
section #tree{
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 266px;
background: url(../images/tree.png);
background-position-y: 266px;
z-index: 10;
}
section #text1{
position: absolute;
bottom: -500;
left: 0;
width: 100%;
text-align: center;
color: #fff;
text-shadow: 2px 2px 12px #000;
font-size: 5.5em;
z-index: 9;
}
section #text2{
position: absolute;
bottom: -600;
left: 0;
width: 100%;
text-align: center;
font-family: 'Balsamiq Sans', sans-serif;
transition: .093s;
color: #fff;
text-shadow: 2px 2px 12px #000;
font-size: 2em;
z-index: 9;
}
<html>
<head>
<title>Merry Christmas</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Balsamiq Sans' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Frijole' rel='stylesheet'>
<link rel="icon" href="images/favicon.png" type="image/png" size="32x32">
<link rel="stylesheet" type="text/css" href="css/snow.css">
<style>
.snow, .winter-is-coming {
z-index: 100;
pointer-events: none;
}
.winter-is-coming {
overflow: hidden;
position: absolute;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
background: url(../images/bg.jpg);
}
.snow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: falling linear infinite both;
transform: translate3D(0, -100%, 0);
}
.snow--near {
animation-duration: 10s;
background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
background-size: contain;
}
.snow--near + .snow--alt {
animation-delay: 5s;
}
.snow--mid {
animation-duration: 20s;
background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png");
background-size: contain;
}
.snow--mid + .snow--alt {
animation-delay: 10s;
}
.snow--far {
animation-duration: 30s;
background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png");
background-size: contain;
}
.snow--far + .snow--alt {
animation-delay: 15s;
}
#keyframes falling {
0% {
transform: translate3D(-7.5%, -100%, 0);
}
100% {
transform: translate3D(7.5%, 100%, 0);
}
}
</style>
</head>
<body>
<section>
<div class="winter-is-coming">
<div class="snow snow--near"></div>
<div class="snow snow--near snow--alt"></div>
<div class="snow snow--mid"></div>
<div class="snow snow--mid snow--alt"></div>
<div class="snow snow--far"></div>
<div class="snow snow--far snow--alt"></div>
</div>
<img src="images/bg.jpg" id="bg">
<img src="images/moon.png" id="moon">
<img src="images/cloud1.png" id="cloud1">
<img src="images/cloud2.png" id="cloud2">
<img src="images/santa.png" id="santa">
<div id="tree"></div>
<h2 id="text1">Merry Christmas!</h2><br>
<h4 id="text2">And a very happy new year from us! Enjoy Holidays!!</h4>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>
You have a class .winter-is-coming with CSS z-index:100;. Change it to z-index:1; then everthing should be fine now.
I am trying to complete a wave animation that has the animation, fills the screen to a certain point and stops on the first click on a navigation menu. I have tried making it play the animation back in reverse when you click the navigation menu again, but it will not work. Does anyone know if this is possible with Java/ JQuery, and if so how do you do it? Currently all it does is a harsh clip back to the previous state, and I don't like how harshly it clips.
$(document).ready(function() {
$('.hb_menu').click(function() {
$('.line_1').toggleClass("rotate_1");
$('.line_2').toggleClass("rotate_2");
$('.line_3').toggleClass("rotate_2");
$('.hidden_svg').toggleClass("show_svg");
$('.circ').toggleClass("rotate_circ");
});
});
body {
font-family: 'Raleway', Arial, Verdana, sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: white;
}
.main_hd_cont {
position: absolute;
top: -1.25vw;
left: 1.5vw;
z-index: 4;
color: white;
}
.main_hd_txt {
font-size: 3.5vw;
font-family: 'ballet_harmonyballet_harmony';
}
.navigation_svg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-width: 100vw;
width: 100vw;
}
.visible_svg {
filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}
.hidden_svg {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 1s;
z-index: 2;
filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6));
}
.show_svg {
opacity: 1;
}
.hb_menu {
max-width: 2vw;
width: 2vw;
max-height: 1.75vw;
height: 1.75vw;
position: absolute;
right: 1.5vw;
top: 1.5vw;
z-index: 4;
}
.line_1,
.line_2,
.line_3 {
max-width: 2vw;
width: 2vw;
max-height: .25vw;
height: .25vw;
background-color: #fff;
position: absolute;
right: 0;
z-index: 2;
top: 0vw;
transition: .5s all;
margin-bottom: .25vw;
}
.line_2 {
top: .5vw;
}
.line_3 {
top: 1vw;
}
.rotate_1 {
transform: rotate(45deg);
}
.rotate_2 {
transform: rotate(-45deg);
top: 0vw;
}
.main_nav_cont {
max-width: 50vw;
width: 50vw;
max-height: 50vw;
height: 50vw;
position;
absolute;
top: 25vw;
left: 25vw;
font-size: 1.75vw;
z-index: 4;
}
.circ {
position: absolute;
top: -41vw;
max-width: 45vw;
width: 45vw;
max-height: 48vw;
height: 48vw;
background-color: #8C572B;
border-radius: 14.6675vw;
}
.rotating_circle_1 {
left: -10vw;
}
.rotating_circle_2 {
left: 10vw;
}
.rotating_circle_3 {
left: 30vw;
}
.rotating_circle_4 {
left: 50vw;
}
.rotating_circle_5 {
left: 70vw;
}
.rotate_circ {
animation: wave 15s 1 ease-in-out;
animation-fill-mode: forwards;
}
#keyframes wave {
from {
transform: rotate(360deg);
max-height: 48vw;
height: 48vw;
}
to {
transform: rotate(-360deg);
max-height: 80vw;
height: 80vw;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Code Cafe | Home </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="../JavaScript/main.js"></script>
<style>
#font-face {
font-family: 'ballet_harmonyballet_harmony';
src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<section class="main_hd_cont">
<header class="main_hd">
<h1 class="main_hd_txt">Hello World</h1>
</header>
</section>
</nav>
</section>
<section class="hb_menu">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
</section>
<div class="rotating_circle_1 circ"></div>
<div class="rotating_circle_2 circ"></div>
<div class="rotating_circle_3 circ"></div>
<div class="rotating_circle_4 circ"></div>
<div class="rotating_circle_5 circ"></div>
</body>
</html>
The last line in the JS portion of your code adds a clicked class to the .circ element. Once that class is on, the second click on your hamburger menu icon will trigger new unwave animation I made by just reversing the to and from values of the original wave animation.
$(document).ready(function() {
$('.hb_menu').click(function() {
$('.line_1').toggleClass("rotate_1");
$('.line_2').toggleClass("rotate_2");
$('.line_3').toggleClass("rotate_2");
$('.hidden_svg').toggleClass("show_svg");
$('.circ').toggleClass("rotate_circ");
$(".circ").addClass("clicked"); // adds "clicked" after the very first click
});
});
body {
font-family: 'Raleway', Arial, Verdana, sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: white;
}
.main_hd_cont {
position: absolute;
top: -1.25vw;
left: 1.5vw;
z-index: 4;
color: white;
}
.main_hd_txt {
font-size: 3.5vw;
font-family: 'ballet_harmonyballet_harmony';
}
.navigation_svg {
position: absolute;
top: 0;
left: 0;
z-index: 1;
max-width: 100vw;
width: 100vw;
}
.visible_svg {
filter: drop-shadow(.5vw .5vw .15vw rgb(0, 0, 0, 0.6));
}
.hidden_svg {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 1s;
z-index: 2;
filter: drop-shadow(-.25vw .25vw .15vw rgb(0, 0, 0, 0.6));
}
.show_svg {
opacity: 1;
}
.hb_menu {
max-width: 2vw;
width: 2vw;
max-height: 1.75vw;
height: 1.75vw;
position: absolute;
right: 1.5vw;
top: 1.5vw;
z-index: 4;
}
.line_1,
.line_2,
.line_3 {
max-width: 2vw;
width: 2vw;
max-height: .25vw;
height: .25vw;
background-color: #fff;
position: absolute;
right: 0;
z-index: 2;
top: 0vw;
transition: .5s all;
margin-bottom: .25vw;
}
.line_2 {
top: .5vw;
}
.line_3 {
top: 1vw;
}
.rotate_1 {
transform: rotate(45deg);
}
.rotate_2 {
transform: rotate(-45deg);
top: 0vw;
}
.main_nav_cont {
max-width: 50vw;
width: 50vw;
max-height: 50vw;
height: 50vw;
position;
absolute;
top: 25vw;
left: 25vw;
font-size: 1.75vw;
z-index: 4;
}
.circ {
position: absolute;
top: -41vw;
max-width: 45vw;
width: 45vw;
max-height: 48vw;
height: 48vw;
background-color: #8C572B;
border-radius: 14.6675vw;
}
.rotating_circle_1 {
left: -10vw;
}
.rotating_circle_2 {
left: 10vw;
}
.rotating_circle_3 {
left: 30vw;
}
.rotating_circle_4 {
left: 50vw;
}
.rotating_circle_5 {
left: 70vw;
}
.rotate_circ {
animation: wave 15s 1 ease-in-out;
animation-fill-mode: forwards;
}
/* this new rule only applies after you have clicked once AND the wave animation has already been triggered */
.circ.clicked:not(.rotate_circ) {
animation: unwave 15s 1 ease-in-out;
animation-fill-mode: forwards;
}
#keyframes wave {
from {
transform: rotate(360deg);
max-height: 48vw;
height: 48vw;
}
to {
transform: rotate(-360deg);
max-height: 80vw;
height: 80vw;
}
}
#keyframes unwave {
from {
transform: rotate(-360deg);
max-height: 80vw;
height: 80vw;
}
to {
transform: rotate(360deg);
max-height: 48vw;
height: 48vw;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Code Cafe | Home </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script src="../JavaScript/main.js"></script>
<style>
#font-face {
font-family: 'ballet_harmonyballet_harmony';
src: url('ballet_harmony-webfont.woff2') format('woff2'), url('ballet_harmony-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<section class="main_hd_cont">
<header class="main_hd">
<h1 class="main_hd_txt">Hello World</h1>
</header>
</section>
</nav>
</section>
<section class="hb_menu">
<div class="line_1"></div>
<div class="line_2"></div>
<div class="line_3"></div>
</section>
<div class="rotating_circle_1 circ"></div>
<div class="rotating_circle_2 circ"></div>
<div class="rotating_circle_3 circ"></div>
<div class="rotating_circle_4 circ"></div>
<div class="rotating_circle_5 circ"></div>
</body>
</html>
I want to know how can I change my background on Id load. Right now the background is set to a colour for the preloader. I have figured out how I can hide the loader on body load but someone help me on how to change my background to a picture. Also eve when the loader is present the elements of the body popup so any solution to hide that? The background link is in the background 1 id.
https://www.w3schools.com/code/tryit.asp?filename=FEMJ1DP31QMZ
function hidespinner() {
document.getElementById('spinner').style.display = 'none';
document.getElementById('heading').style.display = 'none';
document.getElementById('background1').style.display.backgroundImage = 'url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg)';
}
html {
background-color: #ace5f4;
background-size: cover;
}
#spinner {
height: 50px;
width: 50px;
left: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
}
#spinner .inner {
height: 50px;
width: 50px;
position: absolute;
border: 5px solid transparent;
opacity: 0.7;
border-radius: 100%;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
#spinner .inner:nth-child(1) {
border-top-color: white;
border-bottom-color: white;
animation-duration: 2s;
}
#spinner .inner:nth-child(2) {
border-left-color: #3bb3ee;
border-right-color: #3bb3ee;
animation-duration: 3s;
}
#spinner .inner:nth-child(3) {
border-top-color: #34abdb;
border-bottom-color: #34abdb;
animation-duration: 4s;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
#heading {
color: white;
font-family: Helvetica;
text-align: center;
font-size: 72px;
}
#background1 {
background: url(https://s28.postimg.org/rbexyjiil/IFBAKGROUND1.jpg) no-repeat center fixed;
background-size: cover;
}
<link rel="shortcut icon" type="image/png" href="https://image.flaticon.com/icons/png/128/222/222506.png">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Fonts Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<body onload="hidespinner()">
<h1 id="heading"><i class="fa fa-plane"></i> v<strong>Crew</strong></h1>
<div id="spinner">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
Hello Is the spinner on?
</body>
Please see that even the current code is copyrighted. I would also like to add this loader which I made to the page so can anyone suggest something on how to add it or add it to the webpage and give me the code.
https://www.w3schools.com/code/tryit.asp?filename=FEAZZM840UQS
function hideloader() {
document.getElementById("loading").style.display = "none";
}
#import url('https://fonts.googleapis.com/css?family=Spirax');
#import url('https://fonts.googleapis.com/css?family=Indie+Flower|Spirax');
body {
background-color: #58e8f8;
}
.silly {
color: white;
text-align: center;
font-family: "Indie Flower"
}
.spinner {
width: 80px;
height: 80px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: white;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -2.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
#keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
<title>Page Title</title>
<script type="text/javascript" src="https://gc.kis.v2.scr.kaspersky-labs.com/88CE1C4C-84C0-9E49-A763-9D3DCEC43907/main.js" charset="UTF-8"></script>
<body onload="hideloader">
<h1 class="silly"> vCrew </h1>
<div id="loading" class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</body>
Would this work w3schools.com/code/tryit.asp?filename=FEMJIZCDHJBW ?
You can try adding a loading div on top of your content and hide/show the loading sequence until your data is present.
onReady(function() {
toggleClass(document.getElementById('page'), 'hidden');
toggleClass(document.getElementById('loading'), 'hidden');
});
function onReady(callback) {
var intervalID = window.setInterval(function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}, 1000);
}
// http://youmightnotneedjquery.com/
function toggleClass(el, className) {
if (el.classList) el.classList.toggle(className);
else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
}
body {
background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
font-family: "Brush Script MT", cursive;
}
h1 {
font-size: 2em;
margin-bottom: 0.2em;
padding-bottom: 0;
}
p {
font-size: 1.5em;
margin-top: 0;
padding-top: 0;
}
#loading {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.9);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
.hidden {
display: none !important;
}
<script src="https://rawgit.com/bgrins/loremjs/master/lorem.js"></script>
<div id="page" class="hidden">
<h1>The standard Lorem Ipsum passage</h1>
<div class="content" data-lorem="7s"></div>
</div>
<div id="loading"></div>
I'm currently trying to make a website that displays markers with its own specific text.
When a user clicks on the marker, it displays the text.
I've copied some code online and trying to mess around with it. Unfortunately, I'm not too experience with javascript. I was wondering if anyone would be able to help.
This is what I have so far:
HTML (I don't think there's any problems here):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MarkerWeb</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="container">
<div id="image-wrapper" data-captions='{"coords": [{"top":250,"left":200,"text":"iMac 1"},{"top":250,"left":540,"text":"iMac 2"}]}'>
<!-- layout.jpg is just a picture of a layout/floorplan -->
<img src="layout.jpg" alt=""/>
</div>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
Javascript (The part I'm having a hard time with):
var Markers = {
fn: {
addMarkers: function() {
var target = $('#image-wrapper');
var data = target.attr('data-captions');
var captions = $.parseJSON(data);
var coords = captions.coords;
for (var i = 0; i < coords.length; i++) {
var obj = coords[i];
var top = obj.top;
var left = obj.left;
var text = obj.text;
$('<div class="marker"><div class="pin"><span class="popuptext" id="myPopup">' + text + '</span></div><div class="pin-effect"></div></div>').css({
top: top,
left: left
}).appendTo(target);
}
},
//This is the part I'm having trouble with.
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this),
$caption = $('popuptext', $marker);
if ($caption.is(':hidden')) {
$caption.show();
} else {
$caption.toggle("show");
}
});
}
},
init: function() {
this.fn.addMarkers();
this.fn.showBeaconInfo();
}
};
function clickBeacon() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
$(function() {
Markers.init();
});
CSS (I don't think there's any problems here):
body {
background: #e6e6e6;
}
#image-wrapper {
width: 800px;
height: 760px;
position: relative;
margin: 2em auto;
background: #f6f6f6;
border: 2px solid #ddd;
}
#image-wrapper img {
display: block;
margin: 25px auto;
}
.map-bg {
background: url(images/map-bg.jpg) no-repeat;
background-position: 0px 0px;
background-size: auto;
width: 100%;
height: 440px; /*adjust to the height of your image*/
position: relative;
}
.marker {
width: 100px;
height: 100px;
position: absolute;
/*top: 130px; /*positions our marker*/
/*left: 200px; /*positions our marker*/
display: block;
}
.pin {
width: 20px;
height: 20px;
position: relative;
top: 38px;
left: 38px;
background: rgba(5, 124, 255, 1);
border: 2px solid #FFF;
border-radius: 50%;
z-index: 1000;
cursor: pointer;
display: inline-block;
}
.pin-effect {
width: 100px;
height: 100px;
position: absolute;
top: 0;
display: block;
background: rgba(5, 124, 255, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 2400ms ease-out infinite;
}
#keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
/* The actual popup (appears on top) */
.pin .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.pin .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.pin .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
You need to update your showBeaconInfo function in 2 ways:
1) Fix the selector for $caption to grab the class popuptext by adding a period
2) Using the jquery function toggleClass to add or remove the class "show" on the popuptext, the css is setup to either use visibility: hidden or visibility: visible
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this);
var $caption = $('.popuptext', $marker); //needs period to indicate class
$caption.toggleClass('show'); //adding the class "show" will display the text
});
}
For Example:
var Markers = {
fn: {
addMarkers: function() {
var target = $('#image-wrapper');
var data = target.attr('data-captions');
var captions = $.parseJSON(data);
var coords = captions.coords;
for (var i = 0; i < coords.length; i++) {
var obj = coords[i];
var top = obj.top;
var left = obj.left;
var text = obj.text;
$('<div class="marker"><div class="pin"><span class="popuptext" id="myPopup">' + text + '</span></div><div class="pin-effect"></div></div>').css({
top: top,
left: left
}).appendTo(target);
}
},
//This is the part I'm having trouble with.
showBeaconInfo: function() {
$('body').on('click', '.marker', function() {
var $marker = $(this);
var $caption = $('.popuptext', $marker); //needs period to indicate class
$caption.toggleClass('show'); //adding the class "show" will display the text
});
}
},
init: function() {
this.fn.addMarkers();
this.fn.showBeaconInfo();
}
};
function clickBeacon() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
$(function() {
Markers.init();
});
body {
background: #e6e6e6;
}
#image-wrapper {
width: 800px;
height: 760px;
position: relative;
margin: 2em auto;
background: #f6f6f6;
border: 2px solid #ddd;
}
#image-wrapper img {
display: block;
margin: 25px auto;
}
.map-bg {
background: url(images/map-bg.jpg) no-repeat;
background-position: 0px 0px;
background-size: auto;
width: 100%;
height: 440px;
/*adjust to the height of your image*/
position: relative;
}
.marker {
width: 100px;
height: 100px;
position: absolute;
/*top: 130px; /*positions our marker*/
/*left: 200px; /*positions our marker*/
display: block;
}
.pin {
width: 20px;
height: 20px;
position: relative;
top: 38px;
left: 38px;
background: rgba(5, 124, 255, 1);
border: 2px solid #FFF;
border-radius: 50%;
z-index: 1000;
cursor: pointer;
display: inline-block;
}
.pin-effect {
width: 100px;
height: 100px;
position: absolute;
top: 0;
display: block;
background: rgba(5, 124, 255, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 2400ms ease-out infinite;
}
#keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
/* The actual popup (appears on top) */
.pin .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.pin .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.pin .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="image-wrapper" data-captions='{"coords": [{"top":250,"left":200,"text":"iMac 1"},{"top":250,"left":540,"text":"iMac 2"}]}'>
<!-- layout.jpg is just a picture of a layout/floorplan -->
<img src="layout.jpg" alt="" />
</div>
</div>
I have this sprite sheet http://codepen.io/benasl/pen/yabpxo that I want to be changed to another one after it ends, and after the second one ends the first one needs to start again, and so on... I managed to do this with just changing css properties, but now how do I make them loop?
setTimeout(function() {
$(".kambarys2").css('display', 'block');
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
#keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
.kambarys2 {
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
position: absolute;
display: inline-block;
width: 380px;
height: 372px;
top: 108px;
left: 40%;
animation: convejor 3s steps(76) infinite;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>
<div class="kambarys2"></div>
change the background image using an array:
var cnt=0,images=["http://i.imgur.com/TFvZvWz.jpg","http://i.imgur.com/pra08AS.jpg"]
setInterval(function() {
$(".kambarys").css({"background-image":"url("+images[cnt]+")"});
cnt++;
if (cnt>=images.length) cnt=0;
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
#keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys"></div>
Toggle two divs
var cnt=0;
setInterval(function() {
$(".kambarys0").toggle(cnt);
$(".kambarys1").toggle(!cnt); cnt=!cnt
}, 3100);
body {
background-color: #69e4c3;
}
.kambarys0 {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
.kambarys1 {
display:none;
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
position: relative;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
#keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys0"></div>
<div class="kambarys1"></div>
Loop more than two divs
var cnt = 0;
setInterval(function() {
cnt++;
if (cnt >= $(".kambarys").length) cnt = 0;
$(".kambarys").hide();
$("#kambarys" + cnt).show();
},
3100);
body {
background-color: #69e4c3;
}
.kambarys {
position: relative;
display: inline-block;
width: 380px;
height: 372px;
top: 100px;
left: 40%;
animation: convejor 3s steps(76) infinite;
}
#kambarys0 {
background: url('http://i.imgur.com/pra08AS.jpg');
background-repeat: no-repeat;
}
#kambarys1 {
display: none;
background: url('http://i.imgur.com/TFvZvWz.jpg');
background-repeat: no-repeat;
}
#kambarys2 {
display: none;
background: url('http://i.imgur.com/F6bNA00.jpg');
background-repeat: no-repeat;
}
#keyframes convejor {
from {
background-position: 0px;
}
to {
background-position: -28880px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="kambarys" id="kambarys0"></div>
<div class="kambarys" id="kambarys1"></div>
<div class="kambarys" id="kambarys2"></div>
One answer would be that you have a function for this and this function would restart itself every X seconds.
Example:
function startcounter() {
$( "#foo" ).append( "<p>Test</p>" ); // do what you want
setTimeout(startcounter, 3*1000); // 3*1000 = 3 Seconds.
}
setTimeout(startcounter, 3*1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"><p>This is the div where the JS add every 3 Seconds a "Test".</p></div>