Smoothness animation between two states - javascript

Ok folks, I really need some help here, it's blowing my mind...
Please take a look at the following example:
https://jsfiddle.net/t0Lahyjy/
HTML:
<div id="exmpl"></div>
<button id="btn">Try it</button>
CSS:
#exmpl {
margin: 100px auto 0 auto;
height: 100px;
width: 10px;
background: #000;
-webkit-animation: anim 3s infinite linear;
animation: anim 3s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
#-webkit-keyframes anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#btn {
margin: 100px auto 0 auto;
display:block;
}
.animationIsOff {
}
JS:
document.getElementById("btn").addEventListener("click", function(){
document.getElementById("btn").className += " animationIsOff";
});
Now look, what I want is... to get the smooth animation from the rotation state of default to the transform: rotate(90deg); when #btn clicked. I wanna do it with adding a new class, say animationIsOff, but there's no smoothness between this two states. IF there's no way to accomplish this smoothness with CSS(by only adding a class with JS), perhaps there's a way to do it with help of JS?
I hope I'm pretty clear to you, otherwise please do ask... I will describe it as I can further.

Related

Activate a preloader only when a button was click in JavaScript

I have a button here And a code for preloader:
Now using JavaScript, I don't want this to load when the page loaded first. Instead I want to load this preloader when I click on the submit button for about 2-3 seconds. So on my Javascript:
submitBtn.addEventListener('ciick', () => {
window.addEventListener('load', function() {
document.querySelector('body').classList.add("loaded")
});
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
background-image: url('https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/1_avatar-512.png');
display: block;
position: relative;
top: 50%;
left: 50%;
width: 120px;
height: 119px;
margin: -75px 0 0 -75px;
border-top-color: white;
border-radius: 100%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<button type="submit" id="submit-btn">Submit</button>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
However, this one did not work. Instead, the loader loads forever and never stops when I load the page. How can I fix this issue and only attain the loading state when the button was click?

How can I trigger a CSS hover from another Div (with complicated attributes)

I'm new to this and hope I'm asking politely/correctly?!
(I have included the code I have so far below.)
I am trying to apply the hover of the '#blueBar' by hovering over the '#spiral' div.
I've tried using CSS, JQuery and Javascript for some time, but to no avail.
The end result is I'd like to have 2 'blueBars' crossing each other behind the Badge.png.
Upon hovering over the 'spiral' I'd like the badge to spin and the 2 'blueBars' increase in scale protruding from behind the badge.png.
Many thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#spiral{
border-radius: 50%;
background-image: url(badge.png);
position: absolute;
top: 50%;
left: 50%;
width: 350px;
height: 350px;
transition:all 1s ease-out;
transform:rotate(0deg) infinite;
-webkit-transform:rotate(0deg) infinite;
-moz-animation: rotate(0deg) infinite;
-ms-animation: rotate(0deg) infinite;
-o-animation: rotate(0deg) infinite;
animation: rotate(0deg) infinite;/* Safari and Chrome */
}
#spiral:hover, #blueBar.hovered {
display: block;
width:350px;
height:350px;
border-radius: 50%;
background-image: url(badge.png);
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#-ms-keyframes spin {
0% {-ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); }
}
#-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
#-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); }
}
#blueBar {
width: 28px;
height: 28px;
background: #25cadb;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#blueBar:hover, .blueBar.hover{
width: 28px;
height: 28px;
background: #25cadb;
-moz-transform: rotate(45deg) scale(1, 10);
-webkit-transform: rotate(45deg) scale(1, 10);
-ms-transform: rotate(45deg) scale(1, 10);
-o-transform: rotate(45deg) scale(1, 10);
transform: rotate(45deg) scale(1, 10);
}
</style>
<meta HTTP-equiv="Content-Type" content="text/HTML; char-set=UTF-8">
<title>Animated Features</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="almost.ico" type="image/x-icon">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family: Georgia, Times, serif">
<center>
<div style="height: 350px"> </div>
<script>
$('#spiral').on('mouseenter mouseleave', function(e) {
$('#blueBar:hover').trigger(e.type);
})
</script>
<div width="800px">
<div id="spiral">
<div id="spiral1">
</div>
</div>
<div id="blueBar" > </div>
</div>
</center>
</body>
</html>
You can use the sibling selector.
#spiral:hover ~ #blueBar {
background: red;
}
#blueBar will become red when #spiral is hovered over.
You can see an example on JSFiddle here. Hover over the "spiral" div and notice that the "blue bar" div becomes red.
If the elements won't always be siblings as in James Monger's answer, you could transfer the CSS in your #blueBar:hover to a class called .hover. Then, in your JQuery you'd write:
$('#spiral').on('mouseenter mouseout', function(){
$('#blueBar').toggleClass('hover');
});
Fiddle: https://jsfiddle.net/xk9ckcrk/2/
I modified the CSS a bit to show more easily what's going on. You should be able to add whatever animations and transformations you want to the .hover class and have it work.

Position Div On Top of Background Image ( covered / repsonsive )

