I made a button in a moving div and put an image for background. I also put an animation for div to make it move. However, the button didn't react. I make another button at the button(which for testing and it don't move), it react. Can anyone please help me to solve this problem?
Here are the codes:
Html
<h1>Animated Aquarium</h1>
<div id="Aquarium">
<div id="box1">
<button type="button" id="button1" onclick="jelly fish()">
<img src="/img/7959f86c-dccb-410e-b928-73a282b866f1/jellyfish.png"id="jellyfish">
</button>
</div>
<button type="button" id="button1" onclick="jellyfish()">test</button>
</div>
Style
body {
background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
height: 100vh;
}
#Aquarium {
width: 700px;
height: 500px;
border: 10px solid #000;
margin: 0 auto;
background-size: cover;
background-repeat: no-repeat;
background-image: url("https://ak4.picdn.net/shutterstock/videos/9874064/thumb/1.jpg");
}
#box1{
animation: jellyfishswim 24s infinite;
position: absolute;
}
#button1{
background-color: inherit;
border:0px;
}
#jellyfish{
width: 100px;
height: 100px;
}
#keyframes jellyfishswim {
0% {
margin-left: 0px;
transform: scaleX(-1);
}
10% {
margin-left: 140px;
margin-bottom: 100px;
transform: scaleX(-1);
}
20% {
margin-left: 280px;
margin-bottom:200px;
transform: scaleX(-1);
}
30% {
margin-left: 420px;
margin-bottom: 300px;
transform: scaleX(-1);
}
40% {
margin-left: 560px;
margin-top: 400px;
transform: scaleX(-1);
}
50% {
margin-left: 600px;
margin-top: 420px;
transform: scaleX(1);}
60% {
margin-left: 500px;
margin-bottom: 340px;
transform: scaleX(1);
}
70% {
margin-left: 420px;
margin-bottom: 300px;
transform: scaleX(1);
}
80% {
margin-left: 280px;
margin-bottom: 200px;
transform: scaleX(1);
}
90% {
margin-left: 120px;
margin-bottom: 150px;
transform: scaleX(1);
}
}
#keyframes giantjellyfishswim {
0% {
margin-left: 0px;
transform: scaleX(-1);
}
10% {
margin-left: 70px;
margin-bottom: 50px;
transform: scaleX(-1);
}
20% {
margin-left: 140px;
margin-bottom:100px;
transform: scaleX(-1);
}
30% {
margin-left: 210px;
margin-bottom: 150px;
transform: scaleX(-1);
}
40% {
margin-left: 280px;
margin-top: 200px;
transform: scaleX(-1);
}
50% {
margin-left: 300px;
margin-top: 210px;
transform: scaleX(1);
}
60% {
margin-left: 250px;
margin-bottom: 170px;
transform: scaleX(1);
}
70% {
margin-left: 210px;
margin-bottom: 150px;
transform: scaleX(1);
}
80% {
margin-left: 140px;
margin-bottom: 100px;
transform: scaleX(1);
}
90% {
margin-left: 70px;
margin-bottom: 50px;
transform: scaleX(1);
}
}
Script
function jellyfish() {
document.getElementById("jellyfish").style.width = "300px";
document.getElementById("box1").style.animation = "giantjellyfishswim 12s infinite";
alert("You distory the aquarium");
}
Change
<button type="button" id="button1" onclick="jelly fish()">
to
<button type="button" id="button1" onclick="jellyfish()">
function jellyfish() {
document.getElementById("jellyfish").style.width = "300px";
document.getElementById("box1").style.animation = "giantjellyfishswim 12s infinite";
alert("You distory the aquarium");
}
body {
background: linear-gradient(to bottom right, #2F80ED, #56CCF2);
height: 100vh;
}
#Aquarium {
width: 700px;
height: 500px;
border: 10px solid #000;
margin: 0 auto;
background-size: cover;
background-repeat: no-repeat;
background-image: url("https://ak4.picdn.net/shutterstock/videos/9874064/thumb/1.jpg");
}
#box1 {
animation: jellyfishswim 24s infinite;
position: absolute;
}
#button1 {
background-color: inherit;
border: 0px;
}
#jellyfish {
width: 100px;
height: 100px;
}
#keyframes jellyfishswim {
0% {
margin-left: 0px;
transform: scaleX(-1);
}
10% {
margin-left: 140px;
margin-bottom: 100px;
transform: scaleX(-1);
}
20% {
margin-left: 280px;
margin-bottom: 200px;
transform: scaleX(-1);
}
30% {
margin-left: 420px;
margin-bottom: 300px;
transform: scaleX(-1);
}
40% {
margin-left: 560px;
margin-top: 400px;
transform: scaleX(-1);
}
50% {
margin-left: 600px;
margin-top: 420px;
transform: scaleX(1);
}
60% {
margin-left: 500px;
margin-bottom: 340px;
transform: scaleX(1);
}
70% {
margin-left: 420px;
margin-bottom: 300px;
transform: scaleX(1);
}
80% {
margin-left: 280px;
margin-bottom: 200px;
transform: scaleX(1);
}
90% {
margin-left: 120px;
margin-bottom: 150px;
transform: scaleX(1);
}
}
#keyframes giantjellyfishswim {
0% {
margin-left: 0px;
transform: scaleX(-1);
}
10% {
margin-left: 70px;
margin-bottom: 50px;
transform: scaleX(-1);
}
20% {
margin-left: 140px;
margin-bottom: 100px;
transform: scaleX(-1);
}
30% {
margin-left: 210px;
margin-bottom: 150px;
transform: scaleX(-1);
}
40% {
margin-left: 280px;
margin-top: 200px;
transform: scaleX(-1);
}
50% {
margin-left: 300px;
margin-top: 210px;
transform: scaleX(1);
}
60% {
margin-left: 250px;
margin-bottom: 170px;
transform: scaleX(1);
}
70% {
margin-left: 210px;
margin-bottom: 150px;
transform: scaleX(1);
}
80% {
margin-left: 140px;
margin-bottom: 100px;
transform: scaleX(1);
}
90% {
margin-left: 70px;
margin-bottom: 50px;
transform: scaleX(1);
}
}
<div id="aquarium">
<div id="box1">
<button type="button" id="button1" onclick="jellyfish()">
<img src="/img/7959f86c-dccb-410e-b928-73a282b866f1/jellyfish.png" id="jellyfish">
</button>
</div>
</div>
Related
I have a loading spinner on a page that shows after a button click for a few seconds.
I tried to add a loading text in the middle of the loading circle but its also spinning. How do I stop the text from spinning? I thought that a span tag is not affected by css transform.
function load() {
document.getElementById("loader").style.display = "block";
setTimeout(function() {
document.getElementById("loader").style.display = "none";
}, 4000);
}
.centered {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #ffffffbb;
border-radius: 50%;
border-top: 16px solid #9c5eb8b6;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
<button type='button' onclick='load()'>Click</button>
<div class="centered">
<div id="loader" style="display:none">
<span class="loading-text">Loading...</span>
</div>
</div>
Instead of having both the spinner and the text in the same element, add another. So we can only spin that one.
I've named it .spinner, next to loading-text:
function load() {
document.getElementById("loader").style.display = "block";
setTimeout(function(){
document.getElementById("loader").style.display = "none"; }, 4000);
}
.centered {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.spinner {
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
border: 16px solid #ffffffbb;
border-radius: 50%;
border-top: 16px solid #9c5eb8b6;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader, .loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
<button type='button' onclick='load()'>Click</button>
<div class="centered">
<div id="loader" style="display:none">
<div class="spinner"></div>
<span class="loading-text">Loading...</span>
</div>
</div>
Or you can use pseudo-element like:
function load() {
document.getElementById("loader").style.display = "block";
}
.centered {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
}
#loader {
position: absolute;
}
#loader:before{
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #ffffffbb;
border-radius: 50%;
border-top: 16px solid #9c5eb8b6;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
<button type='button' onclick='load()'>Click</button>
<div class="centered">
<div id="loader" style="display:none">
<span class="loading-text">Loading...</span>
</div>
</div>
I'm working on a little animation for toggling my website between dark- and light mode. It's a pretty complicated animation, so I'm guessing the solution will be complicated as well.
I basically toggle between classes, but this prevents me from being able to reverse the animation when toggling the button. Been looking for simple solutions around the web, but didn't find any that explains how to reverse the animation with multiple CSS keyframes.
Here's the CSS part of the code which is basically repeated 8 times:
.line {
width: 1rem;
height: 2rem;
background-color: black;
position: absolute;
display: block;
transform: translateY(5rem);
border-radius: 0.5em;
}
.is-dark {
animation: is-dark 2s forwards;
}
#keyframes is-dark {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(0) translateY(5rem);
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(0) translateY(5rem);
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) translateY(0);
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(-1rem);
}
}
JS
let line = document.querySelector(".line");
let btn = document.querySelector(".btn");
btn.addEventListener("click", toggleDarkMode);
function toggleDarkMode() {
line.classList.toggle("is-dark");
}
Here's the complete version of this button: https://jsfiddle.net/a6euokxy/4/
Thanks in advance,
Luk Ramon
I have some the solution for you issue. I improved js file, did add into classes with animation alternate infinite paused; properties. In html added classes with animation.
working example with LocalStorage
let theme = 'light';
// Get all container elements
const lines = document.querySelector('.container').querySelectorAll('div');
let btn = document.querySelector('.btn');
btn.addEventListener('click', toggleDarkMode);
function toggleDarkMode() {
if (theme === 'light') {
lines.forEach(line => {
// Remove unnecessary DOM elements
if (!line.hasAttribute('class')) return;
// Set pause after play 2s animation
setTimeout(() => {
line.removeAttribute('style');
}, 2000);
// Start play
line.setAttribute('style', 'animation-play-state: running');
});
theme = 'dark';
return;
}
if (theme === 'dark') {
lines.forEach(line => {
if (!line.hasAttribute('class')) return;
setTimeout(() => {
line.removeAttribute('style');
}, 2000);
line.setAttribute('style', 'animation-play-state: running');
});
theme = 'light';
return;
}
}
* {
padding: 0;
margin: 0;
}
.button {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.button .btn {
background: none;
border: 0.2rem solid black;
font-size: 1rem;
padding: 1rem;
border-radius: 2rem;
font-weight: bold;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#circle {
width: 4rem;
height: 4rem;
border: 1rem solid black;
border-radius: 50%;
position: absolute;
}
#lines {
display: flex;
justify-content: center;
align-items: center;
}
#lines1 {
transform: rotate(45deg);
transform-origin: center;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.line,
.line1,
.line2,
.line3,
.line4,
.line5,
.line6,
.line7 {
width: 1rem;
height: 2rem;
background-color: black;
position: absolute;
display: block;
border-radius: 0.5em;
}
.line {
transform: translateY(5rem);
}
.is-dark {
animation: is-dark 2s alternate infinite paused;
}
#keyframes is-dark {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(0) translateY(5rem);
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(0) translateY(5rem);
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) translateY(0);
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(-1rem);
}
}
.line1 {
transform: translateY(-5rem);
}
.is-dark1 {
animation: is-dark1 2s alternate infinite paused;
}
#keyframes is-dark1 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateY(-5rem);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateY(-5rem);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
}
.line2 {
transform: translateX(5rem) rotate(90deg);
}
.is-dark2 {
animation: is-dark2 2s alternate infinite paused;
}
#keyframes is-dark2 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
.line3 {
transform: translateX(-5rem) rotate(90deg);
}
.is-dark3 {
animation: is-dark3 2s alternate infinite paused;
}
#keyframes is-dark3 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
.line4 {
transform: translateY(5rem);
}
.is-dark4 {
animation: is-dark4 2s alternate infinite paused;
}
#keyframes is-dark4 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(0) translateY(5rem);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(0) translateY(5rem);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) translateY(0);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(1rem);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(1rem) translateY(1rem);
opacity: 0;
}
}
.line5 {
transform: translateY(-5rem);
}
.is-dark5 {
animation: is-dark5 2s alternate infinite paused;
}
#keyframes is-dark5 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateY(-5rem);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateY(-5rem);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateY(0);
opacity: 0;
}
}
.line6 {
transform: translateX(5rem) rotate(90deg);
}
.is-dark6 {
animation: is-dark6 2s alternate infinite paused;
}
#keyframes is-dark6 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
.line7 {
transform: translateX(-5rem) rotate(90deg);
}
.is-dark7 {
animation: is-dark7 2s alternate infinite paused;
}
#keyframes is-dark7 {
0% {
height: 2rem;
width: 1rem;
border-radius: 0.5em;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
33.33% {
height: 1rem;
width: 1rem;
border-radius: 50%;
transform: translateX(-5rem) rotate(90deg);
opacity: 100%;
}
66.66% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 100%;
}
66.67% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
100% {
height: 3rem;
width: 3rem;
border-radius: 50%;
transform: translateX(0) rotate(90deg);
opacity: 0;
}
}
<div class="button">
<button class="btn">Dark Mode</button>
</div>
<div class="container">
<div id="circle"></div>
<div id="lines">
<div class="line is-dark"></div>
<div class="line1 is-dark1"></div>
<div class="line2 is-dark2"></div>
<div class="line3 is-dark3"></div>
</div>
<div id="lines1">
<div class="line4 is-dark4"></div>
<div class="line5 is-dark5"></div>
<div class="line6 is-dark6"></div>
<div class="line7 is-dark7"></div>
</div>
</div>
I found this flip animation on the internet and I was wondering: How can I change the javascript that instead of hovering over the image will cause the flip, a set time wil? So for instance after 3 seconds, the animation will start.
I am not so good with javascript yet and I am hoping someone can help me out
Thank you very much If you know the solution!
$(document).ready(function() {
$(".container").hover(function() {
$(".card").toggleClass('flipped')
}, function() {
$(".card").toggleClass('flipped')
});
})
h1 {
text-align: center;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Why not do it with CSS?
On hover pseudo class with a transition:
h1 {
text-align: center;
}
.container {
--card-transition-duration: 1s;
--card-transition-delay: 4s;
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
transform-style: preserve-3d;
transform-origin: right center;
}
.container:hover .card {
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.card .back p {
margin: auto;
}
.card .back {
background: blue;
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Or by itself with #keyframes animation:
h1 {
text-align: center;
}
.container {
--card-transition-duration: 1s;
--card-transition-delay: 4s;
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
transform-style: preserve-3d;
transform-origin: right center;
animation-name: flip;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.card .back p {
margin: auto;
}
.card .back {
background: blue;
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
#keyframes flip {
0% {
transform: translateX( 0%) rotateY( 0deg);
}
35% {
transform: translateX( 0%) rotateY( 0deg);
}
65% {
transform: translateX( -100%) rotateY( -180deg);
}
100% {
transform: translateX( -100%) rotateY( -180deg);
}
}
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
First, that's not justjavascript, it's jQuery. If you want the animation to start with a delay using the jquery code, you can add a setTimeout.
And if you use the callback function of the hover method, use add/remove class not toggle.
You could do it in multiple ways, even with just CSS and animations.
$(document).ready(function() {
$(".container").hover(function() {
setTimeout(() => { $(".card").addClass('flipped')},3000)
}, function() {
$(".card").removeClass('flipped')
});
})
h1 {
text-align: center;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Change the ready function to the one below.
$(document).ready(function () {
window.setInterval(function () {
$(".card").toggleClass("flipped");
}, 3000);
});
I have an element whose :before style has to be modified based on calculations.
export class Content extends React.Component {
render() {
return (
<div className="ring-base">
<div className="ring-left" style={{/* Change here */}}></div>
<div className="ring-right" style={{/* Change here */}}></div>
<div className="ring-cover">
<div className="ring-text">10%</div>
</div>
</div>
);
}
}
CSS Code:
.ring-base {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
background: red;
transform: rotate(90deg);
overflow:hidden;
}
.ring-cover {
position: absolute;
height: 180px;
width: 180px;
background: #fff;
border-radius: 50%;
top: 5%;
left: 5%;
}
.ring-cover .ring-text {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
font-size: 2em;
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
transform: rotate(-90deg);
}
.ring-right, .ring-left {
height: 100px;
width: 200px;
overflow: hidden;
position: absolute;
}
.ring-right:before, .ring-left:before {
height: inherit;
width: inherit;
position: absolute;
content: "";
border-radius: 100px 100px 0 0;
background-color: grey;
transform: rotate(0deg);
}
.ring-right {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
transform: rotateZ(0deg);
}
.ring-left {
transform: rotate(180deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ring-right:before {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform: rotate(0deg);
}
.ring-left:before {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
The ask is to be able to update the transform property for .ring-left:before and .ring-right:before via ReactJS.
If there is a way to not update the :before class and change the CSS to not make use of :before at all, then do suggest that as well.
Js-Fiddle
You can iterate document.styleSheets, set .style of .cssRules where .selectorText matches pseudo selector
let sheets = document.styleSheets;
let selector = "div::before";
let replacementContent = '"after"';
for (let sheet of sheets) {
for (let rule of sheet.cssRules) {
if (rule.selectorText === selector) {
rule.style["content"] = replacementContent;
}
}
}
div:before {
content: "before";
color: red;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background: green;
width: 50px;
height: 50px;
display: block;
}
<div></div>
Can you guys tell me how to make the hallo text to centre inside the circle?
The circle is not currently working the way it should in IE8 and Firefox.
Does anyone have any ideas / suggestions that could fix this?
I have provided a fiddle
Here is my code below (It is all in my Fiddle above)
CSS
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}
HTML
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
hallo
</div>
Any help would be great!
To centre your text, use text-align:center for horizontal alignment, and set line-height:300px (with 300px being equal to the element's height) for vertical alignment.
Check this fiddle, I've placed a wrapper div
HTML
<div class="wrapper">
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
</div>
<div class="text">hallo<div>
</div>
CSS
body {
margin: 50px;
}
.wrapper {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.text {
position: absolute;
top:0px;
width: 300px;
height: 300px;
margin: 0 auto;
z-index:10;
text-align:center;
line-height:300px;
}
.spinner {
position: absolute;
width: 300px;
height: 300px;
background: #aaa;
}
.spinner:after {
position: absolute;
content: "";
width: 80%;
height: 80%;
border-radius: 100%;
background: #fff;
top: 10%;
left: 10%;
}
.spinner span em {
background: #0e728e;
-webkit-animation-duration: 3s;
}
/* No need to edit below this line */
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
.spinner {
border-radius: 100%;
position: relative;
}
.spinner span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner span:first-child {
left: 0;
}
.spinner span:last-child {
left: 50%;
}
.spinner span em {
border-radius: 999px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}