Animate the tuck with the road - javascript

I am trying to animate the truck over road on the image. I have made the snipped for it below. all of images are on svg file. But i am not sure how to animate the tuck within the road. how can i animate the truck so that it goes within the road ?
.page-header {
background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
height: 800px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
width: 790px;
}
.truck-1 {
width: 100px;
position: absolute;
top: 57%;
left: 29%;
width: 80px;
}
.truck-2 {
width: 100px;
position: absolute;
top: 76%;
left: 62%;
transform: rotate(32deg);
width: 80px;
}
<div class="page-header">
<img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
<img class="truck-2" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>

What you need to examine is CSS Animations. After that, you can go with something like this:
.page-header {
position: relative;
background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
height: 800px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
width: 790px;
}
.truck-1 {
width: 100px;
position: absolute;
top: 57%;
left: 29%;
width: 80px;
animation: truck1 5s infinite;
}
#keyframes truck1 {
0% {
top: 57%;
left: 29%;
transform: rotate(0);
}
20% {
top: 68%;
left: 20%;
transform: rotate(0);
}
40% {
top: 68%;
left: 20%;
transform: rotate(90deg);
}
60% {
top: 30%;
left: 5%;
transform: rotate(90deg);
}
80% {
top: 30%;
left: 5%;
transform: rotate(120deg);
}
100% {
top: 10%;
left: 5.5%;
transform: rotate(120deg);
}
}
<div class="page-header">
<img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>
Also on JSFiddle.
Please note, in order to work with absolute positioning and percents, the parent element has to be position: relative;, or any other than static.

Did you need it?
.page-header {
animation: trucks 10s infinite;
background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
height: 800px;
background-size: 100%;
background-position: center;
width: 790px;
}
.truck-1 {
width: 100px;
position: absolute;
top: 57%;
left: 29%;
width: 80px;
}
.truck-2 {
width: 100px;
position: absolute;
top: 76%;
left: 62%;
transform: rotate(32deg);
width: 80px;
}
#keyframes trucks {
0% {background-position: 0 0; }
100% {background-position: 0 -2100px; }
}
<div class="page-header">
<img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
<img class="truck-2" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>

Related

HTML 3D rotating around object animation fixing

This circular ring should be rotating around the hoodie guy. But for now, it is rotating in front of the hoodie guy. And here is the video preview for reference.
.body-part-2 {
position: relative;
}
.background-circle {
background: #28292d;
border-radius: 50%;
width: 550px;
height: 550px;
z-index: 9;
}
.hoodie-guy {
position: absolute;
background: url(assets/Hoodie-guy.png);
top: 100px;
height: 550px;
width: 550px;
background-size: cover;
}
.circle {
position: relative;
top: 400px;
left: 220px;
width: 100px;
height: 100px;
transform-style: preserve-3d;
animation: animateCircle 40s linear infinite;
}
#keyframes animateCircle
{
0%
{
transform: perspective(1000px) rotateY(0deg) rotateX(15deg) translateY(-30px);
}
100%
{
transform: perspective(1000px) rotateY(360deg) rotateX(15deg) translateY(-30px);
}
}
.circle span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #2d2e32;
box-shadow: 0px 0px 5px #00000080;
border-radius: 50%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i) * calc(360deg / 11))) translateZ(300px);
}
.circle span img {
position: relative;
top: 12px;
left: 12px;
object-fit: cover;
}
<div class="body-part-2">
<div class="hoodie-guy-animation-class">
<div class="hoodie-guy"></div>
<div class="circle">
<span style="--i:1;"><img src="assets/flutter.png" height="75px"></span>
<span style="--i:2;"><img src="assets/python.png" height="75px"></span>
<span style="--i:3;"><img src="assets/photoshop.png" height="75px"></span>
<span style="--i:4;"><img src="assets/django.png" height="75px"></span>
<span style="--i:5;"><img src="assets/premiere_pro.png" height="75px"></span>
<span style="--i:6;"><img src="assets/html.png" height="70px"></span>
<span style="--i:7;"><img src="assets/figma.png" height="75px"></span>
<span style="--i:8;"><img src="assets/css.png" height="70px"></span>
<span style="--i:9;"><img src="assets/javascript.png" height="75px"></span>
<span style="--i:10;"><img src="assets/illustrator.png" height="75px"></span>
<span style="--i:11;"><img src="assets/dart.png" height="75px"></span>
</div>
</div>
<div class="background-circle"></div>
</div>

