Looking for (probably CSS) design solution involving moving objects - javascript

I have an idea in mind, and want some perspectives on what would make sense for the best implementation. The premise is basically slow moving objects ricocheting around inside an enclosure. Think like the game 'asteroids' but without a spaceship (and colliding with the walls instead of passing through).
Because this is to be in the background and purely aesthetic, I figure it's got to be pretty lightweight. I would use all CSS, but my question is can multiple animations be applied to an object? Say if I have a square bouncing around in a box using
---------
.square {
animation: moveX 2.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite
#keyframes moveX {
from { left: 0; } to { left: 480px; }
}
#keyframes moveY {
from { top: 0; } to { top: 280px; }
}
}
How can I get it to rotate continuously as well? Or at least create some effect that does so? If I need to put something together with javascript then that's fine, just curious whether I'm overlooking something with the CSS.

You can add rotation to the element in CSS:
.square {
position: relative; /* Ensure it's movable with non static position */
animation:
moveX 2.05s linear 0s infinite alternate,
moveY 2.4s linear 0s infinite,
rotate 2s linear infinite;
}
#keyframes moveX {
from { left: 0; } to { left: 480px; }
}
#keyframes moveY {
from { top: 0; } to { top: 280px; }
}
#keyframes rotate {
0% {transform: rotate(0deg);} 100% {transform: rotate(359deg);}
}
Use -359deg to rotate counterclockwise.

Related

How to catch current css translate() position in javascript

