I have the following page (see image)
When I click the red button, I want a div to animate when it shows to the user. However, I want the animation to come from the button. Right now the animation comes from the center of the page.
Here's the code I have
#keyframes fadeInScale {
0%{
opacity:0;
transform: scale(0.5);
}
100%{
opacity:1;
transform: scale(1);
}
}
#keyframes fadeOutScale {
0%{
opacity:1;
transform: scale(1);
}
100%{
opacity:0;
transform: scale(0.5);
}
}
.overlay {
position: absolute;
top: 0;
z-index: 500;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
}
.fade-scale-in {
display: block;
animation: fadeInScale 0.3s 1 ease-out;
}
.fade-scale-out {
display: block;
animation: fadeOutScale 0.3s 1 ease-out;
}
When I click on the red circle, the user sees an overlay page (which is actually a div with class overlay that is absolutely positioned). I add fade-scale-in class to the div (with class overlay). The div then transitions from the center of the screen and grows to fit the user's screen. I want it so that the div transitions from the red circle. Can I use transforms to make this happen?
Here's the code. As you notice, when you click on the yellow circle, the div animates from the center and not from the yellow circle:
https://jsfiddle.net/e4g71y4m/3/
You can do this by adding transform-origin: top left; to the .overlay element. (Don't forget the prefixes (-webkit, -moz etc.)
var overlay$ = $('.overlay');
overlay$.bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function(e) {
console.debug('test');
if (e.animationName !== undefined && e.animationName == "fadeOutScale") {
overlay$.addClass('hide');
} else if (e.originalEvent.animationName !== undefined && e.originalEvent.animationName == "fadeOutScale") {
overlay$.addClass('hide');
}
});
$('.click').on('click', function() {
overlay$.removeClass('hide').addClass('fade-scale-in');
});
$('.click-again').on('click', function() {
overlay$.removeClass('hide').addClass('fade-scale-out');
});
#keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes fadeOutScale {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.5);
}
}
.hide {
display: none;
}
.overlay {
position: absolute;
top: 0;
z-index: 500;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
background: red;
transform-origin: top left;
}
.click {
background: yellow;
border-radius: 50%;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
cursor: pointer;
}
.fade-scale-in {
display: block;
animation: fadeInScale 0.3s 1 ease-out;
}
.fade-scale-out {
display: block;
animation: fadeOutScale 0.3s 1 ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">Click me</div>
<div class="overlay hide">
Test
<div class="click-again">Click me again</div>
</div>
Related
just a quick question regarding animated elements in React.js - I have noticed that when trying to make use of the animation-delay property in CSS, that React does not seem to apply this rule at all for some reason.
For example, I am trying to make a basic loading component, which just has a series of basic circles moving about in sequence, the CSS for which is below:
.--loaderContainer {
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%), translateY(-50%);
width: 4rem;
height: 4rem;
}
.--loaderContainer:nth-child(n) {
width: 1rem;
height: 1rem;
border-radius: 9999px;
margin: 0;
padding: 0;
position: absolute;
animation-name: spin;
animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.--loaderContainer:first-child {
background-color: red;
transform: rotate(270deg);
animation-delay: -1.5s;
}
.--loaderContainer:nth-child(2) {
background-color: blue;
transform: rotate(180deg);
animation-delay: -1s;
}
.--loaderContainer:nth-child(3) {
background-color: green;
transform: rotate(90deg);
animation-delay: -0.5s;
}
.--loaderContainer:nth-child(4) {
background-color: yellow;
}
#keyframes spin {
0%,
100% {
transform: translate(0);
}
25% {
transform: translate(160%);
}
50% {
transform: translate(160%, 160%);
}
75% {
transform: translate(0, 160%);
}
}
As far as I can tell, this should stagger each of the child elements in sequence, performing the same animation but at different times. However, for some reason, React simply plays the animation, with no delay whatsoever and has all four elements animate at the exact same time.
It seems like a really basic issue to be having and while I have looked up a variety of answers, I just can't seem to find any concrete solutions, so would be super appreciative for any help. Thanks!
If all four circles are seen, I think this animation should be working properly.
The negative animation-delay values ensures that four circles start at different points of the animation, rather than putting an actual delay.
More about animation-delay
Without it, they will start at same point and move together while stacking with each other, resulting in only one circle is seen (the last yellow circle since it's on top of stack).
Here is a basic example for testing the effect of animation-delay by toggling it on and off for all the circles, it can run with the "run code snippet" button below.
Hope it will help.
const btn = document.querySelector("button");
const loaders = document.querySelectorAll(".--loaderContainer");
btn.addEventListener("click", () => {
loaders.forEach((loader) => loader.classList.toggle("no-delay"));
btn.textContent = loaders[0].classList.contains("no-delay")
? "turn delay on"
: "turn delay off";
});
.--loaderContainer {
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%), translateY(-50%);
width: 4rem;
height: 4rem;
}
.--loaderContainer:nth-child(n) {
width: 1rem;
height: 1rem;
border-radius: 9999px;
margin: 0;
padding: 0;
position: absolute;
animation-name: spin;
animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.--loaderContainer:first-child {
background-color: red;
transform: rotate(270deg);
animation-delay: -1.5s;
}
.--loaderContainer:nth-child(2) {
background-color: blue;
transform: rotate(180deg);
animation-delay: -1s;
}
.--loaderContainer:nth-child(3) {
background-color: green;
transform: rotate(90deg);
animation-delay: -0.5s;
}
.--loaderContainer:nth-child(4) {
background-color: yellow;
}
#keyframes spin {
0%,
100% {
transform: translate(0);
}
25% {
transform: translate(160%);
}
50% {
transform: translate(160%, 160%);
}
75% {
transform: translate(0, 160%);
}
}
button {
text-transform: uppercase;
padding: 6px;
}
section {
width: 100px;
height: 100px;
position: relative;
}
div.--loaderContainer.no-delay:nth-child(n) {
animation-delay: 0s;
opacity: 0.8;
}
body {
background-color: #aaa;
}
<button>turn delay off</button>
<section>
<div class="--loaderContainer"></div>
<div class="--loaderContainer"></div>
<div class="--loaderContainer"></div>
<div class="--loaderContainer"></div>
</section>
I have created a ripple full page loader. I'm trying to create the one like here.
I want the code to be simple with no plugins ideally.
I can load the page preloader but am wondering how I get the loading page to disappear once the main page has loaded? The page just will not fade! Have researched and tried all sorts of methods.
This is the code so far:
// Page loading animation
$(window).on('load', function() {
if ($('.cover').length) {
$('.cover').parallax({
imageSrc: $('.cover').data('image'),
zIndex: '1'
});
}
$("#preloader").animate({
'opacity': '0'
}, 600, function() {
setTimeout(function() {
$("#preloader").css("visibility", "hidden").fadeOut();
}, 300);
});
});
#preloader {
overflow: hidden;
background-color: #fb5849;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 99999;
color: #fff;
}
#preloader .jumper {
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
margin: auto;
width: 50px;
height: 50px;
}
#preloader .jumper>div {
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
opacity: 0;
width: 50px;
height: 50px;
-webkit-animation: jumper 1s 0s linear infinite;
animation: jumper 1s 0s linear infinite;
}
#preloader .jumper>div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
#preloader .jumper>div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
#-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>
You can do it as below, using vanilla JavaScript. You can adapt it for jQuery. Also you can remove that setTimout, added just for testing purpose.
window.addEventListener("load", () => {
setTimeout(() => {
document.getElementById("preloader").classList.add("hide");
}, 1000);
});
#preloader {
overflow: hidden;
background-color: #fb5849;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 99999;
color: #fff;
opacity: 1;
transition: opacity 1s;
}
#preloader.hide {
opacity: 0;
pointer-events: none;
}
#preloader .jumper {
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
margin: auto;
width: 50px;
height: 50px;
}
#preloader .jumper > div {
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
opacity: 0;
width: 50px;
height: 50px;
-webkit-animation: jumper 1s 0s linear infinite;
animation: jumper 1s 0s linear infinite;
}
#preloader .jumper > div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
#preloader .jumper > div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
#-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>
I want to add my beating animation only to the text between arrows (arrows shouldn't have beating).
But unfortunately I'm unable to find the reason why the animation is not working (the heart class which contains the animation is added to the container of text but no animation is visible).
How can I fix this?
setTimeout(() => prepareLabelShow("This is the caption"), 2500);
const prepareLabel = document.querySelector(".prepareLabel");
function prepareLabelShow(text, state) {
function startBeating() {
const prepareLabelGroup = document.getElementById("prepare-label-group");
prepareLabelGroup.classList.add("heart");
}
prepareLabel.innerHTML = `<span class="right-arrow arrow">‹</span><div style="display:inline" id="prepare-label-group">${text}</div><span class="left-arrow arrow">›</span>`;
startBeating();
prepareLabel.classList.add("prepareLabelShow");
prepareLabel.classList.remove("prepareLabelHide");
} // end of prepareLabelShow function
.prepare-label-container {
position: absolute;
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
top: 68.5vh;
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/*outline: 0.1vw dashed orange;*/
}
.prepareLabel {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
color: #f8f7fa;
opacity: 0;
margin: 0 auto;
}
.prepareLabelShow {
animation: prepareLabelAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
#-webkit-keyframes prepareLabelAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
.heart {
animation: beat .5s infinite alternate;
}
#keyframes beat {
0% { opacity:1; transform: scale(1); }
100% { opacity:1; transform: scale(0.8); }
}
.arrow {
/*color: #e9e1f2;
font-size: 1.2vw;*/
color: #ff9900;
font-size: 1.3vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
<div class ="prepare-label-container">
<p class="prepareLabel"></p>
</div>
I did not simplified the code in purpose.
The desired result is to see the beating animation in the text inside two arrows.
I am using Python and Django to modify a website, I'm using bootstrap 4 as well.
I am attempting to change the pre-loaded spinner currently in use (the typical circle spinner).
I have entered the preloader within my html file, my css file, and made a custom.js file to support the loader yet when I refresh the page the loader shows the standard circle. (I have deleted the previous spinner files and style code but for some reason it still shows when I use "div id=preloader"
Here is my preloader css style.
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f5f5f5;
/* change if the mask should be a color other than white */
z-index: 1000;
/* makes sure it stays on top */
}
.pre-container {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
.spinner {
width: 40px;
height: 40px;
position: relative;
margin: 100px auto;
}
.double-bounce1,
.double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #53dd6c;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
#keyframes bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
Here is the custom js file
$(window).load(function () {
// preloader
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(550).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(550).css({
'overflow': 'visible'
});
});
here is my preloader tag in my html file
<div id="preloader">
<div class="pre-container">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
There are no error message but I want the bounce to show.
I have been trying to fade out a CSS3 preloader with jQuery. I have been trying to stop the animation (which is a box rotating), and then fade in a letter inside the box then, have them both fade out, the letter fading out a little later than the box. I have had the problem where the letter fades in way later than I want it to and when it comes on if fades out really fast. Here is the code:
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow');
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
});
//]]>
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #2f2f2f;
}
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background-color: #2f2f2f;
}
.loader {
display: block;
width: 60px;
height: 60px;
position: fixed;
border: 5px solid #d5b317;
top: 50%;
left:50%;
-webkit-animation: loader 2s infinite ease;
z-index: -10;
overflow: hidden;
margin-left: -29px
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #d5b317;
-webkit-animation: loader-inner 2s infinite ease-in;
z-index: -10;
}
#font-face {
font-family: 'Adobe Gurmukhi';
src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}
.letter {
display:hidden;
color: #f7d11e;
font-family: 'Adobe Gurmukhi';
font-size: 70px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -19px;
z-index: -9;
}
#-webkit-keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<!--preloader-->
<div class="preloader">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<span><p class="letter">ਅ</p></span>
The z-index of .preloader (99999) is higher than that of .letter (-9). That delay you are experiencing is the delay until .preloader fades out and thus reveals .letter. As a quick fix I made the z-index of .letter higher than that of .preloader and that delay is gone.
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow');
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
});
//]]>
body, html {
height: 100%;
text-align: center;
}
body {
background-color: #2f2f2f;
}
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background-color: #2f2f2f;
}
.loader {
display: block;
width: 60px;
height: 60px;
position: fixed;
border: 5px solid #d5b317;
top: 50%;
left:50%;
-webkit-animation: loader 2s infinite ease;
z-index: -10;
overflow: hidden;
margin-left: -29px
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #d5b317;
-webkit-animation: loader-inner 2s infinite ease-in;
z-index: -10;
}
#font-face {
font-family: 'Adobe Gurmukhi';
src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}
.letter {
display:hidden;
color: #f7d11e;
font-family: 'Adobe Gurmukhi';
font-size: 70px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -17px;
margin-left: -19px;
z-index: 999999;
}
#-webkit-keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<!--preloader-->
<div class="preloader">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<span><p class="letter">ਅ</p></span>
what you are doing is first you use delay that means you want to call fadeOut after some delay and you given the delay time 2 sec and its working correctly as expected.
Its started fading out after 2 sec.
I think its working as expected if you want to fade it out little soon then you have to reduce the delay time of remove delay.
Hope this may help you.
Thanks!!
you can try the callback function
$('.letter').delay(100).fadeIn('slow', function(){
// function called after fade in finished
setTimeout(function(){
$('.preloader').fadeOut('slow');
$('.letter').fadeOut(900);
$('body').css({'overflow':'visible'});
}, 2600);
});
Replace your code with this, both will fadeOut at same time.
// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut('fast');