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.
Related
how will i add the flip animation to a button. The + button on the frontside instead of flipping on hover could be a start.
https://bootsnipp.com/snippets/92xNm
i understand that the animation comes from the
.image-flip:hover .backside,
.image-flip.hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
border-radius: .25rem;
}
.image-flip:hover .frontside,
.image-flip.hover .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
but how could i add this to a click event instead?
im using C# blazor if it changes anything.
Can't you use :active?
I think the better way is to use JS onclick and add/remove class to it.
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.
Hello I've created simple infinite animation using css, but there are a simple problem that I need the animation is loop for ever smoothly.
.rotate{
width:200px;
height:200px;
margin:50px auto;
background-color:#00e95a;
animation-name:rotate;
animation-duration:1s;
animation-iteration-count:infinite;
animation-fill-mode:both;
}
#keyframes rotate {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<div class="rotate">
</div>
Just add animation-timing-function: linear;.
Note: The problem was caused by the default timing state, which is ease.
.rotate {
width: 200px;
height: 200px;
margin: 50px auto;
background-color: #00e95a;
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-fill-mode: both;
animation-timing-function: linear;
}
#keyframes rotate {
from {
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<div class="rotate"></div>
As #Kind user has mentioned you should hard reset animation-timing-function to linear, because the intial value of animation-timing-function is ease.
reference: https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function
So i'm a little new to rails and javascript,
I love the look of this, http://codepen.io/msisto/pen/LntJe
Heres the codepen code:
#-webkit-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate-forever {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loading-spinner {
-webkit-animation-duration: 0.75s;
-moz-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: rotate-forever;
-moz-animation-name: rotate-forever;
animation-name: rotate-forever;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
height: 30px;
width: 30px;
border: 8px solid #ffffff;
border-right-color: transparent;
border-radius: 50%;
display: inline-block;
}
body {
background: #774CFF;
}
.loading-spinner {
position: absolute;
top: 50%;
right: 0;
bottom: 0;
left: 50%;
margin: -15px 0 -15px;
}
<body>
<div class="loading-spinner"></div>
</body>
However i'm not sure how i can get this into my application. I'm wanting to have it so that this spins before each page loads.
Any ideas what i can do? any gems for this or?
Rails 4+ comes with Turbolinks gem.
You use this events to show/hide the loading before page loads.
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(); });