I need to move a element from one offset position to another with animation.
for which i was using
function getOffset(el) {
el = el[0].getBoundingClientRect();
return {
left: el.left + window.scrollX,
top: el.top + window.scrollY
}
}
var _anchorElemPos = getOffset($element)
_animationElement.animate(_targetAnimPos); /*_targetAnimPos is the position where the element has to move.*/
It is working absolutely fine.But now I want the animation without jquery animate() function .
Any help would be appreciated.
Try CSS3 animations. for moving you can use keyframes in CSS3
I hope this can help you.
HTML
<div id="movingObj"></div>
CSS3
#movingObj{
background-color:red;
width: 100px;
height: 100px;
position: absolute;
left: 0px;
-webkit-animation: moving 3s forwards;
animation: moving 3s forwards;
}
#-webkit-keyframes moving {
from {left: 0px;}
to {left: 400px;}
}
#keyframe moving{
from {left: 0px;}
to {left: 400px;}
}
Related
I am trying to animate a diagonal line across the page from one corner to another. The line should be diagonal no matter the format of the screen. I figured (or so I think) that I have to use transform: rotate() in CSS. Using jquery or Javascript, I tried returning and calculating the degree at which the line has to rotate for the given screen format. That argument should be passed to rotate().
I've tried the following with jQuery and Javascript:
<script>
$('#move').css('transform', 'rotate(-' + Math.atan2($(window).width(), $(window).height()) + 'rad)').show();
</script>
or
<script>
document.querySelector('#move').style.transform = Math.atan2($(window).width(), $(window).height())+'rad';
</script>
And with CSS and HTML:
<style>
#move {
width: 0;
height: 4px;
background: red;
position: relative;
animation: mymove 3s;
animation-fill-mode: forwards;
transform-origin: top left;
}
#keyframes mymove {
from {top: 0; transform: rotate(0deg);}
to {width:100%; background-color: blue;}
}
</style>
<body>
<div id="move"></div>
</body>
The code draws a line across the screen, but it is not rotated.
How can that be fixed?
You have to put your <script> to the very bottom of <body>, so the code works after your DOM is loaded.
const move = document.querySelector('#move')
const angle = Math.atan2(document.documentElement.clientHeight, document.documentElement.clientWidth);
const width = document.documentElement.clientWidth / Math.cos(angle);
move.style.setProperty('--a', angle + 'rad');
move.style.setProperty('--w', width + 'px');
html, body, #move {margin:0; padding:0}
#move {
width: 0;
height: 4px;
background: red;
position: relative;
animation: mymove 3s;
animation-fill-mode: forwards;
transform: rotate(var(--a));
transform-origin: top left;
}
#keyframes mymove {
to {
width: var(--w);
background-color: blue;
}
}
<div id="move"></div>
I have this problem where I am trying to implement a simple CSS transition with javascript, where when start button is pressed, it would move and stop depending on the duration of the keyframe and then when end is clicked, it would disappear and then again reappear when start is pressed with the same animation.
Does someone know what might be the issue here? And for some reason, when the transition is over, it jumps to the corner.
function add()
{
document.getElementById("myAnimation").classList.add("run-animation");
}
function remove()
{
document.getElementById("myAnimation").classList.remove("run-animation");
}
body{
background-color: "#4287f5";
}
#myAnimation
{
position:relative;
height: 40px;
width: 40p;
}
.run-animation
{
-webkit-animation: move 6s;
animation: move 6s;
}
#-webkit-keyframes move
{
0% {left: -200px;}
25% {left: 200px;}
50% {left: 100px;}
}
#keyframes move
{
0% {left: -200px;}
25% {left: 200px;}
50% {left: 100px;}
}
<button onclick="add()">Start</button>
<button onclick="remove()">End/Remove</button>
<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>
You said you want a "transition" but are using an animation. If you want a transition, use a transition.
"Yeah but how do I make it go farther than the end point?" [someone might say.]
Use a custom bezier-curve timing function where the ordinate will be outside the [0, 1] range. Doing so this will create a bouncing effect.
From there, it's easy to control the two states of your element since you only have to change one value.
#myAnimation {
height: 40px;
width: 40px;
background: red;
transform: translate(-40px, 0);
transition: transform 1.5s cubic-bezier(0, 0, 0.5, 3);
}
:checked ~ #myAnimation {
transform: translate(100px, 0);
}
body{ margin:0; }
<input type="checkbox" id="check"><label for="check">show elem</label>
<div id="myAnimation"></div>
Note: In the above example I used transform instead of your original left because for performance reasons that should be the preferred way, but that will work with any animatable property.
Also, I used a simple checkbox as the control, but you can keep your button + js to toggle a class, that will do just the same.
That is probably because you are not defining how your element should look when it is not animated. You can set a display:none; on it by default and then a display:block; during the animation. Here is an example:
function add() {
document.getElementById("myAnimation").classList.add("run-animation");
}
function remove() {
document.getElementById("myAnimation").classList.remove("run-animation");
}
body {
background-color: "#4287f5";
}
#myAnimation {
position: relative;
/*
Hide the element if it is not animated
*/
display: none;
height: 40px;
width: 40p;
}
#myAnimation.run-animation {
-webkit-animation: move 6s;
animation: move 6s;
/*
Show the element if it is animated
*/
display: block;
}
#-webkit-keyframes move {
0% {
left: -200px;
}
25% {
left: 200px;
}
50% {
left: 100px;
}
}
#keyframes move {
0% {
left: -200px;
}
25% {
left: 200px;
}
50% {
left: 100px;
}
}
<button onclick="add()">Start</button>
<button onclick="remove()">End/Remove</button>
<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>
maybe this can help
function add()
{
document.getElementById("myAnimation").classList.add("run-animation");
}
function remove()
{
document.getElementById("myAnimation").classList.remove("run-animation");
}
body{
background-color: "#4287f5";
}
#myAnimation
{
position:relative;
height: 40px;
width: 40p;
left: 0;
opacity: 1;
}
.run-animation
{
-webkit-animation: move 6s;
animation: move 6s;
animation-fill-mode: forwards;
}
#-webkit-keyframes move
{
0% {left: 0;}
25% {left: 200px;opacity: 1;}
50% {left: 100px;opacity: 0;}
80% {left: 0; opacity: 0;}
100% {left: 0; opacity: 1;}
}
#keyframes move
{
0% {left: 0;}
25% {left: 200px;opacity: 1;}
50% {left: 100px;opacity: 0;}
80% {left: 0; opacity: 0;
100% {left: 0; opacity: 1;
}
<button onclick="add()">Start</button>
<button onclick="remove()">End/Remove</button>
<div id="myAnimation" class="run-animation"><img src="https://cdn1.imggmi.com/uploads/2019/10/23/6e17286b0e01cf2775e6fa81a07d1ae3-full.png" /></div>
I want to make spinning wheel but instead of rotating wheel i want to rotate the pointer. I have the following jQuery code snippet which rotates a pointer but I don't know how to convert this jQuery snippet into JavaScript.
jQuery code:
$( document ).ready(function() {
var startJP = (164) + (360 * 3);
$('.jackpot-pointer').animate({ transform: startJP }, {
step: function(now,fx) {
$(this).css('-webkit-transform','rotate('+now+'deg)');
},
duration:6000
},'linear');
});
i want to do something like this
https://i.stack.imgur.com/0KArr.gif
Here is a simple example, that shows how you could solve it with vanilla JS and CSS by using CSS animations which can be toggled on and off via JS.
var stage = document.querySelector('#stage');
var rot = document.querySelector('#rotating');
stage.addEventListener('click', function () {
rot.classList.toggle('animated');
});
#stage {
position: relative;
height: 100px;
background-color: #000;
}
#rotating {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
width: 50px;
height: 50px;
background-color: #c00;
animation: rotate linear 6s;
animation-iteration-count: infinite;
animation-play-state: paused;
transform-origin: 50% 50%;
}
#rotating.animated {
animation-play-state: running;
}
#keyframes rotate {
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(359deg) ;
}
}
<div id="stage">
<div id="rotating"></div>
</div>
Depending on which browsers you want/have to support, you might have to add vendor prefixes in the CSS code.
I have an image that I want to fade in and out automatically. I've read about transitions and animations and would like to use one or two styles (not style declarations). It's OK to start the animation via JavaScript.
In this example on MDN you can see that the items are animated on page load by switching classes. I would like it to be simpler than that.
Here is what I have so far and it seems like it should work but it's not.
function updateTransition(id) {
var myElement = document.getElementById(id);
var opacity = myElement.style.opacity;
if (opacity==null || opacity=="") opacity = 1;
myElement.style.opacity = opacity==0 && opacity!="" ? 1 : 0;
}
var id = window.setInterval(updateTransition, 5000, "myElement");
updateTransition("myElement");
#myElement {
background-color:#f3f3f3;
width:100px;
height:100px;
top:40px;
left:40px;
font-family: sans-serif;
position: relative;
animation: opacity 3s linear 1s infinite alternate;
}
<div id="myElement"></div>
Also, here is an example of an animation on infinite loop using a slide animation (3 example in the list). I'd like the same but with opacity.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
The linked question is not the same as this. As I stated, "single line styles (not style declarations)".
What you need is to define your animation using keyframes. If you are trying to apply multiple animations, you can provide a list of parameters to the animation CSS properites. Here's an example that applies a slide in and fade animation.
.fade {
width:100px;
height:100px;
background-color:red;
position:relative;
animation-name:fadeinout, slidein;
animation-duration:2s, 1s;
animation-iteration-count:infinite, 1;
animation-direction:alternate, normal;
}
#keyframes fadeinout {
0% {
opacity:0
}
100% {
opacity:100
}
}
#keyframes slidein {
from {
left:-100px;
}
to {
left:0px;
}
}
<div class='fade'>
</div>
You can use animation-iteration-count :
#myElement {
background-color: #f3f3f3;
width: 100px;
height: 100px;
top: 40px;
left: 40px;
font-family: sans-serif;
position: relative;
animation: slidein 2s linear alternate;
animation-iteration-count: infinite;
}
#keyframes slidein {
0% {
opacity: 0;
left: -100px;
}
50% {
opacity: 1;
left: 40px;
}
100% {
opacity: 0;
left: -100px;
}
}
<div id="myElement"></div>
I have a car which im moving to the right of the screen. (the car needs to start from left infinity and go out of the screen on the right).
But the animation repeats just once and stops.
<div class="car-right">
<img class="car-right-image"src="/assets/car-right.png" alt="">
</div>
.car-right {
position: absolute;
top: 86%;
left: -200px;
z-index: 10;
}
.transit-right {
-webkit-transform: translate(1920px,0);
-webkit-transition: all 30s ease-in-out;
transition: all 30s ease-in-out;
z-index: 10;
}
$(function() {
return $('.car-right-image').addClass("transit-right");
});
What am i doing wrong here ? ... how do i make the car keep coming from the left infinity and dissapear to the right ? ...
I know i gotta do something with keyframes and the infinite atrribute.
But cant seem to get it ...
Any help is highly appreciated, thanks.
Regards
-Skykog
jQuery solution, here's a FIDDLE
.car-right-image {
position: absolute;
width: 260px;
left: -260px;
}
$(function() {
setInterval(function() {
$('.car-right-image').animate({ left: $(window).width() + 'px' }, 3000, 'linear', function() {
$(this).css({ left: - $(this).width() + 'px' });
});
}, 10);
});
You need to use CSS Animations not transitions.
.car-right {
position: absolute;
top: 86%;
left: -200px;
z-index: 10;
background-color: red;
animation-duration: 4s;
animation-name: goRight;
animation-iteration-count: infinite;
}
#keyframes goRight {
from {
transform: translate(0,0);
}
to {
transform: translate(1920px,0);
}
}
There is no need for jQuery for this.
Here is a demo running at a 4 seconds interval: http://jsfiddle.net/NrLy8/1/