I have this code in my index.html file stackblitz example
<html style="height: 100%;" lang="en" class="perfect-scrollbar-off nav-open">
<head>
<style type="text/css">
.loaderDiv {
background: #117CF7;
width: 100%;
height: 100%;
display: flex;
}
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 200px;
height: 200px;
-webkit-animation: spin 2s linear infinite;
/* Safari */
animation: spin 2s linear infinite;
margin: auto;
}
#supersmartLogo {
width: 150px;
height: 150px;
position: absolute;
left: 45%;
top: 38%;
}
.wrapper {
background: url('./random.svg') center no-repeat;
background-size:50%;
margin: auto;
width: 240px;
height: 240px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body style="height: 100%;" class="g-sidenav-show g-sidenav-pinned">
<div id="root" style="height: 100%;">
<div class="loaderDiv">
<div class="wrapper">
<div class="loader"></div>
</div>
</div>
</div>
</body>
</html>
it's working fine but I have some problems:
the random.svg shows only for the first reload and when I move between pages the random.svg does not show.
how can I add a shadow under the spinner like this.
can anyone tell me how to fix it please or a better way to achieve this behavior?
Related
I have a problem that my cards rotate, but each card moves to ~5px (X-axis). How can I rotate them without this movement? (Just like rotate it around itself). I've read many specs and watched many videos. Nothing could help me.
Besides, whenever I click on some cards to return them in a previous state, some of them do it for a second or even a third time.
const cards = document.querySelectorAll(".memory-card")
function flip() {
this.classList.toggle("flip")
}
cards.forEach((c) => c.addEventListener("click", flip))
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
background: linear-gradient(50deg, rgb(198, 193, 188), rgb(153, 145, 137), rgb(109, 101, 94));
background-size: 100%;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
position: fixed;
}
.wrapper {
display: grid;
grid-template: 15vmin/ 20vmin 20vmin 20vmin 20vmin;
justify-content: center;
align-items: center;
padding-top: 8vmin;
margin-left: -2vmin;
perspective: 1000px;
grid-gap: 8vmin 4vmin;
}
/*flip moment*/
.memory-card {
width: calc(25%-10px);
height: calc(14vmin - 2px);
position: relative;
transform: scale(1);
transform-style: preserve-3d;
margin: 2vw;
transition: .5s;
border-radius: 23%;
box-shadow: 1vmin 1vmin 1vmin 2px silver;
transition: transform .5s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.memory-card:active {
transform: scale(0.94);
transition: .05s;
}
.front {
position: absolute;
width: 19vmin;
height: 19vmin;
border-radius: 15px;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.end {
position: absolute;
width: 19vmin;
height: 19vmin;
border-radius: 15px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=U TF-8>
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="index.css">
<title> Memory Game </title>
</head>
<body>
<section class="wrapper">
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1484589065579-248aad0d8b13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=918&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1516339901601-2e1b62dc0c45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=671&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
<div class="memory-card">
<img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="space" class="front">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
</div>
</section>
<script src="index.js"></script>
</body>
</html>
Add transform-origin when your cards flip. This property allows you to change the position of transformed elements. Learn more at w3schools:
.memory-card.flip {
transform: rotateY(180deg);
transform-origin: 85% 50%;
}
I have the following game and the css green block is failing to jump on click. I can't seem to spot my error.
As you can see I have added the onclick event in the HTML and as far as I know the css animation is correctly coded in the style file. I want the character to jump calling the CSS animation, and ideally avoid a JScript function at this stage (or have both alternatives to see which is simpler for young students)
Can anyone spot and point out the error please.
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 4px solid #f74cbc
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 10px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
#keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
#keyframes moveenemy {
0% {
top: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320px;
}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Battle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TG</h1>
<p>Avoid the red</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Update:
I know I could use a Jscript function like the below, but even that does not work?
JavaScript tried below (in the script.js)
function jump(){
if(character.classlist!="animate"){
character.classList.add("animate");
}
setTimeout(function(){
character.classList.remove("animate");
},500);
}
Ideally, as mentioned, I want the simplest possible solution. Could both errors be pointed out (solution provided) so both alternatives are present in the answer. Which is the recommended way?
You could toggle a CSS class with javascript that executes your jump animation. You can't reference a CSS animation directly via JS
// Get your character div
const character = document.getElementById('character');
// Create "jump" animation that you referenced in the "onclick".
function jump() {
// Check if the animation is already started
if(!character.classList.contains('jumping')){
// Add the "jumping" class
character.classList.add('jumping');
// After "500 ms" remove the "jumping" class, duration must match your CSS animation length
setTimeout(function() {
character.classList.remove('jumping');
}, 500);
}
}
* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 4px solid #f74cbc
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 380px;
border-radius: 20px;
}
/* Moved the animation to it's own class so we can toggle it */
#character.jumping {
animation: jump 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 10px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
#keyframes jump {
0% {
top: 380px;
}
30% {
top: 200px;
}
50% {
top: 200px;
}
100% {
top: 380px;
}
}
#keyframes moveenemy {
0% {
top: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320px;
}
}
<!DOCTYPE html>
<html lang="en" onclick="jump()">
<head>
<meta charset="UTF-8">
<title>Battle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TG</h1>
<p>Avoid the red</p>
<div id="game">
<div id="character"></div>
<div id="enemy"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Hello I am making a JS slide show script. The problem I am having is that the slide2 div that I am using to load the second img is not playing nice with the frame. when you click the next slide the new dive is put at the bottom of the frame. I want the new frame to come next to the old image. can you guys help me get this right? ill be around to answer any questions.
$(document).ready(function() {
$('#next_slide').on('click', function(e) {
console.log("next_slide was clicked");
$("#slide1").toggleClass('clicked');
$("#slide2").toggleClass("clicked");
});
});
body {
margin: 0px;
}
#main {
display: flex;
justify-content: center;
}
#slide_show {
background-color: gray;
border: 1px solid black;
width: 50%;
height: 350px;
margin-top: 50px;
display: flex;
}
#slide1 {
width: 100%;
height: 100%;
background-image: url("http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2UzL3RvcDEwdHdpdHRlLmJNMy5wbmcKcAl0aHVtYgkxMjAweDYyNyMKZQlqcGc/a5521f9c/816/top-10-twitter-pics-of-the-week-89ccc74f42.jpg");
}
#slide2 {
width: 0%;
float: right;
height: 100%;
position: fixed;
background-image: url("http://rack.0.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2UzL3RvcDEwdHdpdHRlLmJNMy5wbmcKcAl0aHVtYgkxMjAweDYyNyMKZQlqcGc/a5521f9c/816/top-10-twitter-pics-of-the-week-89ccc74f42.jpg");
}
#slid_container {
width: 100%;
height: 100%;
background-color: gray;
}
#next_slide,
#last_slide {
opacity: .5;
width: 20px;
height: 100%;
background-color: yellow;
}
#slide1.clicked {
transition: width 2s;
width: 0px;
}
#slide2.clicked {
transition: width 2.1s;
width: 100%;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
</head>
<body>
<div id="main">
<div id="slide_show">
<div id="last_slide">
</div>
<div id="slid_container">
<div id="slide1">
</div>
<div id="slide2">
</div>
</div>
<div id="next_slide">
</div>
</div>
</div>
</body>
</html>
It looks like I was able to hack a fix by setting the display mode for the slid_container div to flex and making the transitions both to 2s each. If there is a better way to do this feel free to respond.
This is my first post - anyways - I was referencing this original ask Welcome screen before website loads (Click to enter) [Splash Screen]
After following the instructions of the second answer where I created two seperate divs I need help figuring out how to use javascript to change the visibility of the splash div when/after the user clicks through the splash.
I have a pretty basic understanding of code and not much else but I'm decent at picking up concepts. Here's what I've got so far:
<!Splash html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
padding: 0
}
div#splash {
max-width: 100%;
height: 100%;
background-image: url("brightsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
}
div#post-splash {
display: none;}
</style>
<div id="splash">
</div>
<div id="post-splash"></div>
<h1>Taylor Forrest</h1>
<h2>photography</h2>
<h2>About</h2>
<h2>Portfolio</h2>
<h2>Contact</h2>
</html>
Pure CSS (no javascript) alternative with undercover checkbox:
html {
width: 100%;
height: 100%;
background: lavender;
text-align: center;
font-family: arial, sans-serif;
}
input {
display: none;
}
#target {
opacity: 0;
background-color: rosybrown;
background: url('http://i.imgur.com/P9L9jzT.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
#click:checked ~ label > #target {
opacity: 1;
z-index: 200;
cursor: pointer;
pointer-events: auto;
}
#replay {
color: crimson;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
bottom: 20px;
cursor: pointer;
}
#warning {
color: white;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
}
<input type="checkbox" id="click" checked/>
<label for="click">
<div id=target><h1 id=warning>WELCOME</h1></div>
<span id=replay><small>-replay-</small></span>
</label>
<p>page content</p>
You're code is messy - you're missing tags, missplaced some content etc. I suggest you learn more abouth html and css and use proper IDE with syntax higlighting. Anyway here's the code that will do what you expect. This is still far from perfect.
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
margin: 0;
padding: 0
}
#splash {
max-width: 100%;
height: 100%;
background-image: url("brightsplash.jpg");
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
#post-splash {
display: none;
}
</style>
</head>
<body>
<div id="splash">
</div>
<div id="post-splash">
<h1>Taylor Forrest</h1>
<h2>photography</h2>
<h2>About</h2>
<h2>Portfolio</h2>
<h2>Contact</h2>
</div>
<script>
(function() {
var splash = document.getElementById('splash'),
postSplash = document.getElementById('post-splash');
splash.addEventListener('click', function() {
splash.style.display = "none";
postSplash.style.display = "block";
});
})();
</script>
</body>
</html>
Below is the code -
.startanimation {
height: 100px;
width: 100px;
background: yellow;
-webkit-animation: animate 1s infinite;
}
#-webkit-keyframes animate {
100% {
width: 300px;
height: 300px;
}
}
In the HTML when an element is given a class "startanimation", the animation works. But when the same class is added to another element using "addClass" method, the anmition does not work. Any ideas?
demo - http://jsfiddle.net/d3md7597/1/
$('#start').on('click', function() {
$('#x').addClass('startanimation')
})
$('#stop').on('click', function() {
$('#x').removeClass('startanimation')
})
#x {
background: pink;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
left: 300px;
top: 200px;
}
.startanimation {
height: 100px;
width: 100px;
background: yellow;
-webkit-animation: animate 1s infinite;
}
#-webkit-keyframes animate {
100% {
width: 300px;
height: 300px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="start">Start</button>
<button id="stop">Stop</button>
<br>
<br>
<div id="x"></div>