I'm trying to position multiple divs on top of a background image so it makes a cool effect. The main issue is that the website is responsive and so is the image - it's background-size: cover which makes it hard to keep the overlays exactly where they need to be when viewing larger / smaller screens. I've created a crude JSFiddle to show what I mean. In this example I'm am trying to just overlay the animated boxes over the Koala's eyes.
I'm not sure if it's easier to get the coords of where I want the overlays to be and work with that or if I need to work with the window offset. Since it's also centered and when zoomed out it changes position-y and I'm unsure how to even track that being a background image.
Really what I'm hoping for is to get some insight on how to track the exact position of coords on this background image or point me in different direction to solve this issue.
#koala { background: url( 'http://i.imgur.com/1xZ17bk.jpg' ) no-repeat center; background-size: cover; position: relative; width: 100%; height: 768px; }
#leftEye,
#rightEye { width: 20px; height: 20px; background-color: #F00; position: absolute;
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
#leftEye { top: 48%; left: 37%; }
#rightEye { top: 59%; right: 35%; }
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.notneeded { width: 100%; height: 50px; background-color: beige; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="notneeded"></div>
<div id="koala">
<div id="leftEye"></div>
<div id="rightEye"></div>
</div>
<div id="footer" class="notneeded"></div>
A much simpler solution is to use the window width changes to your advantage. So, ordinarily, you would measure the changes in your window sizes and subtract that from the eye's current position. However, because your background is centered, you need to alter that slightly - take the old window position, subtract the new window position and divide the result by two.
I've done this with jQuery.
var leftEye = $('#leftEye');
var rightEye = $('#rightEye');
var oldLeftEyePos = leftEye.position().left;
var oldRightEyePos = rightEye.position().left;
var oldWindowWidth = $(window).width();
$(window).resize(function(){
var newWindowWidth = $(window).width();
leftEye.css({
left: oldLeftEyePos - ((oldWindowWidth - newWindowWidth) / 2)
});
rightEye.css({
left: oldRightEyePos - ((oldWindowWidth - newWindowWidth) / 2)
});
});
Here's an updated jsfiddle with an example;
http://jsfiddle.net/joe5hjr3/10/
Disclaimer: This isn't perfect. It shrinks great, but as you go above a certain size, they start to close in on eachother - but hopefully, this is enough to get you on the right track. Also, it does not work great for zooming out, but works fine for zooming in.
Since you asked for pointing in a direction this is what I would try:
If the #koala-divs height is fixed 768px and width responsive 100% I would try to work with:
background-size: 100% auto;
background-position: center;
I guess now you could calculate the position for the rotating divs relative to the #koala-divs width and the proportion of the background-image.
X-coordinates should be easy once you know the x-coordinates of the eyes relative in the image (for e.g. 40% left and 60% right)
Y-coordinates are a bit trickier I assume. Lets say your image is sized 1200 x 800. Its proportion is 3:2 (12:8 -> 6:4 -> 3:2).
Now you could get the total width of the #koala-div with jquery/javascript and multiply it with 0,666666666666666666666666 (two thirds) to get the actual height of the background image.
From there you can derive the y-coordinates similar to the way i proposed for the x-coordinates. But you need to imagine it to be verticaly cut in half and position in relatively in each half.
I don't know if you can follow my thoughs or even if they are useful. Since I got not enough time today I hope this helps nevertheless...
Have a nice Tuesday!
edit/note:
The image will just cover the div as long as the div is at least as wide as the image... If it gets to small/narrow you will get empty space above and below the image.

Safari animation on form submit

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(); });

Load css element already rotated

I'm trying to create an animation using CSS that will pop up and rotate when the page is loaded. The issue I'm having with is, I need the element to be rotated BEFORE the animation begins.
JSFiddle: http://jsfiddle.net/4o1w01q5/
I can't tell if the issue is with this CSS snippet:
.container {
background:red;
background-image: url(img/2012-04-12_14-06-35_758-1.jpg);
background-position: center;
background-repeat: no-repeat;
padding:240px;
padding-left: 300px;
padding-right: 300px;
padding-top:10px;
-webkit-animation: logo-appear 0.6s, logo-rotate 1.6s;
-moz-animation: logo-appear 0.6s, logo-rotate 1.6s;
animation: logo-appear 0.6s, logo-rotate 1.6s;
}
Or if there is a way to set the rotated positiong with jQuery. Any suggestions?
Edit: To clarify, what I'm trying to do is
Have a div load, rotated 45 degrees
Pop the div (logo-appear)
Rotate the div 45 degrees down (logo-rotate)
Why do I want it like this? I want a diamond-shaped element load and the rotate it to make it a square.
Figured it out. It was a matter of having the rotate happen along with the popping up sequence.
JSFiddle: http://jsfiddle.net/s8hae5dz/ with additional animation
Previous example:
#-webkit-keyframes logo-appear{
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}
20% {
opacity: 1;
-webkit-transform: scale(1.2);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
Currently:
#-webkit-keyframes logo-appear{
0% {
opacity: 0;
-webkit-transform: scale(0.5) rotate(-45deg);
}
20% {
opacity: 1;
-webkit-transform: scale(1.2) rotate(-45deg);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2) rotate(-45deg);
}
100% {
-webkit-transform: scale(1) rotate(-45deg);
}
}

Categories