How to stop the circular progress at certain level?

I'm using a code snippet from a website for a circular progress bar, but now I am stuck. I can't solve how to stop progress bar at particular point (let's say 73% or 90%). How can I achieve that?
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(() => {
if (counter == 100) {
clearInterval();
} else {
counter += 1;
numb.textContent = counter + "%";
}
}, 80);
.circular {
height: 150px;
width: 150px;
position: relative;
}
.circular .inner,
.circular .outer,
.circular .circle {
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .inner {
top: 36%;
left: 37%;
height: 117px;
width: 117px;
margin: -40px 0 0 -40px;
background-color: #ffffff;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.circular .circle {
z-index: 1;
box-shadow: none;
}
.circular .numb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar {
position: absolute;
height: 100%;
width: 100%;
background: #F2F5F5;
-webkit-border-radius: 100%;
clip: rect(0px, 150px, 150px, 75px);
}
.circle .bar .progress {
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 75px, 150px, 0px);
}
.circle .bar .progress,
.dot span {
background: #4158d0;
}
.circle .left .progress {
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100% {
transform: rotate(180deg);
}
}
.circle .right {
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress {
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100% {
transform: rotate(180deg);
}
}
.circle .dot {
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 16px;
height: 16px;
border-radius: 100%;
}
#keyframes dot {
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<div class="circular">
<div class="inner"></div>
<div class="outer"></div>
<div class="numb">
0%
</div>
<div class="circle">
<div class="dot">
<span></span>
</div>
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>
Maybe you could say if(counter == 73) { animation.pause() }
const numb = document.querySelector(".numb");
let counter = 0;
setInterval(()=>{
if(counter == 73){
clearInterval();
}else{
counter+=1;
numb.textContent = counter + "%";
}
}, 80);
.circular{
height: 150px;
width: 150px;
position: relative;
}
.circular .inner, .circular .outer, .circular .circle{
position: absolute;
z-index: 6;
height: 100%;
width: 100%;
border-radius: 100%;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
}
.circular .inner{
top: 36%;
left: 37%;
height: 117px;
width: 117px;
margin: -40px 0 0 -40px;
background-color: #ffffff;
border-radius: 100%;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.circular .circle{
z-index: 1;
box-shadow: none;
}
.circular .numb{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
font-size: 18px;
font-weight: 500;
color: #4158d0;
}
.circular .bar{
position: absolute;
height: 100%;
width: 100%;
background: #F2F5F5;
-webkit-border-radius: 100%;
clip: rect(0px, 150px, 150px, 75px);
}
.circle .bar .progress{
position: absolute;
height: 100%;
width: 100%;
-webkit-border-radius: 100%;
clip: rect(0px, 75px, 150px, 0px);
}
.circle .bar .progress, .dot span{
background: #4158d0;
}
.circle .left .progress{
z-index: 1;
animation: left 4s linear both;
}
#keyframes left {
100%{
transform: rotate(180deg);
}
}
.circle .right{
z-index: 3;
transform: rotate(180deg);
}
.circle .right .progress{
animation: right 4s linear both;
animation-delay: 4s;
}
#keyframes right {
100%{
transform: rotate(80deg);
}
}
.circle .dot{
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 10px;
margin-top: -5px;
animation: dot 8s linear both;
transform-origin: 0% 50%;
}
.circle .dot span {
position: absolute;
right: 0;
width: 16px;
height: 16px;
border-radius: 100%;
}
#keyframes dot{
0% {
transform: rotate(-90deg);
}
50% {
transform: rotate(90deg);
z-index: 4;
}
100% {
transform: rotate(270deg);
z-index: 4;
}
}
<div class="circular">
<div class="inner"></div>
<div class="outer"></div>
<div class="numb">
0%
</div>
<div class="circle">
<div class="bar left">
<div class="progress"></div>
</div>
<div class="bar right">
<div class="progress"></div>
</div>
</div>
</div>