I would like to animate element on the screen by arrows. It should change the direction immediately while translation. So if element go to right and I press down arrow in half of the animation it should go straight down and stop to go right. But how can I catch current x position of the element. offsetLeft does not work. It is still the same origin position. Is it possible to catch current position of animated element? Thanks.
I think you need to call element.getBoundingClientRect()
let circle = document.querySelector(".animate");
let style = window.getComputedStyle(circle);
setInterval(() => {
let rect = circle.getBoundingClientRect();
console.log(rect.left)
}, 1000)
div {
height: 100px;
width: 100px;
border-radius: 100px;
background: blue;
}
.animate {
animation: animate;
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes animate {
from {
transform: translate(0)
}
to {
transform: translate(calc(100vw - 120px))
}
}
<div class="animate"> </div>
Not sure why code snippet renders the entire element in console.log, but in an actual script it would return only the value.

How to make an image rotating around static logo?

I'm working on a website and i had no idea how to make an image rotating infinitely around a static logo.
I don't have any code as I am not familiar with web coding, so if anyone here can provide a codepen or jsfiddle?
My website is working on 100% html, css and js.
I've googling a lot of article but none of it is exactly as I want.
I expect for a HTML code with CSS and JS
Based on the answer
How to animate image circular in css
you can do the following:
HTML:
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
That man also added a jsFiddle link for you to see the effect of above one.
http://jsfiddle.net/aquadk/m23sadrz/
A simple way is to add a CSS class to your image element and use keyframe animations.
https://codepen.io/limxz/pen/GLZdJN
As you can see from the demo, you have to define a keyframe (it's kind of like an animation sequence) and then add the parameters to control it.
#keyframes infinite-spinning {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.image-to-spin {
animation: infinite-spinning 1s infinite;
}
As I understand you need effect like moon rotating around the earth. You'll be able do it using CSS animation and transform-origin attribute.
transform-origin change your rotation point of the object. Normally transform-origin is located at center of the object but changing X and Y attributes for the transform-origin you will able to change the rotation point.
here is a example
<div class="logo-wrapper">
<h1>LOGO</h1>
<span class="img"></span>
</div>
replace span.img with your desire image
Hope this will help you!

how to give each div a different animation speed with css animation

Struggling to even get started figuring this out, I am working on a website for a friend, here is a one of the pages..
http://sarahboulton.co.uk/livingroom.html
So on refresh it brings up one of four constellations of letters, which shift their constellations using math random.
We were hoping to start applying small animations to the letters.. something along these lines..
.lipbalm {
animation: shake 0.1s;
animation-iteration-count: infinite; }
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.5px) }
100% { transform: translate(0px) }
}
But whether these movements could be randomised for each letter, still small movements.. but using something similar to..
$(document).ready(function(){
$('.goldrocks-g').css({'left' : (Math.random() * 250) + 350})
});
..each letter randomises its movement, maybe one ends up on..
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.4px) }
100% { transform: translate(0px) }
}
.. and another has..
#keyframes shake {
0% { transform: translate(0px) }
50% { transform: translate(0.1px) }
100% { transform: translate(0px) }
}
and something similar for the speed too? All the letters have their own div, might be easier to view the source of the page to see whats going on !
The way I would approach this problem is by creating the a few variations of your shake class and then assign those classes at random when you are assigning the random constellation.
So something like this:
css
.shake-1{
animation: shake-1 0.3s;
animation-iteration-count: infinite;
}
.shake-2{
animation: shake-2 0.3s;
animation-iteration-count: infinite;
}
.shake-3{
animation: shake-3 0.3s;
animation-iteration-count: infinite;
}
#keyframes shake-1 {
0% { transform: translate(0px) }
50% { transform: translate(2px) }
100% { transform: translate(0px) }
}
#keyframes shake-2 {
0% { transform: translate(0px) }
50% { transform: translate(-2px) }
100% { transform: translate(0px) }
}
#keyframes shake-3 {
0% { transform: translate(0px) }
50% { transform: translate(0px, 2px) }
100% { transform: translate(0px) }
}
html
<div class="dyinglight-d shake-1" style="left: 839.646px; top: 212.011px;">...</div>
<div class="dyinglight-y shake-2" style="left: 959.592px; top: 97.9469px;">...</div>
etc
Here's a codepen I made for you with your site's code to show an example of it working: https://codepen.io/ChrisRArendt/pen/jQXjNa
You may generate CSS style using javaScript to integrate javaScript Math.random() into CSS logic.
For example you can generate 10 keyframes with names shake1 to shake10 with random transform on 50% and append this styles to the header style :
var css;
for (x=1;x=10;x++){
css += '#keyframes shake'+ x.toString() +' {';
css += '0% { transform: translate(0px)}';
css += '50% { transform: translate('+ Math.random() +'px)}';
css += '100% { transform: translate(0px)}';
css += '}';
}
$( "<style>" + css + </style>").appendTo( "head" );
Finally you can assign each keyframe randomly to target divs:
$('.goldrocks-g').each(function(){
(this).css({"animation": "shake" + Math.random()*10+1 +" 0.1s infinite");
})
I think the easiest way to do this would be to have a random feeling shake animation that could be applied to all letters. Then you can randomly apply inline CSS of animation-delay: 100ms or animation-delay: 300ms. That style could be applied differently each time. All letters will be using the same shake animation but will be at different intervals in the animation based on their delay time.

CSS animations don't play properly

I have an introductory portion of a site where 4 letters (SVGS) pop onto the screen. Most of the time, it plays just fine. On occasion however, sometimes one or two or all the images won't animate in at all. I'm not sure what could be causing this (it's not the cache), and a page refresh usually fixes it. Am I missing something? Should I wait for the images to load AND for the entire DOM to be ready?
Here is the relevant CSS (Sass).
Animation:
#keyframes bobble {
0% {
transform: translateY(124px) scale(0.8, 1.6);
}
25% {
transform: translateY(-64px) scale(1.6, 0.8);
}
55% {
transform: translateY(16px) scale(0.9, 1.1);
}
100% {
transform: translateY(0) scale(1);
opacity: 1;
}
}
Styling
.hello-header-img {
height: 100%;
width: 100%;
opacity: 0;
animation: bobble $animation-duration cubic-bezier(0.64, 0.57, 0.67, 1.53);
animation-fill-mode: forwards;
animation-play-state: paused;
will-change: transform, opacity;
// Plays animations when images have loaded (JS)
.is-ready & {
animation-play-state: running;
}
}
Each letter also has an animation delay which starts at 0.4s and increases by 0.3s for each letter (so letter 1 = 0.4s delay, letter 2 = 0.7s delay, letter 3 = 1s delay, etc).
Javascript
const imgs = document.querySelectorAll('.hello-header img');
let counter = 0;
let hasScrolled = false;
// Animate after hello section images have loaded
[].forEach.call( imgs, function( img ) {
img.addEventListener( 'load', ()=> {
counter++;
if ( counter === imgs.length ) {
document.querySelectorAll('.js-hello-header')[0].classList.add('is-ready');
}
}, false );
});
Try replacing translate and scale with translate3d and scale3d (with the appropriate parameters).
translate and scale in general are very CPU expensive while their 3d counterparts utilize hardware acceleration from the graphics card and therefore play animations much smoother.

SVG Animation - Animating SVG groups

I want to achieve a conveyor belt animation on an SVG element i.e. the blocks on the conveyor belt need to move along with the belt in a particular direction.
A better view of what i want to achieve:
GIF
The SVG image has separate groups for separate blocks that need to be moved along a line (belt). The svg can be found here
I tried using jquery animate to move them at an angle like so:
$(function() {
var dist = 130;
var angle = -48;
var x = Math.cos(angle*Math.PI/180) * dist;
var y = Math.sin(angle*Math.PI/180) * dist;
// $(".st93").animate({'left': '+='+x+'px', 'top': '+='+y+'px'}, 1000);
$(".st93").animate({"transform": "translateX(+=" +x+ "px)"}, {"transform": "translateY(+=" +y+ "px)"}, 1000);
})
which didn't work.
and then i tried using CSS only transforms like so:
#Square_1 {
position: relative;
animation-name: move;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes move {
0% {
opacity:0;
//transform: translateX( -400px, 10px);
}
10% {
opacity:1;
}
90% {
opacity:1;
transform: translate( 100px, -60px);
}
100% {
opacity:0;
}
}
which took me closer to what I wanted but still isn't showing the desired effect. the blocks start abruptly forming at their respective starting position instead of a continuously flowing from the start of the belt which seems far from natural.
Any help will be appreciated. Thanks.

Categories