How to make show the animation and after delete item

How to make show the animation and after delete item - javascript

I have a ticket as you see in the picture below:
So the ticket includes the Bin component which is the bin icon you see and it has an animation when you click the cap of the bin goes up and comes back again.
So I wanted to delete this ticket with delay because I want to show the animation that I mentioned.Here is my delete component:
<template>
<div id="delete-button" #click.prevent="removeProductFromCart(item.id)">
<input type="checkbox" id="checkbox">
<div id="bin-icon">
<div id="lid"></div>
<div id="box">
<div id="box-inner">
<div id="bin-lines"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import cartHelper from "../helpers/cartHelper";
export default {
props: {
item: Object,
},
data() {
return {
loading: false,
};
},
methods: {
removeProductFromCart(id) {
this.loading = true;
setTimeout(() => {
cartHelper.removeFromCart(id, (response) => {
this.$store.dispatch('removeProductFromCart', {
cart: response.data,
})
this.loading = false
});
}, 1000)
}
};
</script>
and the css for the bin and animation:
#delete-button {
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
#checkbox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
z-index: 3;
}
#bin-icon {
position: absolute;
width: 26px;
}
#lid {
position: relative;
width: 30px;
height: 4px;
left: -2px;
border-radius: 4px;
}
#lid:before {
content: '';
position: absolute;
top: -4px;
right: 0;
left: 0;
width: 10px;
height: 3px;
margin: 0 auto;
border-radius: 10px 10px 0 0;
}
#box {
position: relative;
height: 37px;
margin-top: 1px;
border-radius: 0 0 8px 8px;
}
#box-inner {
position: relative;
top: 2px;
width: 20px;
height: 32px;
margin: 0 auto;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
#bin-lines {
position: relative;
top: 7px;
margin: 0 auto;
}
#bin-lines, #bin-lines:before, #bin-lines:after {
width: 2px;
height: 20px;
border-radius: 4px;
}
#bin-lines:before, #bin-lines:after {
content: '';
position: absolute;
}
#bin-lines:before {
left: -8px;
}
#bin-lines:after {
left: 8px;
}
#layer {
position: absolute;
right: -20px;
bottom: -20px;
width: 0;
height: 0;
background-color: var(--link-text-color-hover);
border-radius: 50%;
transition: 0.25s ease all;
z-index: 1;
}
#lid, #lid:before,
#box, #bin-lines,
#bin-lines:before,
#bin-lines:after {
background-color: var(--button-color);
transition: 0.2s ease background-color;
}
#checkbox:checked ~ #bin-icon #lid,
#checkbox:checked ~ #bin-icon #lid:before,
#checkbox:checked ~ #bin-icon #box {
background-color: var(--link-text-color-hover);
}
#checkbox:checked ~ #bin-icon #bin-lines,
#checkbox:checked ~ #bin-icon #bin-lines:before,
#checkbox:checked ~ #bin-icon #bin-lines:after {
background-color: var(--link-text-color-hover);
}
#checkbox:checked + #bin-icon #box {
animation: shake 0.2s ease 0.1s;
}
#checkbox:checked + #bin-icon #lid {
animation: lift-up 0.8s ease 0.1s, shake_u 0.8s ease 0.1s, shake_l 0.2s ease 0.8s;
}
#checkbox:checked ~ #layer {
width: 226px;
height: 226px;
}
#keyframes shake {
0%{ transform: rotateZ(3deg); }
25%{ transform: rotateZ(0);}
75%{ transform: rotateZ(-3deg); }
100%{ transform: rotateZ(0); }
}
#keyframes lift-up {
0%{ top:0; }
50%{ top:-35px;}
100%{ top:0; }
}
#keyframes shake_u {
0%{ transform: rotateZ(0); }
25%{ transform:rotateZ(-15deg); }
50%{ transform:rotateZ(0deg); }
75%{ transform:rotateZ(15deg); }
100%{ transform:rotateZ(0); }
}
#keyframes shake_l {
0%{ transform:rotateZ(0); }
80%{ transform:rotateZ(3deg); }
90%{ transform:rotateZ(-3deg); }
100%{ transform:rotateZ(0); }
}
So overall, when I click the bin icon I want the ticket to be deleted but after a bit of delay because I want to show the animation of the bin (the cap goes up and down). But like this, it only deletes it (without animation), just with delay. So I wonder how can I solve this problem. I am working with Vue but it might have js or css solution.