How would I mask an element with an animated overlay?

I'm trying to do some page transitions for a project I'm working on, I have an animated overlay that comes onto the screen when the user is navigating the site using Barba but I'm having an issue.
I want a logo centered on the page that rolls in with the overlay but I need it to be positioned separately from the overlay since any transform on the overlay would affect the logo as well. (I want the logo to mask with the overlay element)
What I've tried :
Switching around the Element hierarchy/Z-index (I'm sure the problem lies somewhere in here)
Trying different transforms
Messing with Max Width (Had some success but I need the transform origin property)
Example -
let transitionOpen = false;
$('.transition-cta').on("click", function() {
if (transitionOpen === false) {
$('.transition-background').css("transform", "scaleX(1)");
$(this).css("color", "white");
transitionOpen = true;
} else {
$('.transition-background').css("transform", "scaleX(0)");
$(this).css("color", "black");
transitionOpen = false;
}
});
body {
background-color: lightblue;
}
.someContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.transition-wrapper {
overflow: hidden;
}
.transition-background {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
transform-origin: left;
transition: 0.7s ease-in-out;
background-color: #1f1f1f;
transform: scaleX(0);
z-index: 2;
}
.transition-center {
background-image: url('https://i.imgur.com/6um9G9h.png');
z-index: 2;
width: 150px;
height: 150px;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.transition-cta {
text-decoration: underline;
cursor: pointer;
z-index: 3;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="transition-wrapper">
<div class="transition-background"></div>
<!-- I want to clip this with the transition background -->
<div title="I only want this to show with the transition overlay" class="transition-center"></div>
</div>
<div class="transition-cta">Trigger Transition</div>
<div class="someContent">
<h1>Some Content</h1>
</div>
(The globe should roll in with the overlay)
This feels like an extremely simple problem but I'm really struggling to solve it. I can't tell if I'm burned out or this is actually as complicated as my brain is making it.
Thanks!
Use a clip-path animation instead and you can simplify your code by having the logo as background of the transition-wrapper
let transitionOpen = false;
$('.transition-cta').on("click", function() {
$('.transition-wrapper').toggleClass('show');
if (transitionOpen === false) {
$(this).css("color", "white");
transitionOpen = true;
} else {
$(this).css("color", "black");
transitionOpen = false;
}
});
body {
background-color: lightblue;
}
.someContent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.transition-wrapper {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
transition: 0.7s ease-in-out;
background: url('https://i.imgur.com/6um9G9h.png') center/150px 150px no-repeat;
background-color: #1f1f1f;
clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
z-index: 3;
}
.transition-wrapper.show {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.transition-cta {
text-decoration: underline;
cursor: pointer;
z-index: 3;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="transition-wrapper">
</div>
<div class="transition-cta">Trigger Transition</div>
<div class="someContent">
<h1>Some Content</h1>
</div>
I would do something like:
$('.transition-cta').on("click", function() {
$('.transition-wrapper').toggleClass('opened');
$('.transition-content').animate({ width: 'toggle' }, 800);
});
body {
background: lightblue;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.transition-content {
background-color: #1f1f1f;
display: none;
overflow: hidden;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
width: 100%;
}
.transition-cta {
position: relative;
text-decoration: underline;
z-index: 999;
}
.transition-wrapper.opened .transition-cta {
color: #fff;
}
.transition-content__inner {
width: 100vw;
}
.transition-content__inner img {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transition-wrapper">
<div class="transition-cta">Trigger Transition</div>
<div class="content">
<h1>Some Content</h1>
</div>
<div class="transition-content">
<div class="transition-content__inner">
<img src="https://i.imgur.com/6um9G9h.png"/>
</div>
</div>
</div>

How can I reverse this animation smoothly on mouseout?

I have this flipcard I put together, and when you hover over it, it flips 180 degrees on it's x-axis, and then expands. When I mouse-off of the element, I would like for this element to flip back the opposite way smoothly, the way it came in. Instead of the sudden change back when you mouseout like it is right now.
Also, it should be noted that I would like the animation to use animation: forwards for as long as the mouse is hovering over the element. (ie. so long as the user is hovering over the element, it should remain flipped, and enlarged.)
Is there any way to do this using just CSS? Or will I need Javascript? If so, I'd like to do this with pure Vanilla JS.
I have been poking around for solutions on Stack Overflow, and can't seem to find a definitive answer, or am not typing in the correct question.
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
}
#keyframes grow {
from {
transform: rotateY(0) scale(1);
}
to {
transform: rotateY(180deg) scale(2);
}
}
.flipcard:hover {
animation: grow 1s forwards;
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>
You'd better use transition between normal and hover states.
Note that you have to track hover on .container to avoid jumping and flickering.
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transition: all .5s ease-in-out;
}
.container:hover .flipcard {
transform: rotateY(180deg) scale(2);
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>
The reason this happens is because on the default non-hover state there's no animation state to return to. You have two options for this.
Don't use animations and just transition the effect on hover.
This way on out the properties will return to their non-hover state with transition.
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transform: rotateY(0) scale(1);
transition: all 0.3s ease;
}
.flipcard:hover {
transform: rotateY(180deg) scale(2);
}
https://jsfiddle.net/255mnwxr/5/
To have a out animation property.
This is least desired because on load the animation will play once for it to animate then it acts naturally afterwards.
.flipcard {
animation: return 1s forwards;
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transition: all 0.3s ease;
}
#keyframes grow {
from {
transform: rotateY(0) scale(1);
}
to {
transform: rotateY(180deg) scale(2);
}
}
#keyframes return {
from {
transform: rotateY(180deg) scale(2);
}
to {
transform: rotateY(0) scale(1);
}
}
https://jsfiddle.net/255mnwxr/2/
You need to add #keyframes on the mouse in and out hover.
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
}
#-webkit-keyframes in {
from { -webkit-transform: rotate(0deg); }
to {-webkit-transform: rotateY(180deg) scale(2);}
}
#-webkit-keyframes out {
0% { -webkit-transform: rotateY(180deg) scale(2); }
100% { -webkit-transform: rotate(0deg); }
}
.flipcard:hover {
animation: out 1s forwards;
}
.flipcard {
animation: in 1s forwards;
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>
You don't need a keyframe animation for this, you could just use basic CSS transitions for this, they'll rewind on mouseout with the transition property:
.flipcard {
transform: rotateY(0) scale(1);
transition: 1s all ease-out;
}
.flipcard:hover {
transform: rotateY(180deg) scale(2);
}
However, if you do want to use animations (for more complex interactions) I have a snippet for that at the bottom, just know this can be a little harder to maintain, and just reversing it on the default element won't work.
Also note that you may want a mouse-container that doesn't rotate but controls the hover state otherwise the mouse may fall off part way through the transition, like:
.flipcard-container:hover .flipcard {
transform: rotateY(180deg) scale(2);
}
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transform: rotateY(0) scale(1);
transition: 1s all ease-out;
}
.flipcard:hover {
transform: rotateY(180deg) scale(2);
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>
html, body {
background: #f2edea;
height: 100%;
width: 100%;
}
.container {
width: 250px;
height: 320px;
margin: auto;
position: relative;
top: 35%;
}
img {
width: 100%;
max-height: 100%;
}
#keyframes grow {
from {
transform: rotateY(0) scale(1);
}
to {
transform: rotateY(180deg) scale(2);
}
}
#keyframes shrink {
from {
transform: rotateY(180deg) scale(2);
}
to {
transform: rotateY(0) scale(1);
}
}
.flipcard {
height: 100%;
width: 100%;
margin: auto;
top: 20%;
position: relative;
box-shadow: 5px 5px 20px #94989e;
border: 3px solid #b8b8ba;
border-radius: 5px;
background: pink;
transform-style: preserve-3d;
transform: rotateY(0) scale(1);
animation: shrink 1s forwards;
}
.flipcard:hover {
animation: grow 1s forwards;
}
.front-side {
height: 100%;
width: 100%;
position: relative;
backface-visibility: hidden;
}
.back-side {
width: 100%;
height: 100%;
transform: rotateY(180deg);
position: absolute;
top: 0;
border-radius: 3px;
}
<div class='container'>
<div class='flipcard'>
<div class='front-side'>
<img src='https://pre00.deviantart.net/4121/th/pre/i/2018/059/6/7/brigitte_by_raikoart-dc4kzas.png'>
</div>
<div class='back-side'>
<img src="https://img00.deviantart.net/e0ec/i/2017/297/8/c/mercy_by_raikoart-dbrm54b.png">
</div>
</div>
</div>

