I would like to know if it is possible to move div along the circular path with fixed angle. E.g. moving div only 45 degrees of circular path and than make it to come back to starting point, like effect similar to pendulum.
Hope, that attached picture will make sense to what I meant.
Many thanks for all help.
Looking forward,
As per your updated requirement (that the object itself should always be vertical while rotating), I have modified my previous code.
There may be another approach but I could think of this only at the moment. Here, I have wrapped our original 'ball' element inside another div. Now, the outer div does the normal pendulum animation. But, in addition, the inner object also does a counter-rotating animation which keeps it vertically straight at all points during the animation.
Please notice that the inner object has its transform-origin as default which is center center, because it needs to rotate around its own axis only.
#container
{
background-color: #777;
border-radius: 50%;
height: 20px;
margin: 0 auto;
margin-top: 150px;
position: relative;
width: 20px;
}
#ball
{
animation: swing 1s ease 0s infinite;
background-color: green;
height: 50px;
left: -15px;
position: absolute;
top: -150px;
transform-origin: center 150px;
width: 50px;
}
#keyframes swing{
0%{transform: rotate(-22.5deg);}
50%{transform: rotate(22.5deg);}
100%{transform: rotate(-22.5deg);}
}
#main-content
{
animation: innerswing 1s ease 0s infinite;
background-color: red;
display: block;
height: 100%;
width: 100%;
}
#keyframes innerswing{
0%{transform: rotate(22.5deg);}
50%{transform: rotate(-22.5deg);}
100%{transform: rotate(22.5deg);}
}
<div id="container">
<div id="ball">
<div id="main-content"></div>
</div>
</div>
You can do this using css animation alone. First you should shift the transform origin to a point that will server as the center of the pendulum. Now, you can simply define the angles for rotation as being 45 degree apart. Please check below code as an example:
#container
{
background-color: #777;
border-radius: 50%;
height: 20px;
margin: 0 auto;
margin-top: 150px;
position: relative;
width: 20px;
}
#ball
{
animation: swing 1s ease 0s infinite;
background-color: orange;
border-radius: 50%;
height: 50px;
left: -15px;
position: absolute;
top: -150px;
transform-origin: center 150px;
width: 50px;
}
#keyframes swing{
0%{transform: rotate(-22.5deg);}
50%{transform: rotate(22.5deg);}
100%{transform: rotate(-22.5deg);}
}
<div id="container">
<div id="ball"></div>
</div>
Related
General info
I'm working on a Bingo game. Currently I'm trying to create a CSS rolling ball animation. The idea is to simulate a ball dropping from the wheel and making it roll from right to left.
The problem
The animation is working fine. But the "drop in" position is relative to the div. As a consequence of this, this position keeps moving right 75 pixels on each new ball dropping in.
Solutions I've tried
- Give the balls an absolute position. This solves the issue, but each ball will cover the previous balls due to the keyframe ending at left: 0%. This is not desirable.
- Lookup Javascript solutions to see if I can somehow change the keyframe to end with +75px on the previous ball. Unfortunately it seems impossible to manipulate animations this way, or I was unable to find a way to do it.
So now I'm hoping someone is able to help me find a solution to this problem.
Edit: I didn't tag jQuery because it's not used here, but solutions using jQuery are perfectly fine.
MCVE
const timer = setInterval(rollBall, 2000);
var ballNumber = 1;
function rollBall(){
if(document.getElementById('ball-'+(ballNumber-1))){
document.getElementById('ball-'+(ballNumber-1)).classList.remove('ball-animation');
}
let html = '<div id="ball-'+ballNumber+'" class="ball ball-animation">';
html += '<p class="ball-number">';
html += ballNumber;
html += '</p></div>';
document.getElementById('balls').innerHTML += html;
ballNumber++;
if(ballNumber > 10) {
clearInterval(timer);
document.getElementById('ball-'+(ballNumber-1)).classList.remove('ball-animation');
}
}
.ball {
display: block;
position: relative;
width: 75px;
height: 75px;
background: red;
border-radius: 50%;
background: -webkit-radial-gradient(25px 25px, circle, red, #000);
background: -moz-radial-gradient(25px 25px, circle, red, #000);
background: radial-gradient(25px 25px, circle, red, #000);
/*position: absolute;*/
float: left;
}
.ball-number {
top: -34px;
left: 25px;
font-size: 45px;
color: #fff;
position: absolute;
}
.ball-animation {
-webkit-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
-moz-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
-ms-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
animation: spin 1750ms linear infinite, moveRightToLeft 2s linear;
-webkit-transition: all 1.75s ease;
transition: all 1.75s ease;
}
#keyframes spin {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
#keyframes moveRightToLeft {
0% { top: -50px; left: 200px; }
10% { top: -40px; left: 180px; }
20% { top: -25px; left: 150px; }
30% { top: 0px; left: 100px; }
100% { left: 0%; }
}
<div id="balls"></div>
This is a CSS only solution, using an intermediate div, zone to handle the ball movement .
Since this elements have varying sizes, you can set the keyframes on them to work in percentages, and adjust for a different ending point, while keeping the same origin point.
.container {
width: 600px;
height: 350px;
border: solid 1px red;
position: relative;
}
.zone {
position: absolute;
top: 0px;
right: 0px;
bottom: 40px;
left: 40px;
border: solid 1px green;
animation: move 3s linear infinite;
}
.zone:nth-child(2) {
left: calc(40px * 2);
}
.zone:nth-child(3) {
left: calc(40px * 3);
}
.zone:nth-child(4) {
left: calc(40px * 4);
}
.ball {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: blue;
right: 0px;
position: absolute;
}
#keyframes move {
from {transform: translate(0px, 0px);}
50% {transform: translate(-100px, 100%);}
to {transform: translate(-100%, 100%);}
}
<div class="container">
<div class="zone">
<div class="ball">1</div>
</div>
<div class="zone">
<div class="ball">2</div>
</div>
<div class="zone">
<div class="ball">3</div>
</div>
<div class="zone">
<div class="ball">4</div>
</div>
</div>
I made a div with 2 elements inside: an image and an another div (about). The image is hiding the about div.
Is that possible to make elements which are in the about div clickable when the image disappear with a hover property ?
Thanks in advance !
Also, here's my code but the elements aren't clickable
#logo {
opacity: 1;
visibility: visible;
margin-top: 12.5px;
-webkit-transition: opacity 600ms, visibility 600ms;
-o-transition: opacity 600ms, visibility 600ms;
-moz-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
.blue_border:hover #logo {
opacity: 0;
visibility: hidden;
}
.blue_border {
width: 625px;
height: 625px;
background-image: url("./border.png");
background-repeat: no-repeat;
background-position: 50%;
}
#about {
z-index: -1;
position: relative;
margin-top: -605px;
width: 600px;
height: 600px;
border-radius: 100%;
background-color: #25B8EE;
}
<div class="blue_border">
<img id="logo" src="./logo.png" />
<!-- Img is "on" the about div" -->
<div id="about">
I want to be clicked :-(
</div>
<div class="la-ball-scale-multiple">
<div></div>
<div></div>
<div></div>
</div>
</div>
I don't think I understand it completely, but you cannot click under another element but you can use CSS display: none attr or you do this in a fake way. You can listen to the top element for this and check other conditions on javascript.
As mentioned in the comments, you may can use the pointer-events: none on the overlay to cause it to not receive click events, and allow them to pass through.
function whoWasClicked(e) {
console.log(`${e.target.id} was clicked!`);
};
document.querySelector('#lowerElement').addEventListener('click', whoWasClicked);
document.querySelector('#upperElement').addEventListener('click', whoWasClicked);
#lowerElement {
background-color: rgb(128, 128, 128);
min-width: 25vw;
height: 100px;
text-align: center;
position: absolute;
top: 37vh;
left: 37vw;
z-index: 1;
}
#upperElement {
min-width: 25vw;
height: 100px;
text-align: center;
line-height: 50px;
position: absolute;
top: 37vh;
left: 37vw;
z-index: 2;
pointer-events: none;
}
<div id="lowerElement">Click Me</div>
<div id="upperElement">Overlay</div>
With my current code, I think the z-index: -1; in #about is the problem: #blue_border is an image background and it's upper my "about" div... So I'm trying to find a way to replace that background.
Edit:
Okay. I figured out that the element with z-index: -1; will never be clickable the way I want to.
So I decided to reverse everything: the logo has now the property z-index: -1; and the about div (which is upper now) is hidden until the hover trigger. I also changed my background image by a border.
My code now :
/*Under #about and visible*/
#logo {
z-index: -1;
}
.blue_border {
width: 600px;
height: 600px;
border: 15px solid #71d1f4;
border-radius: 100%;
/*background-image: url("./border.png");
background-repeat: no-repeat;*/
background-position: 50%;
}
/*Hidden first*/
#about {
opacity: 0;
visibility: hidden;
position: relative;
margin-top: -605px;
width: 600px;
height: 600px;
border-radius: 100%;
background-color: #25B8EE;
-webkit-transition: opacity 600ms, visibility 600ms;
-o-transition: opacity 600ms, visibility 600ms;
-moz-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
/*Unhidden on hover*/
.blue_border:hover #about
{
opacity: 1;
visibility: visible;
}
I didn't changed my html
Thanks anyway guys. It was my very first question and I'm glad that some of you already answered me !
I am trying to make this animation. This animation is quite complicated, but all I would like to do is fold a square in half showing the folding animation.
I have visited this website and I tried to use the skew function in order to create the animation.
This is the code I have used so far:
.elementLeft {
display: inline-block;
background-color: #aaaaaa;
height: 100px;
width: 100px;
font-size: 1px;
animation: shakeback 2s infinite;
animation-direction: alternate;
color: white;
}
.elementRight {
display: inline-block;
background-color: #aaaaaa;
height: 100px;
width: 100px;
/* transform: skew(20deg); */
font-size: 1px;
color: white;
animation: shake 2s infinite;
animation-direction: alternate;
}
#keyframes shake {
0% {
transform: skewY(0deg);
}
100% {
transform: skewY(45deg);
}
}
#keyframes shakeback {
0% {
transform: skewY(0deg);
}
100% {
transform: skewY(-45deg);
}
}
body,
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
<div class="elementLeft"></div>
<div class="elementRight">
</div>
However, this is not exactly what I want since the skew function also makes the square too long as I increase the degree. I have been thinking of another way to create this animation, but I am not sure what to do. I also would prefer that only one side folds in rather than both sides folding. This is like in the Google Calendar Icon animation posted above where the top half of the icon stays still whereas the bottom half folds upwards.
edit: I have also noticed that I can rotate a square upwards to form this effect. However, I am still having an issue as the animation does not look as smooth as I would like.
Any help is once again appreciated!
.element {
display: inline-block;
background-color: #000000;
height: 100px;
width: 100px;
}
.elementfold {
/* transform: rotateX(0deg); */
animation: foldup 5s;
display: inline-block;
background-color: #aaaaaa;
height: 100px;
width: 100px;
}
#keyframes foldup {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(180deg) translate(0px, 100px);
}
}
<li>
<div class="element"></div>
</li>
<li>
<div class="elementfold"></div>
</li>
This may be useful. I haven't tried it myself, but I'd look into it.
http://anime-js.com/
Code:
#container {
width: 100px;
height: 100px;
perspective: 300px;
}
.square {
width: 100px;
height: 100px;
background-color: grey;
}
#animation {
animation: anim 2s linear 0s infinite alternate;
transform-origin: 50% 100%;
}
#keyframes anim {
from {transform: rotateX(0deg);}
to {transform: rotateX(-180deg);}
}
<div id="container">
<div class="square" id="animation"></div>
<div class="square"></div>
</div>
Using CSS3's rotateX property and animations, it's pretty easy to create folding squares.
Credit goes to Bálint for the animations!
The above method will need to be slightly tweaked the object is rounded. In the case that the folding animation needs to be applied to a circle or an oval, it can be done by breaking the shape into two shapes; more specifically, the circle would be broken into two semicircles.
The following code shows one solution for this using HTML and LESS (for this reason it will not load on stackoverflow):
#size: 200px;
.origin (#x;
#y) {
-webkit-transform-origin: #x #y;
-moz-transform-origin: #x #y;
-o-transform-origin: #x #y;
transform-origin: #x #y;
}
.red {
background-color: #f24235;
}
.green {
background-color: lightgreen;
}
.top-half {
width: #size;
height: (#size / 2);
border-radius: (#size / 2) (#size / 2) 0 0;
}
.bottom-half {
width: #size;
height: (#size / 2);
border-radius: 0 0 (#size / 2) (#size / 2);
.origin(0, 0);
}
#animation {
animation: anim 2s linear 0s infinite alternate;
// transform-origin: 50% 100%;
}
#container {
width: 100px;
height: 100px;
perspective: 300px;
}
#keyframes anim {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(180deg);
}
}
<div class "container">
<div class="top-half red"></div>
<div class="bottom-half green" id="animation"></div>
</div>
Please follow this link to see the animation. If there are any other efficent ways to do this with a variable size, but through either normal css or js please let me know!
HTML:
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
JS:
$('.button').on('mouseenter', function () {
$('.element').addClass('active');
}).on('mouseleave', function () {
$('.element').removeClass('active');
});
$('.element').on('mouseenter', function () {
$('.element').addClass('active');
}).on('mouseleave', function () {
$('.element').removeClass('active');
});
http://jsfiddle.net/e4p98cwb/1/
When you hover on the black element the blue one enters the screen. After that if you hover for a sec on empty space the blue one starts to escape the screen, but if you hover fast on the empty space that it occupied before two things might happen:
1. The blue one returns fully shown on screen
or
2. Jumps once or twice and proceeds to leave the screen
The same happens on hover and mouseover events as well. Why is this happening and is there a way around this behavior ?
The easiest way to get around any issues with JS is to just let CSS take care of it. If you add this to the :hover state it will work:
.button:hover + .element,
.element:hover {
-webkit-transform: translateX(0);
transform: translateX(0);
}
See below for an implementation. This saves you a ton of JS as well.
.wrap {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
.button{
width: 100px;
height: 50px;
display: block;
background: #333;
}
.element {
position: absolute;
top: 0;
right: 0;
z-index: 99999;
width: 500px;
height: 630px;
background: blue;
-webkit-transform: translateX(630px);
transform: translateX(630px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.button:hover + .element,
.element:hover {
-webkit-transform: translateX(0);
transform: translateX(0);
}
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
Update
The reason this is happening is because the element itself is still occupying the same space. This has to do with translation not actually moving the element, but transforming it. Once you move your cursor off any of the activatable elements, it will retract, but as it's animating it still occupies that same space, making it possible to hover on that space and retrigger the animation. I believe it's because this transform is only fully applied after completing the animation. Let's test this theory:
.wrap {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
.button{
width: 100px;
height: 50px;
display: block;
background: #333;
}
.element {
position: absolute;
top: 0;
right: 0;
z-index: 99999;
width: 500px;
height: 630px;
background: blue;
right: -100%;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.button:hover + .element,
.element:hover {
right: 0;
}
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
In this one we are simply using absolute positioning and the issue goes away, meaning that the tranform is actually causing the element to still occupy the same space. Until animation concludes.
I'm in a tricky situation -- I'm trying to build a sort of realistic flyer, with clickable paper strips at the bottom. Just for a visual reference, something like this: http://static.someecards.com/someecards/images/feed_assets/4d657f7fa4817.jpg
I built the body of the flyer with an empty div, and I absolutely positioned the "paper strips" at the bottom of this div. Then, since I'll want to add a "torn paper" border-image at the bottom of the flyer body, I gave the strips a negative z-index.
Then, in order to cover the torn-paper-border, I positioned an empty, transparent div on the top of them, with a solid-coloured pseudo element that will disappear once the CSS3 animation will be triggered (via JS).
<div class="flyer-body">
<div class="strip"></div> <!-- this will be animated via CSS3 -->
<div class="strip-wrapper"></div> <!-- this is a clone of the "strip" div, but transparent (made for z-index problems with animations). a click on this div will trigger the animation -->
</div><!-- end flyer-body -->
jsFiddle for reference: http://jsfiddle.net/XR7LT/
As you can see, I'm applying a fadeOut() effect to the pseudo element in order to disappear gently. The problem is, the fadeOut() only applies to the first pseudo element, while hiding the others without any effect.
Problem shows on both Chromium and FF browser, Ubuntu Linux 12.10.
Any ideas?
Thanks in advance.
Your CSS is not the same for all elements.
The transitions should not be in both .strappamiX and .strappamiX-wrap,
I removed them from wrap:
.strappami1 {
display: block;
width: 100px;
height: 250px;
background: red;
z-index: -23;
position: absolute;
bottom: -200px;
left: 103px;
transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-webkit-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
}
.strappami1-wrap {
display: block;
position: absolute;
width: 100px;
height: 250px;
bottom: -200px;
left: 103px;
background: transparent;
}
Created a fork of your fiddle here:
http://jsfiddle.net/sn6ZT/1/
I got here after Roise, but you should be able to simplify your solution significantly by leveraging parent child relationships and adding multiple classes.
http://jsfiddle.net/XR7LT/4/
When you have 5 elements that should all have the same behavior, use the same class for all of them, and apply the code to all of them. Then you can add some additional classes to move the additional pieces over a bit.
SIMPLER HTML
<section class="flyer">
<div class="strappami-wrap w0">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w1">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w2">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w3">
<div class="cover"></div>
<div class="strappami"></div>
</div>
<div class="strappami-wrap w4">
<div class="cover"></div>
<div class="strappami"></div>
</div>
</section>
SIMPLER CSS
.flyer {
display: block;
width: 900px;
height: 220px;
background: yellow;
margin: 0 auto;
position: relative;
}
.strappami {
display: block;
width: 100px;
height: 250px;
background: red;
z-index: -23;
position: absolute;
left: 0;
transition: all 2s ease-in;
-moz-transition: all 2s ease-in;
-webkit-transition: all 2s ease-in;
-o-transition: all 2s ease-in;
}
.strappami-wrap {
display: block;
position: absolute;
width: 100px;
height: 250px;
background: transparent;
bottom: -200px;
left: 0px;
}
.strappami-wrap.w1 {
left: 110px
}
.strappami-wrap.w2 {
left: 220px
}
.strappami-wrap.w3 {
left: 330px
}
.strappami-wrap.w4 {
left: 440px
}
.strappami-wrap .cover {
content: '';
display: block;
position: absolute;
width: 100px;
height: 50px;
background: green;
top: 30px;
left: 0px;
}
.strapping {
bottom: -900px;
opacity: 1;
z-index: -200;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}
.strapping-alt {
bottom: -800px;
opacity: 1;
z-index: -200;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}
SIMPLER JS
$(document).ready(function() {
$(".strappami-wrap").on('click', function() {
var r = Math.floor(Math.random()*10);
if (r < 5){
$(this).find(".strappami").addClass('strapping');
} else {
$(this).find(".strappami").addClass('strapping-alt');
}
$(this).find(".cover").fadeOut();
});
});