I think it's because your checkbox never gets "checked".
You can either add that inside your method or you can just wrap that block with a label.
<template>
<label for="checkbox" id="delete-button" #click="removeProductFromCart(item.id)">
<input type="checkbox" id="checkbox">
<div id="bin-icon">
<div id="lid"></div>
<div id="box">
<div id="box-inner">
<div id="bin-lines"></div>
</div>
</div>
</div>
</label>
</template>

Related

Full screen overlay menu toggle

I want to create a full screen overlay menu. I am not able to close the menu on anchor click eg. if we click on Home. It scrolls down to the section but does not close the overlay.
I have tried adding some jquery but I am not able to do it. I have tried to toggle the menus as done on clicking the cross but no success.
$('#toggle').click(function () {
$(this).toggleClass('active');
$('#overlay').toggleClass('open');
});
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
}
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #FF5252;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: 0.35s ease;
}
.container a:hover:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Vollkorn', sans-serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity 0.25s ease;
}
.button_container:hover {
opacity: 0.7;
}
.button_container.active .top {
transform: translateY(10px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-10px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #FF5252;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0px;
left: 0;
transition: all 0.35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 10px;
}
.button_container span:nth-of-type(3) {
top: 20px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
visibility: hidden;
transition: opacity 0.35s, visibility 0.35s, width 0.35s;
z-index: 50;
}
.overlay:before {
content: '';
background: #FF5252;
left: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: left 0.35s ease;
}
.overlay:after {
content: '';
background: #FF5252;
right: -55%;
top: 0;
width: 50%;
height: 100%;
position: absolute;
transition: all 0.35s ease;
}
.overlay.open {
opacity: 0.9;
visibility: visible;
height: 100%;
}
.overlay.open:before {
left: 0;
}
.overlay.open:after {
right: 0;
}
.overlay.open li {
-webkit-animation: fadeInRight 0.5s ease forwards;
animation: fadeInRight 0.5s ease forwards;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
}
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: 0.55s;
animation-delay: 0.55s;
}
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: 0.65s;
animation-delay: 0.65s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 50px;
font-family: 'Vollkorn', serif;
font-weight: 400;
text-align: center;
z-index: 100;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #FFF;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: 0.35s;
}
#-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body translate='no' >
<div class='container'>
<h1>Top right corner, click it!</h1>
</div>
<div class='button_container' id='toggle'>
<span class='top'></span>
<span class='middle'></span>
<span class='bottom'></span>
</div>
<div class='overlay' id='overlay'>
<nav class='overlay-menu' id="fulloverlay">
<ul>
<li><a href='#about2' >Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Work</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
</div>
<section class="about" id="about" style="background-color: white; height: 100vh;"></section>
<section class="about2" id="about2" style="background-color:aqua; height: 100vh;"></section>

I tried this code on my side and noticed one small change would work in this case.
You are selecting anchors(a) using wrong selector. As 'fulloverlay' is the Id of the parent nav element so instead of selecting it like:
$(".fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
You can write like this:
$("#fulloverlay a").on("click", function() {
$('#toggle').toggleClass('active');
$('#overlay').toggleClass('open');
});
then it works.

Can I make this menu animation smoother?

I'm trying to turn my menu into an X shape with animations. Here's a video of what it currently looks like.
Video
I want to make it more smooth and actually make the cross symmetrical.
I have create a code snippet with all the relevant code below.
const NAV_BTN = document.querySelector('.navmenu');
const NL_1 = document.querySelector('.l1');
const NL_2 = document.querySelector('.l2');
const NL_3 = document.querySelector('.l3');
NAV_BTN.addEventListener('click', () => {
navToClose();
});
const navToClose = () => {
NL_1.style.animation = '0.5s l1Close forwards';
NL_2.style.animation = '0.5s l2Close forwards';
NL_3.style.animation = '0.5s l3Close forwards';
};
.container{
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.navmenu {
transition: all 0.5s;
}
.nline{
width: 40px;
height: 4px;
border-radius: 0.5px;
background-color: white;
margin-top: 5px;
margin-bottom: 5px;
}
.l1 {
width: 20px;
transition: all 0.5s;
}
.l3 {
width: 20px;
transition: all 0.5s;
margin-left: auto;
}
.navmenu:hover>.l1,
.navmenu:hover>.l3 {
width: 40px;
}
.navmenu:hover {
opacity: 0.5;
cursor: pointer;
}
/* ANIMATIONS */
#keyframes l1Close{
0%{
transform: rotate(0deg);
margin: 0;
}
100%{
transform: translate(0,0) rotate(-45deg);
width: 40px;
}
}
#keyframes l2Close{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#keyframes l3Close{
0%{
transform: rotate(0deg);
}
100%{
transform: translate(0,0) rotate(45deg);
width: 40px;
}
}
<div class="container">
<div class="navmenu">
<div class="nline l1"></div>
<div class="nline l2"></div>
<div class="nline l3"></div>
</div>
</div>
I would appreciate any help, and will reply if you have any questions.
Thanks.

