I'm trying to animate a button to fadeInDown when it appears after scrolling 20 px down, but I can't figure out how to implement it.
I have fadeInDown in my .css file, but I can't find where to call it (either in javascript or in .html)
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("topBtn").style.display = "block";
$('#topBtn').fadeInDown('slow');
} else {
document.getElementById("topBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
#-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translatey(-10px);
-moz-transform: translatey(-10px);
-o-transform: translatey(-10px);
transform: translatey(-10px);
}
to {
opacity: 1;
-webkit-transform: translatey(0);
-moz-transform: translatey(0);
-o-transform: translatey(0);
transform: translatey(0);
}
}
#-moz-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translatey(-10px);
-moz-transform: translatey(-10px);
-o-transform: translatey(-10px);
transform: translatey(-10px);
}
to {
opacity: 1;
-webkit-transform: translatey(0);
-moz-transform: translatey(0);
-o-transform: translatey(0);
transform: translatey(0);
}
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translatey(-10px);
-moz-transform: translatey(-10px);
-o-transform: translatey(-10px);
transform: translatey(-10px);
}
to {
opacity: 1;
-webkit-transform: translatey(0);
-moz-transform: translatey(0);
-o-transform: translatey(0);
transform: translatey(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onShow="animation: fadeInDown" class="animated fadeInDown" onclick="topFunction()" id="topBtn" title="Go to top">Top</button>
Expected the button to be animated when it shows, but it just pops in to existence.
This can actually be done very easily with jQuery UI like so:
$(window).on('scroll', function(){
var scrollPosition = $(window).scrollTop();
if(scrollPosition > 20) {
$('#scroll-to-top').show("drop",{direction: "up"},300);
} else {
$('#scroll-to-top').hide("drop",{direction: "up"},300);
}
});
.scroll-to-top {
display:none;
position:fixed;
top:24px;
right:24px;
}
.content {
height:2000px;
}
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="scroll-to-top" class="scroll-to-top">
Scroll To Top
</button>
<div class="content"></div>
Let me know if this worked. See the code snippet for the example.
You do not need onshow to achieve this. Simply add the animation as a style property to your button and it will automatically trigger when display is set to block.
#topBtn {
position: fixed;
animation: fadeInDown 500ms;
}
.animated {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
Add this in your style, because you have not defined animated class in your style
Related
I need to show preloader only in 'content' div, but preloader hides entire page. Structure site:
Title
Menu
Content (here i need preloader)
Footer
I can't find, where i need insert my code of preloader...
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
$(window).load(function() {
$(".cssload-loader").delay(1400).fadeOut();
$(".preloader").delay(1500).fadeOut("slow");
})
.preloader {
position: fixed;
background-color: #fff;
z-index: 107;
height: 100%;
width: 100%;
}
.cssload-loader {
position: absolute;
left: 50%;
top: 50%;
width: 34.284271247462px;
height: 34.284271247462px;
margin-left: -17.142135623731px;
margin-top: -17.142135623731px;
border-radius: 100%;
animation-name: cssload-loader;
-o-animation-name: cssload-loader;
-ms-animation-name: cssload-loader;
-webkit-animation-name: cssload-loader;
-moz-animation-name: cssload-loader;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-duration: 2.8s;
-o-animation-duration: 2.8s;
-ms-animation-duration: 2.8s;
-webkit-animation-duration: 2.8s;
-moz-animation-duration: 2.8s;
}
.cssload-loader .cssload-side {
display: block;
width: 4px;
height: 14px;
background-color: rgba(0,0,0,0.81);
margin: 1px;
position: absolute;
border-radius: 50%;
animation-duration: 1.045s;
-o-animation-duration: 1.045s;
-ms-animation-duration: 1.045s;
-webkit-animation-duration: 1.045s;
-moz-animation-duration: 1.045s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-timing-function: ease;
-o-animation-timing-function: ease;
-ms-animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
}
.cssload-loader .cssload-side:nth-child(1),
.cssload-loader .cssload-side:nth-child(5) {
transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
animation-name: cssload-rotate0;
-o-animation-name: cssload-rotate0;
-ms-animation-name: cssload-rotate0;
-webkit-animation-name: cssload-rotate0;
-moz-animation-name: cssload-rotate0;
}
.cssload-loader .cssload-side:nth-child(3),
.cssload-loader .cssload-side:nth-child(7) {
transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
animation-name: cssload-rotate90;
-o-animation-name: cssload-rotate90;
-ms-animation-name: cssload-rotate90;
-webkit-animation-name: cssload-rotate90;
-moz-animation-name: cssload-rotate90;
}
.cssload-loader .cssload-side:nth-child(2),
.cssload-loader .cssload-side:nth-child(6) {
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
animation-name: cssload-rotate45;
-o-animation-name: cssload-rotate45;
-ms-animation-name: cssload-rotate45;
-webkit-animation-name: cssload-rotate45;
-moz-animation-name: cssload-rotate45;
}
.cssload-loader .cssload-side:nth-child(4),
.cssload-loader .cssload-side:nth-child(8) {
transform: rotate(135deg);
-o-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
animation-name: cssload-rotate135;
-o-animation-name: cssload-rotate135;
-ms-animation-name: cssload-rotate135;
-webkit-animation-name: cssload-rotate135;
-moz-animation-name: cssload-rotate135;
}
.cssload-loader .cssload-side:nth-child(1) {
top: 17.142135623731px;
left: 34.284271247462px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(2) {
top: 29.213203431093px;
left: 29.213203431093px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(3) {
top: 34.284271247462px;
left: 17.142135623731px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(4) {
top: 29.213203431093px;
left: 5.0710678163691px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(5) {
top: 17.142135623731px;
left: 0px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(6) {
top: 5.0710678163691px;
left: 5.0710678163691px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(7) {
top: 0px;
left: 17.142135623731px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
.cssload-loader .cssload-side:nth-child(8) {
top: 5.0710678163691px;
left: 29.213203431093px;
margin-left: -2px;
margin-top: -7px;
animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
}
#keyframes cssload-rotate0 {
0% {
transform: rotate(0deg);
}
60% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
#-o-keyframes cssload-rotate0 {
0% {
-o-transform: rotate(0deg);
}
60% {
-o-transform: rotate(180deg);
}
100% {
-o-transform: rotate(180deg);
}
}
#-ms-keyframes cssload-rotate0 {
0% {
-ms-transform: rotate(0deg);
}
60% {
-ms-transform: rotate(180deg);
}
100% {
-ms-transform: rotate(180deg);
}
}
#-webkit-keyframes cssload-rotate0 {
0% {
-webkit-transform: rotate(0deg);
}
60% {
-webkit-transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
#-moz-keyframes cssload-rotate0 {
0% {
-moz-transform: rotate(0deg);
}
60% {
-moz-transform: rotate(180deg);
}
100% {
-moz-transform: rotate(180deg);
}
}
#keyframes cssload-rotate90 {
0% {
transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-o-keyframes cssload-rotate90 {
0% {
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-ms-keyframes cssload-rotate90 {
0% {
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-webkit-keyframes cssload-rotate90 {
0% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#-moz-keyframes cssload-rotate90 {
0% {
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
60% {
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-moz-transform: rotate(270deg);
transform: rotate(270deg);
}
}
#keyframes cssload-rotate45 {
0% {
transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-o-keyframes cssload-rotate45 {
0% {
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-ms-keyframes cssload-rotate45 {
0% {
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-webkit-keyframes cssload-rotate45 {
0% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#-moz-keyframes cssload-rotate45 {
0% {
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
60% {
-moz-transform: rotate(225deg);
transform: rotate(225deg);
}
100% {
-moz-transform: rotate(225deg);
transform: rotate(225deg);
}
}
#keyframes cssload-rotate135 {
0% {
transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-o-keyframes cssload-rotate135 {
0% {
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-o-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-ms-keyframes cssload-rotate135 {
0% {
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-ms-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-webkit-keyframes cssload-rotate135 {
0% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#-moz-keyframes cssload-rotate135 {
0% {
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
60% {
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
}
#keyframes cssload-loader {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes cssload-loader {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes cssload-loader {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes cssload-loader {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<?php
get_header();
get_template_part('index', 'banner');
?>
<!-- Blog Full Width Section -->
<div class="blog-section">
<div class="container">
<div class="row">
<!--Blog Area-->
<div class="<?php elitepress_post_layout_class(); ?>" >
<?php get_template_part('content',''); ?>
<?php comments_template('',true); ?>
</div>
<!--/Blog Area-->
<div class="preloader" style="display: block;">
<div class="cssload-loader" style="display: block;">
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
<div class="cssload-side"></div>
</div>
</div>
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
<!-- /Blog Full Width Section -->
A simple solution using a FontAwesome spinner. Colors used are for visualization only.
$(".spinner").delay(1400).fadeOut();
header,
nav,
footer {
width: 100%;
height: 50px;
}
header {
background-color: red;
}
nav {
background-color: blue;
}
footer {
background-color: green;
}
.content {
width: 100%;
height: 200px;
position: relative;
}
.spinner {
width: 100%;
height: 100%;
background-color: purple;
text-align: center;
display: table;
}
.spinner i {
display: table-cell;
vertical-align: middle;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<header></header>
<nav></nav>
<div class="content">
<div class="spinner"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>
</div>
<footer></footer>
I have a CSS animation which goes from Visible to hidden and solid to transparent at the same time. My problem is, this is an animation which I need to display when a button is clicked. How do I trigger the event on click, when the actual hiding and fading is performed by CSS and not jQuery? For example, when Div 'One' is clicked, I want the overlay to play once. Same when the other divs are clicked. I can't seem to work it out, and help would be great!
$(".btn").click(function() {
var el = $(".overlay"),
newone = el.clone(true);
el.before(newone);
$("." + el.attr("class") + ":last").remove();
});
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: table;
background-color:rgb(39, 174, 96);
z-index: 10;
}
h1.thank-you-message { font-size:12.0rem;display: table-cell; color:#fff; text-align: center;
vertical-align: middle;-webkit-perspective: 1000;-webkit-font-smoothing: antialiased;}
.animated-thank-you {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOutScale {
0% {visibility:visible; opacity: 1;transform: scale(1); /* CSS3 */
-moz-transform: scale(1); /* Firefox */
-webkit-transform: scale(1); /* Webkit */
-o-transform: scale(1); /* Opera */
-ms-transform: scale(1); /* IE 9 */}
40% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */
-moz-transform: scale(0.75); /* Firefox */
-webkit-transform: scale(0.75); /* Webkit */
-o-transform: scale(0.75); /* Opera */
-ms-transform: scale(0.75); /* IE 9 */}
60% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */
-moz-transform: scale(0.75); /* Firefox */
-webkit-transform: scale(0.75); /* Webkit */
-o-transform: scale(0.75); /* Opera */
-ms-transform: scale(0.75); /* IE 9 */}
100% {visibility:hidden; opacity: 0;
transform: -moz-transform: scale(0.5); /* Firefox */
-webkit-transform: scale(0.5); /* Webkit */
-o-transform: scale(0.5); /* Opera */
-ms-transform: scale(0.5); /* IE 9 */}
}
#keyframes fadeOutScale {
0% {visibility:visible; opacity: 1; transform: scale(1);}
40% {opacity: 1;transform: scale(0.75);}
60% {opacity: 1;transform: scale(0.75);}
100% {visibility:hidden;opacity: 0; transform: scale(0.5);}
}
.fadeOutScale {
-webkit-animation-name: fadeOutScale;
animation-name: fadeOutScale;
}
.animated-fade-out {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOut {
0% {visibility:visible; opacity: 1;}
40% {opacity: 1;}
60% {opacity: 1;}
100% {visibility:hidden;opacity: 0;}
}
#keyframes fadeOut {
0% {visibility:visible; opacity: 1;}
40% {opacity: 1;}
60% {opacity: 1;}
100% {visibility:hidden;opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
<div class="overlay animated-fade-out fadeOut"><h1 class="thank-you-message animated-thank-you fadeOutScale">Thank You</h1></div>
<div class="btn" style="height:20px;">ONE</div>
<div class="btn" style="height:20px;">two</div>
<div class="btn" style="height:20px;">three</div>
function runAnimation () {
$('.overlay').removeClass('animated-fade-out fadeOut');
$('.overlay h1').removeClass('fadeOutScale');
setTimeout(function() {
$('.overlay').addClass('animated-fade-out fadeOut');
$('.overlay h1').addClass('fadeOutScale');
});
}
$(runAnimation);
$('#one').click(runAnimation);
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: table;
background-color:rgb(39, 174, 96);
z-index: 10;
}
h1.thank-you-message { font-size:12.0rem;display: table-cell; color:#fff; text-align: center;
vertical-align: middle;-webkit-perspective: 1000;-webkit-font-smoothing: antialiased;}
.animated-thank-you {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOutScale {
0% {visibility:visible; opacity: 1;transform: scale(1); /* CSS3 */
-moz-transform: scale(1); /* Firefox */
-webkit-transform: scale(1); /* Webkit */
-o-transform: scale(1); /* Opera */
-ms-transform: scale(1); /* IE 9 */}
40% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */
-moz-transform: scale(0.75); /* Firefox */
-webkit-transform: scale(0.75); /* Webkit */
-o-transform: scale(0.75); /* Opera */
-ms-transform: scale(0.75); /* IE 9 */}
60% {opacity: 1;transform: transform: scale(0.75); /* CSS3 */
-moz-transform: scale(0.75); /* Firefox */
-webkit-transform: scale(0.75); /* Webkit */
-o-transform: scale(0.75); /* Opera */
-ms-transform: scale(0.75); /* IE 9 */}
100% {visibility:hidden; opacity: 0;
transform: -moz-transform: scale(0.5); /* Firefox */
-webkit-transform: scale(0.5); /* Webkit */
-o-transform: scale(0.5); /* Opera */
-ms-transform: scale(0.5); /* IE 9 */}
}
#keyframes fadeOutScale {
0% {visibility:visible; opacity: 1; transform: scale(1);}
40% {opacity: 1;transform: scale(0.75);}
60% {opacity: 1;transform: scale(0.75);}
100% {visibility:hidden;opacity: 0; transform: scale(0.5);}
}
.fadeOutScale {
-webkit-animation-name: fadeOutScale;
animation-name: fadeOutScale;
}
.animated-fade-out {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOut {
0% {visibility:visible; opacity: 1;}
40% {opacity: 1;}
60% {opacity: 1;}
100% {visibility:hidden;opacity: 0;}
}
#keyframes fadeOut {
0% {visibility:visible; opacity: 1;}
40% {opacity: 1;}
60% {opacity: 1;}
100% {visibility:hidden;opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay"><h1 class="thank-you-message animated-thank-you">Thank You</h1></div>
<div id="one" style="height:20px;">ONE</div>
<div id="two" style="height:20px;">two</div>
<div id="three" style="height:20px;">three</div>
$(".btn").click(function() {
var $elOvl = $('.overlay'),
$elThx = $('.thank-you-message');
function addAnimationClasses() {
$elOvl.addClass('fadeOut');
$elThx.addClass('fadeOutScale');
}
$elOvl.removeClass('fadeOut');
$elThx.removeClass('fadeOutScale');
/*
We need to add classes AFTER they have been removed,
so we postpone the adding of classes to the next frame with the next line.
*/
setTimeout(addAnimationClasses, 0);
});
.btn {
background: #3c9;
margin: 9px 0;
padding: 3px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: table;
background-color: rgb(39, 174, 96);
z-index: 10;
}
h1.thank-you-message {
font-size: 12.0rem;
display: table-cell;
color: #fff;
text-align: center;
vertical-align: middle;
-webkit-perspective: 1000;
-webkit-font-smoothing: antialiased;
}
.animated-thank-you {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOutScale {
0% {
visibility: visible;
opacity: 1;
transform: scale(1);
/* CSS3 */
-moz-transform: scale(1);
/* Firefox */
-webkit-transform: scale(1);
/* Webkit */
-o-transform: scale(1);
/* Opera */
-ms-transform: scale(1);
/* IE 9 */
}
40% {
opacity: 1;
transform: transform: scale(0.75);
/* CSS3 */
-moz-transform: scale(0.75);
/* Firefox */
-webkit-transform: scale(0.75);
/* Webkit */
-o-transform: scale(0.75);
/* Opera */
-ms-transform: scale(0.75);
/* IE 9 */
}
60% {
opacity: 1;
transform: transform: scale(0.75);
/* CSS3 */
-moz-transform: scale(0.75);
/* Firefox */
-webkit-transform: scale(0.75);
/* Webkit */
-o-transform: scale(0.75);
/* Opera */
-ms-transform: scale(0.75);
/* IE 9 */
}
100% {
visibility: hidden;
opacity: 0;
transform: -moz-transform: scale(0.5);
/* Firefox */
-webkit-transform: scale(0.5);
/* Webkit */
-o-transform: scale(0.5);
/* Opera */
-ms-transform: scale(0.5);
/* IE 9 */
}
}
#keyframes fadeOutScale {
0% {
visibility: visible;
opacity: 1;
transform: scale(1);
}
40% {
opacity: 1;
transform: scale(0.75);
}
60% {
opacity: 1;
transform: scale(0.75);
}
100% {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
}
.fadeOutScale {
-webkit-animation-name: fadeOutScale;
animation-name: fadeOutScale;
}
.animated-fade-out {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
#-webkit-keyframes fadeOut {
0% {
visibility: visible;
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
visibility: hidden;
opacity: 0;
}
}
#keyframes fadeOut {
0% {
visibility: visible;
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
visibility: hidden;
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="overlay animated-fade-out fadeOut">
<h1 class="thank-you-message animated-thank-you fadeOutScale">Thank You</h1>
</div>
<div class="btn">ONE</div>
<div class="btn">two</div>
<div class="btn">three</div>
To start an animation on an element, you need to add a class to it. In your case fadeOut and fadeOutScale.
If you only want the animation to start on a click, you need to remove both your animation classes from your animated elements, so the animation doesn't start at load.
<div class="overlay animated-fade-out">
<h1 class="thank-you-message animated-thank-you">Thank You</h1>
</div>
<div class="btn" style="height:20px;">ONE</div>
<div class="btn" style="height:20px;">two</div>
<div class="btn" style="height:20px;">three</div>
And to start the animation, you need to add classes to your animated elements and later remove them, so you can later add them again, to start the animation again.
$(".btn").click(function() {
$(".overlay").addClass("fadeOut").one("animationend", function() {
$(this).removeClass("fadeOut").find(".thank-you-message").removeClass("fadeOutScale");
}).find(".thank-you-message").addClass("fadeOutScale");
});
It is not required to clone the overlay div for every click on btn div. Instead, just remove the classes applied for overlay div and h1 tag, and add the classes back after a small delay.
The script will look like:
$(".btn").click(function() {
$("#overlay").removeClass("overlay animated-fade-out fadeOut").hide();
$("#overlay h1").removeClass("thank-you-message animated-thank-you fadeOutScale");
setTimeout(function(){
$("#overlay").css('display','').addClass("overlay animated-fade-out fadeOut");
$("#overlay h1").addClass("thank-you-message animated-thank-you fadeOutScale");
},1);
});
See the code here:
https://jsfiddle.net/code/
Result here:
https://jsfiddle.net/result/
I have page with form, that loads quite long after submit. That is why I decide to place spinner over button.
Instead if submit button I have div, that make:
$submit_btn.click(function(e){
if ($submit_btn.attr("data-send") == "yes"){
e.preventDefault();
}
else {
$('#reg').html('<div id="spin_reg" class="spinner-icon"></div>');
$new_try_now.submit();
}
});
In div spinner I have CSS3 animation.
Problem is that animation works well in Chrome, but in Safari it doesn't start.
I think the problem is that Safari kill all processes on page.
How I can avoid it without AJAX?
Edit:
Animation:
#-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
#-moz-keyframes nprogress-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
#-o-keyframes nprogress-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
#-ms-keyframes nprogress-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
#keyframes nprogress-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}
.spinner-icon {
display: block;
width: 16px;
height: 16px;
border: solid 2px transparent;
border-top-color: #158FD2;
border-left-color: #158FD2;
border-radius: 100%;
-webkit-animation: nprogress-spinner 900ms linear infinite;
-moz-animation: nprogress-spinner 900ms linear infinite;
-ms-animation: nprogress-spinner 900ms linear infinite;
-o-animation: nprogress-spinner 900ms linear infinite;
animation: nprogress-spinner 900ms linear infinite;
}
A bit late to answer this, but may still help somebody. :)
Safari stops running scripts/gifs and etc. after submit. You need to submit the form after the spinner is shown already.
$('#spinner').show(function() {
$('#form').submit();
});
In my case #spinner was already rendered with style='display:none'.
If you don't want to render it before you need it, you can add display:none to your #spin_reg CSS, and then write JS like this:
$('#reg')
.html('<div id="spin_reg" class="spinner-icon"></div>')
.show(function() { $new_try_now.submit(); });
How to put an animation in x and y coordinates object on the onclick function in Javascript?
http://codepen.io/plas05/pen/OVeeLv
Hi man here is a solution : https://jsfiddle.net/leojavier/4f5z3c62/
Use css animation instead, since the GPU takes care of your CSS animation, is less likely to have flickering... is better for performace...
function CreateDiv(elm, id, bgcolor, w, h) {
var elm = document.createElement(elm);
elm.id = id;
elm.style.backgroundColor = bgcolor;
elm.style.width = w;
elm.style.height = h;
this.postXY = function(pos, posX, posY) {
elm.style.position = pos;
elm.style.left = posX;
elm.style.top = posY;
};
document.getElementsByTagName('body')[0].appendChild(elm);
};
var b1 = new CreateDiv('div', 'box', '#999', '50px', '50px'),
bx = document.getElementById("box"),
bt = document.body.offsetHeight / 2 +"px",
bl = document.body.offsetWidth / 2 +"px";
b1.postXY('absolute', bl, bt);
this.onclick= function(e) {
Move(e);
};
function Move(evt) {
console.log(evt.target)
evt.target.className = "move"
};
CSS
#box {
display:block;
font-size:12px;
line-height:19px;
cursor:pointer;
}
.move {
-moz-animation: animation 0.4s;
-o-animation: animation 0.4s;
-webkit-animation: animation 0.4s;
animation: animation 0.4s;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes animation {
from {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
}
#-moz-keyframes animation {
from {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
}
#-webkit-keyframes animation {
from {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-moz-transform: translateX(-250px);
-ms-transform: translateX(-250px);
-o-transform: translateX(-250px);
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
}
https://jsfiddle.net/leojavier/4f5z3c62/
Just add a transition to the box. Forked demo
transition: all 0.3s;
To break down what im trying to achieve. As you scroll down to a certain div the animation is called and takes place. The CSS is working fine so it slides in nicely as it should. The js is being ignored no matter where I place it so the trigger happens as the page loads and not when it hits the div.
So here is my code...
<script>
$(window).scroll(function() {
$('#thedevimage').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+1) {
$(this).addClass("slideRight");
}
});
});
</script>
Here is the html...
<div class="thedev">
<div class="left">
<div id="thedevimage" class="slideRight"><img src="images/xcode.png" style="width:100%;" /></div>
</div></div>
And the CSS...
#thedevimage{
width: 80%;
visibility: hidden;
}
.slideRight{
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideRight {
0% {
-webkit-transform: translateX(-150%);
}
50%{
-webkit-transform: translateX(8%);
}
65%{
-webkit-transform: translateX(-4%);
}
80%{
-webkit-transform: translateX(4%);
}
95%{
-webkit-transform: translateX(-2%);
}
100% {
-webkit-transform: translateX(0%);
}
}