Button starts the application, but not twice

I made this application with a button ("descrição") to open a "gray background" with one text box and two buttons:
"salvar" (save button) and "cancelar" (cancel button), you can only save and close it if you type something inside the box or click on "cancelar", for the first time it works perfectly, but when you start again it doesn't open the buttons or the text box, and it stays on the "gray background".
I'm still new to HTML, CSS, and JS.
$('#headerR').on('click', function() {
$('#overlay, #overlay-back').fadeIn(500);
$(".text-hidden").toggleClass("text");
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
});
function validation() {
if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
alert("Preencha a Descrição!");
} else {
$(function() {
$("#save").click(function() {
$(".text-hidden").toggleClass("text");
$('#overlay, #overlay-back').fadeOut(500);
});
});
}
}
html, body {
width: 100%;
height: 100%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
top: 10;
left: 50;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
right: 8%;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
left: 5%;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 20%;
left: 37%;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
}
<p>
<button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay">
<span><script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type="text/javascript">
</script>
<textarea id="desc" type="textarea" class="text-hidden">
</textarea> <button id="save" class="saving" onclick=
"validation();"><span><span>Salvar</span> <button id="cancel"
class="canceling" onclick=
"validation();">Cancelar</button></span></button></span>
</div>
If you wanna only fix this bug, try this:
$('#headerR').on('click', function() {
$('#overlay, #overlay-back').fadeIn(500);
$(".text-hidden").toggleClass("text");
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
});
function validation() {
if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
alert("Preencha a Descrição!");
} else {
$(function() {
$(".text-hidden").toggleClass("text");
$('#overlay, #overlay-back').fadeOut(500);
$(".saving").toggleClass("myButton");
$(".canceling").toggleClass("myButton");
});
}
}
html, body {
width: 100%;
height: 100%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
top: 10;
left: 50;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
right: 8%;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
left: 5%;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 20%;
left: 37%;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
}
<p>
<button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay">
<span><script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type="text/javascript">
</script>
<textarea id="desc" type="textarea" class="text-hidden">
</textarea> <button id="save" class="saving" onclick=
"validation();"><span><span>Salvar</span> <button id="cancel"
class="canceling" onclick=
"validation();">Cancelar</button></span></button></span>
</div>
you need to change your JavaScript code as this Fiddle
$('#headerR').on('click', function() {
$('#overlay').fadeIn(500);
$('#overlay-back').fadeIn(500);
});
$(function() {
$("#save").click(function() {
$('#overlay').fadeOut(500);
$('#overlay-back').fadeOut(500);
});
});
function validation() {
if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
alert("Preencha a Descrição!");
}
}
html,
body {
width: 100%;
height: 100%;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none;
}
#overlay {
position: absolute;
top: 10;
left: 50;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}
.text-hidden {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .7s ease;
width: 0px;
height: 0px;
top: 50%;
left: 50%;
}
.saving {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
right: 8%;
background: Green;
color: white;
}
.canceling {
transform: scaleX(0);
transform-origin: 0% 40%;
transition: all .9s ease;
height: 1px;
position: absolute;
top: 90%;
left: 5%;
background: Red;
color: white;
}
.text {
transform: scaleX(1);
width: 300px;
height: 150px;
position: absolute;
top: 20%;
left: 37%;
}
.myButton {
transform: scaleX(1);
width: 80px;
height: 80px;
}
<p>
<button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay"> <span><script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
type="text/javascript">
</script>
<textarea id="desc" type="textarea" class="text">
</textarea> <button id="save" class="saving myButton" onclick=
"validation();"><span><span>Salvar</span>
<button id="cancel" class="canceling myButton" onclick="validation();">Cancelar</button>
</span>
</button>
</span>
</div>

Categories