The following code should be close enough to the solution you are aiming for. The transition can be modified according to your needs and the seconds must be adapted accordingly.
.container{
height: 200px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
.navmenu {
transition: all 0.8s;
}
.nline{
width: 40px;
height: 4px;
border-radius: 0.5px;
background-color: white;
margin-top: 5px;
margin-bottom: 5px;
}
.l1 {
width: 20px;
transition: all 0.5s linear;
}
.l2 {
width: 40px;
transition: all 0.3s linear;
}
.l3 {
width: 20px;
transition: all 0.5s linear;
margin-left: auto;
}
.navmenu:hover>.l1 {
width: 40px;
position: relative;
top: 7px;
transform: rotate(-45deg);
}
.navmenu:hover>.l3 {
width: 40px;
position: relative;
top: -7px;
transform: rotate(45deg);
}
.navmenu:hover>.l2 {
height: 1.5px;
opacity:0;
}
.navmenu:hover {
opacity: 0.5;
cursor: pointer;
}
<div class="container">
<div class="navmenu">
<div class="nline l1"></div>
<div class="nline l2"></div>
<div class="nline l3"></div>
</div>
</div>

Cannot display source code from JSFiddle to blogger

I have a problem with my source code. I hope you read well and understand and do not immediately act ignorant of my question.
I very often come across people who are smart but don't like to understand other people's questions.
I've edited a quiz via JSFiddle. With the help of this forum, It works fine on JSFiddle.
But when I tried this source code on blogger, it didn't work very well. The question doesn't arise. Someone said that something was wrong with the CSS. I edited the CSS, but it didn't work. Even when I delete the entire CSS, the questions still don't appear while the rest of the section appears.
I will show the difference with the following image.
The first image is an image that works well in JSField. The second image is the appearance of blogger with full CSS. The third image is the appearance of blogger without CSS. The CSS I mean is the CSS I use on JSField.
I have changed the contents several times, even deleted some parts. But in the end it didn't work and I returned the CSS.
One thing is for sure, even though I tried the question and answer choices from the quizzes it didn't appear on blogger.
I have asked this many times, I hope to find answers to my questions in this forum.
here I give my file link in JSFiddle
and here's the CSS for my problem. I apologize for showing all the CSS because I don't know which part is the problem in blogger
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
.quizArea{
width: 95%;
margin: auto;
padding:10px;
position: relative;
text-align: center;
}
.mc_quiz{
color: #3a5336;
margin-bottom: 0px;
}
.multipleChoiceQues{
width:90%;
margin: auto;
padding: 10px;
}
.quizBox
{
width:90%;
margin: auto;
}
.question{
text-align: center;
font-size: 0.8em;
}
.buttonArea
{
text-align: right;
height: 4.5em;
}
button {
height: 4em;
width:130px;
padding: 1.5em auto;
margin: 1em auto;
background-color:#f1f2ec;
border: none;
border-radius: 3px;
color: #7aa4a9;
text-transform: uppercase;
letter-spacing: 0.5em;
transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
#next:hover,
#submit:hover,
.viewanswer:hover,
.viewchart:hover,
.backBtn:hover,
.replay:hover {
letter-spacing: 0.8em;
}
.viewanswer,
.viewchart,
.replay{
width: 30%;
}
.backBtn{
width:100px;
height: 2em;
font-size: 0.8em;
margin-left: 70%;
}
#next:active,
#submit:active,
.viewanswer:active,
.viewchart:active,
.backBtn:active,
.replay:active {
letter-spacing: 0.3em;
}
.resultArea{
display: none;
width:70%;
margin: auto;
padding: 10px;
}
.chartBox{
width: 60%;
margin:auto;
}
.resultPage1{
text-align: center;
}
.resultBox h1{
}
.briefchart
{
text-align:center;
}
.resultBtns{
width: 60%;
margin: auto;
text-align:center;
}
.resultPage2,
.resultPage3
{
display: none;
text-align: center;
}
.allAnswerBox{
width: 100%;
margin: 0;
position: relative;
}
._resultboard{
position: relative;
display:inline-block;
width: 40%;
padding: 2%;
height: 190px;
vertical-align: top;
border-bottom: 0.6px solid rgba(255,255,255,0.2);
text-align: left;
margin-bottom: 4px;
}
._resultboard:nth-child(even){
margin-left: 5px;
border-left: 0.6px solid rgba(255,255,255,0.2);
}
._resultboard:nth-last-child(2),
._resultboard:nth-last-child(1){
border-bottom: 0px;
}
._header{
font-weight: bold;
margin-bottom: 8px;
height: 90px;
}
._yourans,
._correct{
margin-bottom: 8px;
position: relative;
line-height: 2;
padding: 5px;
}
._correct{
background: #968089 ;
}
.h-correct{
background: #968089;
}
.h-correct:after,
._correct:after {
line-height: 1.4;
position: absolute;
z-index: 499;
font-family: 'FontAwesome';
content: "\f00c";
bottom: 0;
right: 7px;
font-size: 1.9em;
color: #2dceb1;
}
.h-incorrect{
background: #ab4e6b ;
}
.h-incorrect:after {
line-height: 1.4;
position: absolute;
z-index: 499;
font-family: 'FontAwesome';
content: "\f00d";
bottom: 0;
right: 7px;
font-size: 1.9em;
color: #ff383e;
}
.resultPage3 h1,
.resultPage1 h1,
.resultPage2 h1{
text-align: center;
padding-bottom: 10px;
border-bottom: 1.3px solid rgba(21, 63, 101,0.9);
color: #3a5336;
}
.my-progress {
position: relative;
display: block;
margin: 3rem auto 0rem;
width: 100%;
max-width: 950px;
}
progress {
display: block;
position: relative;
top: -0.5px;
left: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #f1f2ec ;
width: 100%;
height: 2.5px;
background: none;
-webkit-transition: 1s;
transition: 1s;
will-change: contents;
}
progress::-webkit-progress-bar {
background-color: #c72828;
}
progress::-webkit-progress-value {
background-color:#153f65;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.my-progress-indicator {
position: absolute;
top: -6px;
left: 0;
display: inline-block;
width: 5px;
height: 5px;
background: #7aa4a9;
border: 3px solid #f1f2ec;
border-radius: 50%;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-transition-delay: .3s;
transition-delay: .3s;
will-change: transform;
}
.my-progress-indicator.progress_1 {
left: 0;
}
.my-progress-indicator.progress_2 {
left: 9%;
}
.my-progress-indicator.progress_3 {
left: 18%;
}
.my-progress-indicator.progress_4{
left: 27%;
}
.my-progress-indicator.progress_5 {
left: 36%;
}
.my-progress-indicator.progress_6 {
left: 45%;
}
.my-progress-indicator.progress_7 {
left: 54%;
}
.my-progress-indicator.progress_8 {
left: 63%;
}
.my-progress-indicator.progress_9 {
left: 72%;
}
.my-progress-indicator.progress_10 {
left: 81%;
}
.my-progress-indicator.progress_11 {
left: 90%;
}
.my-progress-indicator.progress_12 {
left: 100%;
}
.my-progress-indicator.active {
-webkit-animation: bounce .5s forwards;
animation: bounce .5s forwards;
-webkit-animation-delay: .5s;
animation-delay: .5s;
border-color: #153f65 ;
}
.animation-container {
position: relative;
width: 100%;
-webkit-transition: .3s;
transition: .3s;
will-change: padding;
overflow: hidden;
}
.form-step {
position: absolute;
-webkit-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
will-change: transform, opacity;
}
.form-step.leaving {
-webkit-animation: left-and-out .5s forwards;
animation: left-and-out .5s forwards;
}
.form-step.waiting {
-webkit-transform: translateX(400px);
transform: translateX(400px);
}
.form-step.coming {
-webkit-animation: right-and-in .5s forwards;
animation: right-and-in .5s forwards;
}
#-webkit-keyframes left-and-out {
100% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
}
#keyframes left-and-out {
100% {
opacity: 0;
-webkit-transform: translateX(-400px);
transform: translateX(-400px);
}
}
#-webkit-keyframes right-and-in {
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes right-and-in {
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#-webkit-keyframes bounce {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes bounce {
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.hidden {
display: none;
}
ul{
list-style-type: none;
width: 220px;
margin: auto;
text-align: left;
}
li {
position: relative;
padding: 10px;
padding-left: 40px;
height:30px;
}
label{
color: #c72828;
}
label:before {
content: "";
width: 15px;
height: 15px;
background : #c72828;
position: absolute;
left: 7px;
top: calc(50% - 13px);
box-sizing: border-box;
border-radius: 50%;
}
input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 30px;
position: absolute;
left: 0;
top: calc(50% - 15px);
cursor: pointer;
}
.bullet {
position: relative;
width: 25px;
height: 25px;
left: -3px;
top: 2px;
border: 5px solid #fff ;
opacity: 0;
border-radius: 50%;
}
input[type="radio"]:checked ~ .bullet {
position:absolute;
opacity: 1;
animation-name: explode;
animation-duration: 0.350s;
background : #fff;
}
.line {
position: absolute;
width: 10px;
height: 2px;
background-color: #c72828 ;
opacity:0;
}
.line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px;
height: 10px;
}
.line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
}
.line.two {
right: -20px;
top: 11px;
transform: translate(-9px);
}
.line.three {
right: -8px;
top: 35px;
transform: rotate(55deg) translate(-9px);
}
.line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
}
.line.five {
left: -20px;
top: 11px;
transform: translate(9px);
}
.line.six {
left: -8px;
top: 35px;
transform: rotate(-55deg) translate(9px);
}
.line.seven {
left: 11px;
bottom: -21px;
transform: translateY(-20px);
width: 2px;
height: 10px;
}
input[type="radio"]:checked ~ .bullet .line.zero{
animation-name:drop-zero;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.one{
animation-name:drop-one;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.two{
animation-name:drop-two;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.three{
animation-name:drop-three;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.four{
animation-name:drop-four;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.five{
animation-name:drop-five;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.six{
animation-name:drop-six;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked ~ .bullet .line.seven{
animation-name:drop-seven;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
#keyframes explode {
0%{
opacity: 0;
transform: scale(10);
}
60%{
opacity: 1;
transform: scale(0.5);
}
100%{
opacity: 1;
transform: scale(1);
}
}
#keyframes drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity:0;
}
}
#keyframes drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-two {
0% {
opacity: 0;
transform: translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-three {
0% {
opacity: 0;
transform: rotate(55deg) translate(-20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-five {
0% {
opacity: 0;
transform: translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-six {
0% {
opacity: 0;
transform: rotate(-55deg) translate(20px);
width: 10px;
}
20% {
opacity:1;
}
100% {
transform: rotate(-55deg) translate(-9px);
width: 0px;
opacity:0;
}
}
#keyframes drop-seven {
0% {
opacity: 0;
transform: translateY(-20px);
height: 10px;
}
20% {
opacity:1;
}
100% {
transform: translateY(2px);
height: 0px;
opacity:0;
}
}
and if you want to see it in blogger view, click here

Set a visit count down using cookies

My site uses an anti-adblock that prevents people from entering it, but no one likes to see advertisements, so I've decided to look for a way to let new visitors use the site a few times before the message to disable adblock appears.
I tried to use cookies to record a number, and every time the person visits subtract the number, delete the old cookie, create a new one with the number subtracted, so when the number is equal to 0 the anti-adblock appears, but it is confusing for me I barely started learning javascript.
Is there any easier way to do this or cookie is the best option? How do I do this?
Sample page of my anti-Adblock: https://www.stackexample.ml/adblock
My anti-adblock code:
NOTE: My website is static.
window.onload = function a() {
var div1 = document.getElementById("off");
var div2 = document.getElementById("on");
var div3 = document.getElementById("carregando");
var span = document.getElementById("v");
var b = document.getElementById("b");
var url = new URL(window.location);
var r = url.searchParams.get("r");
var enc1 = window.atob(r);
if( window.canRunAds === undefined ){
div2.style.display="block"
div3.style.display="none"
b.style.display="block"
span.style.color="#d06079"
span.innerHTML="Desative o Adblock"
}else{
div1.style.display="block"
div3.style.display="none"
span.innerHTML="Adblock desativado"
//código para liberar a pagina aqui
}
};
.cont {
width:320px;
margin:18% auto;
}
#b {
border:1px solid #ba5269;
background-color:#d06079;
color:white;
border-radius:6px;
padding:15px;
font-size:18px;
display:none;
margin:25px auto;
}
#on{
display:none;
margin:22px auto;
}
.check_mark {
width: 80px;
height: 130px;
margin: 0 auto;
display:none;
}
#v {
font-family:arial;
font-size:35px;
color:green;
display:block;
text-align:center;
}
button {
cursor: pointer;
margin-left: 15px;
}
.hide{
display:none;
}
.sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box;
}
.sa-icon.sa-success {
border-color: #4CAF50;
}
.sa-icon.sa-success::before, .sa-icon.sa-success::after {
content: '';
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sa-icon.sa-success::before {
-webkit-border-radius: 120px 0 0 120px;
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px;
}
.sa-icon.sa-success::after {
-webkit-border-radius: 0 120px 120px 0;
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0px 60px;
transform-origin: 0px 60px;
}
.sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(76, 175, 80, .5);
-webkit-border-radius: 40px;
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sa-icon.sa-success.animate::after {
-webkit-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in;
}
.sa-icon.sa-success {
border-color: transparent\9;
}
.sa-icon.sa-success .sa-line.sa-tip {
-ms-transform: rotate(45deg) \9;
}
.sa-icon.sa-success .sa-line.sa-long {
-ms-transform: rotate(-45deg) \9;
}
.animateSuccessTip {
-webkit-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
-webkit-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s;
}
#-webkit-keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
#-webkit-keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
.sa-icon.sa-success .sa-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#-webkit-keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
#keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
-webkit-transform: rotate(-405deg);
}
}
.loading {
border: 4px solid #3a3;
border-right: 4px solid #a5d7a7;
border-bottom: 4px solid #a5d7a7;
height: 80px;
width: 80px;
border-radius: 50%;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
margin:22px auto;
}
#-webkit-keyframes loading {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes loading {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes loading {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.abgne-loading-20140104-2 {
position: relative;
height: 100px;
width: 100px;
}
.abgne-loading-20140104-2 .loading {
border: 6px solid #168;
border-right: 6px solid #fff;
border-bottom: 6px solid #fff;
height: 100%;
width: 100%;
border-radius: 50%;
-webkit-animation: loading 1s infinite linear;
-moz-animation: loading 1s infinite linear;
-ms-animation: loading 1s infinite linear;
-o-animation: loading 1s infinite linear;
animation: loading 1s infinite linear;
}
.abgne-loading-20140104-2 .word {
color: #168;
position: absolute;
top: 0;
left: 0;
display: inline-block;
text-align: center;
font-size: 72px;
line-height: 72px;
font-family: arial;
margin: 18px 0 0 20px;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Verificando Adblock</title>
<script src="https://www.stackexample.ml/js/ads.js"></script>
</head>
<body>
<div class="cont">
<span id="v">Verificando adblock</span>
<div id="carregando" class="loading"></div>
<img src="https://www.stackexample.ml/falhou.png" alt="Smiley face" height="90" width="90" id="on">
<div id="off" class="check_mark">
<div class="sa-icon sa-success animate">
<span class="sa-line sa-tip animateSuccessTip"></span>
<span class="sa-line sa-long animateSuccessLong"></span>
<div class="sa-placeholder"></div>
<div class="sa-fix"></div>
</div>
</div>
<button id="b" onclick="window.location.reload()">Já desativei, Continuar...</button>
</div>
</body>
</html>

If you are looking to maintain a counter, you can use Local Storage for the same.. for example,
Note: You won't be able to run this code here due to the restrictions by StackOverflow, as am using localStorage
You can see it in action here instead (keep refreshing the page for 3 times and you'll see) - https://codepen.io/anon/pen/qvaYQK
Here, am initializing the counter of adcounter with 1 if not found, if found, I just increment it if the ads are blocked, if it crosses 3, I just show the modal to the user. If user disables the adblock, I reset the counter back to 0.
I've also refactored your code a bit, there is a massive chunk of code which can still be refactored.
window.onload = function a() {
var div1 = document.getElementById("off");
var div2 = document.getElementById("on");
var div3 = document.getElementById("carregando");
var span = document.getElementById("v");
var b = document.getElementById("b");
var url = new URL(window.location);
var r = url.searchParams.get("r");
var enc1 = window.atob(r);
var getWrapper = document.getElementById('ad-blocker-modal');
var showModalAfterVisits = 3; //show modal after 3 visits
var getCounter = localStorage.getItem('adcounter');
if(!getCounter) {
localStorage.setItem('adcounter', 0); // initialize Local Storage
}
function checkForAdBlocker() {
if (!window.canRunAds) {
if(getCounter < 3) {
//keep incrementing the counter unless the counter reaches 3 and return
localStorage.setItem('adcounter', ++getCounter);
return;
}
getWrapper.classList.remove('hide');
div2.style.display = "block"
div3.style.display = "none"
b.style.display = "block"
span.style.color = "#d06079"
span.innerHTML = "Desative o Adblock"
} else {
localStorage.setItem('adcounter', 0); //reset if adblock is disabled
div1.style.display = "block"
div3.style.display = "none"
span.innerHTML = "Adblock desativado"
}
}
checkForAdBlocker();
};
.cont {
width: 320px;
margin: 18% auto;
}
.hide {
display: none;
}
#ad-blocker-modal {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
}
#b {
border: 1px solid #ba5269;
background-color: #d06079;
color: white;
border-radius: 6px;
padding: 15px;
font-size: 18px;
display: none;
margin: 25px auto;
}
#on {
display: none;
margin: 22px auto;
}
.check_mark {
width: 80px;
height: 130px;
margin: 0 auto;
display: none;
}
#v {
font-family: arial;
font-size: 35px;
color: green;
display: block;
text-align: center;
}
button {
cursor: pointer;
margin-left: 15px;
}
.hide {
display: none;
}
.sa-icon {
width: 80px;
height: 80px;
border: 4px solid gray;
border-radius: 40px;
border-radius: 50%;
margin: 20px auto;
padding: 0;
position: relative;
box-sizing: content-box;
}
.sa-icon.sa-success {
border-color: #4CAF50;
}
.sa-icon.sa-success::before,
.sa-icon.sa-success::after {
content: '';
border-radius: 40px;
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: white;
transform: rotate(45deg);
}
.sa-icon.sa-success::before {
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
transform: rotate(-45deg);
transform-origin: 60px 60px;
}
.sa-icon.sa-success::after {
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
transform: rotate(-45deg);
transform-origin: 0px 60px;
}
.sa-icon.sa-success .sa-placeholder {
width: 80px;
height: 80px;
border: 4px solid rgba(76, 175, 80, .5);
border-radius: 40px;
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.sa-icon.sa-success .sa-fix {
width: 5px;
height: 90px;
background-color: white;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
transform: rotate(-45deg);
}
.sa-icon.sa-success.animate::after {
animation: rotatePlaceholder 4.25s ease-in;
}
.animateSuccessTip {
animation: animateSuccessTip 0.75s;
}
.animateSuccessLong {
animation: animateSuccessLong 0.75s;
}
#keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
#keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
.sa-icon.sa-success .sa-line {
height: 5px;
background-color: #4CAF50;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.sa-icon.sa-success .sa-line.sa-tip {
width: 25px;
left: 14px;
top: 46px;
transform: rotate(45deg);
}
.sa-icon.sa-success .sa-line.sa-long {
width: 47px;
right: 8px;
top: 38px;
transform: rotate(-45deg);
}
#keyframes rotatePlaceholder {
0% {
transform: rotate(-45deg);
}
5% {
transform: rotate(-45deg);
}
12% {
transform: rotate(-405deg);
}
100% {
transform: rotate(-405deg);
}
}
.loading {
border: 4px solid #3a3;
border-right-color: a5d7a7;
border-bottom-color: #a5d7a7;
height: 80px;
width: 80px;
border-radius: 50%;
animation: loading 1s infinite linear;
margin: 22px auto;
}
#keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.abgne-loading-20140104-2 {
position: relative;
height: 100px;
width: 100px;
}
.abgne-loading-20140104-2 .loading {
border: 6px solid #168;
border-right-color: #fff;
border-bottom: #fff;
height: 100%;
width: 100%;
border-radius: 50%;
animation: loading 1s infinite linear;
}
.abgne-loading-20140104-2 .word {
color: #168;
position: absolute;
top: 0;
left: 0;
display: inline-block;
text-align: center;
font-size: 72px;
line-height: 72px;
font-family: arial;
margin: 18px 0 0 20px;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Verificando Adblock</title>
<script src="https://www.stackexample.ml/js/ads.js"></script>
</head>
<body>
Some content on my Website
<div id="ad-blocker-modal" class="hide">
<div class="cont">
<span id="v">Verificando adblock</span>
<div id="carregando" class="loading"></div>
<img src="https://www.stackexample.ml/falhou.png" alt="Smiley face" height="90" width="90" id="on">
<div id="off" class="check_mark">
<div class="sa-icon sa-success animate">
<span class="sa-line sa-tip animateSuccessTip"></span>
<span class="sa-line sa-long animateSuccessLong"></span>
<div class="sa-placeholder"></div>
<div class="sa-fix"></div>
</div>
</div>
<button id="b" onclick="window.location.reload()">Já desativei, Continuar...</button>
</div>
</div>
</body>
</html>

Keyframes CSS Animation

Hello I'm trying to simulate flip countdown timer But when I wrote the code I discovered that there was a difference between:
#keyframes zindex {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
and:
#keyframes zindex {
0% {
z-index: 2;
}
100% {
z-index: 4;
}
}
That when I remove 5% the problem will occurred so I'd like to know why this problem ocurres.
Here my code:
body {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
}
.wrap {
width: 50px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0px 0px -25px;
}
ul#initial {
list-style-type: none;
width: 100%;
height: 100%;
padding: 0px;
position: relative;
}
ul#initial li {
position: absolute;
top: 0;
left: 0;
text-align: center;
width: 100%;
}
.first {
z-index: 3;
}
.second {
-webkit-animation: zindex 1s 1s linear both;
}
#keyframes zindex {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
}
.flipthis {
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
background: #bbb;
transform-origin: 50% 100%;
color: #fff;
animation: flipthis 1s linear;
}
.flipthis-down {
height: 50px;
width: 50px;
background: #0034ff;
color: #fff;
overflow: hidden;
position: absolute;
top: auto;
left: 0;
bottom: 0;
}
.digit {
height: 200%;
font-size: 80px;
position: absolute;
width: 50px;
text-align: center;
text-shadow:0px 1px 2px rgba(224,224,224,0.87);
}
.flipthis-down .digit {
bottom: 0;
}
#-webkit-keyframes flipthis {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-90deg);
}
}
.flipthis2 {
height: 50px;
width: 50px;
background: #00ff82;
color: #fff;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.flipthis2-down {
height: 50px;
width: 50px;
background: #00f760;
color: #fff;
-webkit-transform-origin: 50% 0%;
overflow: hidden;
position: absolute;
top: auto;
left: 0;
bottom: 0;
animation: flipthis-down 1s 1s linear;
}
.flipthis2-down .digit {
bottom: 0;
}
#-webkit-keyframes flipthis-down {
0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
a.derp {
-webkit-perspective: 2000px;
display: block;
width: 50px;
height: 100px;
}
<div class="wrap">
<ul id="initial">
<li class="first">
<a class="derp">
<div class="flipthis">
<div class="digit">1</div>
</div>
<div class="flipthis-down">
<div class="digit">1</div>
</div>
</a>
</li>
<li class="second">
<a class="derp">
<div class="flipthis2">
<div class="digit">2</div>
</div>
<div class="flipthis2-down">
<div class="digit">2</div>
</div>
</a>
</li>
</ul>
</div>

The first example reaches the final value of '4' after only 5% of the animation is done, the second example increases the z-index linearly over the specified animation duration.
Adding multiple '%' values tells your browser at what point in time what value should be reached, so your first animation is basically already finished after 5% of the time has passed.

We Keep Coding

JavaScript is the programming language of the Web.

How to make show the animation and after delete item - javascript

Related

Full screen overlay menu toggle

Can I make this menu animation smoother?

Cannot display source code from JSFiddle to blogger

Set a visit count down using cookies

Keyframes CSS Animation

Categories

Resources