Develop Reference

Why the value of end point of element is wrong when using a function

The problem is solved when adding angles individually and then using ttheta(without calling a function to add angles and than using ttheta), but can anyone tell about why using function here is wrong or what problem is this function causing
The issue is solved by using this:
dtransform = window.getComputedStyle(leg1, null).getPropertyValue("transform");
values = dtransform.split('(')[1].split(')')[0].split(',');
dtheta = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
dtransform1 = window.getComputedStyle(leg2, null).getPropertyValue("transform");
values1 = dtransform1.split('(')[1].split(')')[0].split(',');
dtheta1 = Math.round(Math.atan2(values1[1], values1[0]) * (180 / Math.PI));
ttheta = dtheta + dtheta1;
Instead of using function.
What I am trying to achieve is to get value of end points of an element when it is rotated from left and top of browser.
X & Y values are max-distance of end points of shoe
I get right values at some points and wrong at some. I tried to add angle from the parent element but that also don't solve the problem.
This is the related answer from which I had taken help
To check values are right or wrong I added an event to get clientX of mouse click. And values of element positions are taken when Try button is clicked.
Am I doing something wrong, any insights will be really helpful
let leg1 = document.querySelector(".Leg1Shoe")
let leg2 = document.querySelector(".Leg1Part")
let animeAll = document.querySelectorAll(".allClass")
let animePause = false
let ttheta = 0;
function getPos() {
if (!animePause) {
animeAll.forEach(e => {
e.classList.add("AnimatePaused");
})
animePause = true;
} else {
animeAll.forEach(e => {
e.classList.remove("AnimatePaused");
})
animePause = false;
}
let h, w, x, dx, tx, y, dy, ty = "";
leg1.style.outline = "1px solid red"
h = leg1.offsetHeight;
w = leg1.offsetWidth;
x = leg1.getBoundingClientRect().left;
y = leg1.getBoundingClientRect().top;
func2(leg2);
func2(leg1);
dx = (Number(h * (Math.sin(ttheta * (Math.PI / 180)))) + Number(w * (Math.cos(ttheta * (Math.PI / 180))))).toFixed(2);
dy = (Number(w * (Math.sin(ttheta * (Math.PI / 180)))) + Number(h * (Math.cos(ttheta * (Math.PI / 180))))).toFixed(2);
tx = (Number(x) + Number(Math.abs(dx))).toFixed(2);
ty = (Number(y) + Number(Math.abs(dy))).toFixed(2);
console.log("X:" + tx, "Y:" + ty);
}
function func2(e) {
let dtransform, dtheta, values = "";
dtransform = window.getComputedStyle(e, null).getPropertyValue("transform");
if (dtransform != "none") {
values = dtransform.split('(')[1].split(')')[0].split(',');
dtheta = Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI));
} else {
dtheta = 0;
};
ttheta = Number(ttheta) + Number(dtheta);
}
leg1.addEventListener('click', mousePos);
function mousePos(e) {
console.log("X:" + e.clientX, "Y:" + e.clientY)
}
.Leg1Part {
position: relative;
left: 100px;
top: 43px;
width: 20px;
height: 75px;
background-color: green;
transform-origin: top center;
animation: animateLeg1Part 5.0s linear infinite alternate;
}
#keyframes animateLeg1Part {
0% {
transform: rotate(40deg);
}
25% {
transform: rotate(25deg);
}
50% {
transform: rotate(10deg);
}
75% {
transform: rotate(30deg);
}
100% {
transform: rotate(60deg);
}
}
.Leg1Shoe {
position: absolute;
left: 0px;
top: 73px;
width: 40px;
height: 20px;
background-color: blue;
transform-origin: center left;
animation: animateLeg1Shoe 5.0s linear infinite alternate;
}
#keyframes animateLeg1Shoe {
0% {
transform: rotate(15deg);
}
50% {
transform: rotate(-20deg);
}
100% {
transform: rotate(30deg);
}
}
.AnimatePaused {
animation-play-state: paused;
}
<div class="Leg1Part allClass">
<div class="Leg1Shoe allClass"></div>
</div>
<button onclick="getPos()">Try</button>
Thanks for help in advance

This is not a simple answer that can give you a complete solution, but just an outline of the process you can follow.
You get the transformation matrices for the "leg" and the "shoe", as you already do, by calling getPropertyValue("transform") This gives you a string like this: matrix(-0.568718, 0.822533, -0.822533, -0.568718, 0, 0), this is a shortened form of a 3x3 transformation matrix:
| cos(theta) -sin(theta) 0 |
| sin(theta) cos(theta) 0 |
| 0 0 1 |
Parse the string and create a 2d array for this matrix. Note: since you don't have any translation (two zeros in the last column) you can operate on 2x2 matrices.
Multiple the transformation matrices for the "leg" and the "shoe". It's a tedious process, and you can use the mathjs library to help.
Multiply the resulting transformation matrix by the vector of each point's original coordinates. This will give you the coordinates of the point with all rotations applied.
Here are some references:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix()
https://en.wikipedia.org/wiki/Affine_transformation
http://web.cse.ohio-state.edu/~shen.94/681/Site/Slides_files/transformation_review.pdf
https://en.wikipedia.org/wiki/Matrix_multiplication_algorithm

CSS transform: translateX( to the right );

I want to make a particle system for my home page. Blue little circular dots should go from left to right and then reapear in the left so that it makes a loop.
Image of particles
The code below will generate 150 dots that all have different properties as speed color and size and will apear at random positions when loading the page. Either by looping the animation or by adding new dots I want to continue the animation infinitely.
// ========== JAVASCRIPT ==========
function Dot(){
var colors = [
"#313146",
"#36364f",
"#3d3d5c",
"#404066"
];
var speed = Math.floor(Math.random() * 20) + 2;
this.obj = document.createElement("div");
this.obj.classList.add("dot");
this.obj.style.top = (window.innerHeight * Math.random()) + 'px'; // random Y-position after page load
this.obj.style.left = (window.innerWidth * Math.random()) + 'px'; // random X-position after page load
this.size = Math.floor(Math.random() * 5) + 4; // random size
this.obj.style.height = this.size + 'px';
this.obj.style.width = this.size + 'px';
this.obj.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)]; // random color
this.obj.style.animation = `move ${speed}s linear`; // start animation
document.body.appendChild(this.obj);
setTimeout(del, speed*1000, this.obj); // THIS FUNCTION SHOULD BE REMOVED IF ANIMATION GETS A LOOP
function del(element) {
element.parentNode.removeChild(element);
};
};
for(var i = 0 ; i < 151 ; i++ ){ // creating 150 dots
new Dot();
};
// ========== CSS ==========
.dot {
border-radius: 50%;
z-index: -1;
}
#keyframes move {
0% {
transform: translateX(0vw);
}
100% {
transform: translateX(100vw);
}
}
My problem is that as the dots apear with random positions, and all of them get a transform: translateX(100vw);, they will move out of the screen for a while before being deleted or reapeared at the beginning. My second image shows in red where the dot is moving to, and where it should move to.
image
What I tried allready:
1.
JS:
this.obj.style.animation = `move ${speed}s linear infinite`; added infinite and deleted the code that deletes the dots.
CSS:
#keyframes move {
0% {
transform: translateX(0vw);
}
100% {
transform: translateX(right);
}
}
<= Does not exist, and couldn't find working code equal to this idea.
This would have been a solution.
2.
Adding a second animation with dots coming from the left when other ones where deleted.
Ended in a gap between the 150 dots of the first animation and the incoming dots of the second animation.
Is there any other possibility of moving the dots from left to right with different properties?
best regards

Since you are setting the position with JS so you can know exactly where each element will appear and use this information to adjust the animation.
Here is a basic example to illustrate:
.dot {
background: blue;
position:fixed;
width: 50px;
height: 50px;
border-radius: 50%;
z-index: -1;
left:var(--x,0px);
animation:move 2s linear infinite;
}
#keyframes move {
0% {
transform: translateX(0vw);
}
100% {
transform: translateX(calc(100vw - var(--x,0px)));
}
}
<div class="dot" style="top:10px;--x:80px;"></div>
<div class="dot" style="top:20px;--x:150px;"></div>
<div class="dot" style="top:100px;--x:350px;"></div>
The variable --x will define left and will get substracted from the 100vw
For better support and since you are using JS, you can get rid of calc() and CSS variables. Simply do a small calculation to find the value of transform.
Here is an example where I am using jQuery for simplicity but you can easily make it a JS-only code:
$('.dot').each(function() {
$(this).css('transform','translateX('+ ($(window).width() - parseInt($(this).css('left')))+'px)');
});
.dot {
background: blue;
position:fixed;
width: 50px;
height: 50px;
border-radius: 50%;
z-index: -1;
animation:move 2s linear infinite;
}
#keyframes move {
0% {
transform: translateX(0px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dot" style="top:10px;left:80px;"></div>
<div class="dot" style="top:20px;left:150px;"></div>
<div class="dot" style="top:100px;left:350px;"></div>
Worth to note that you need to update the value on window resize
Another idea to keep the loop effect is to have the same position and the same animation for all and you adjust the delay to simulate the different position:
.dot {
background: blue;
position:fixed;
width: 50px;
height: 50px;
border-radius: 50%;
z-index: -1;
left:0;
animation:move 2s linear infinite;
}
#keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(100vw);
}
}
<div class="dot" style="top:10px;animation-delay:-1s;"></div>
<div class="dot" style="top:20px;animation-delay:-0.1s;animation-duration:1s"></div>
<div class="dot" style="top:100px;animation-delay:-0.5s;animation-duration:4s"></div>
The calculation is easy. If the animation duration is D then a delay of -D/2 will place the element in the center intially. -D*0.1 will place the image at 10% and so on.

I would suggest you to use requestAnimationFrame to animate your particles. Take a look at the following example. I've added the move method to the particle which is called from the animation loop and changing the particle's position. It also checks if the particle has reached the end of the screen and resets its position to -10 in this case.
function Dot(){
var colors = [
"yellow",
"red",
"green",
"black"
];
this.x = window.innerWidth * Math.random();
this.speed = Math.floor(Math.random() * 20) + 2;
this.obj = document.createElement("div");
this.obj.classList.add("dot");
this.obj.style.position = "fixed";
this.obj.style.top = (window.innerHeight * Math.random()) + 'px';
this.obj.style.left = this.x + 'px';
this.size = Math.floor(Math.random() * 5) + 4; // random size
this.obj.style.height = this.size + 'px';
this.obj.style.width = this.size + 'px';
this.obj.style.background = colors[Math.floor(Math.random()*colors.length)]; // random color
document.body.appendChild(this.obj);
this.move = function() {
this.x += this.speed;
if (this.x > window.innerWidth) {
this.x = -10;
}
this.obj.style.left = this.x + 'px';
};
};
var dots = Array.apply(null, Array(150)).map(a => new Dot());
requestAnimationFrame(paint);
function paint() {
requestAnimationFrame(paint);
for (dot of dots) {
dot.move();
}
}
.dot {
border-radius: 50%;
z-index: -1;
}
I also recommend you this great book about particle systems. It shows how to implement forces, interaction and complex behavior.

Fade out grayscale animation on mouseover div

How can I make the image fade out the grayscale when I mouseover the div?
This is the page http://www.stirringminds.com/partners/
HTML:
<div class="col-xs-4 dealsdiv" id="businessfltr" style="background-color:#fff;border:1px solid #DDD;border-radius:4px;margin:10px;"><img class="dealsimg" src="http://13.126.32.0/wp-content/uploads/2017/05/aws_logo_web_300px.png"/><span style="position:relative;bottom:15%;left:7%;color:#000;">Amazon Web Services</span><br><span style="position:relative;left:48.5%;bottom:50%;padding-right:-100px;">$1000 credits for 1 year.</span></div>
CSS:
.dealsdiv {
height: 100px;
}
.dealsimg {
width:150px;
height:auto;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}

.dealsdiv {
height: 100px;
}
.dealsimg {
width:150px;
height:auto;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
transition: filter 400ms ease-in-out; //this is optional. change the duration if you want.
}
.dealsdiv:hover .dealsimg {
filter: grayscale(0);
}

Use transition
.dealsimg {
-webkit-transition: -webkit-filter 300ms;
transition:filter 300ms;
}
.dealsdiv:hover .dealsimg{
-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}

this is my first answer on StackOverflow, but I believe I can at least point you in the right direction.
One answer to this would be to use JQuery and the HTML canvas element.
// waits until all images have loaded
$(window).load(function(){
//Fade in images so there isn't a color "pop" document load and then on window load
$(".item img").fadeIn(500);
// clone image
$('.item img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});
// Fade image
$('.item img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});
// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
SOURCE <-- from a great walk through from Darcy Clarke, with a demo of (I think) exactly what you're looking for.
Note:
With the above code, remember:
you should set the target image (eg: .post-img, img, .gallery img, etc.)
you may change the animation speed (ie. 1000 = 1 second)

Possible to use translate twice on same element?

I used Javascript to translate via transform a circle from the center of the canvas to the upper left. What I want to do next is call a function that picks random coordinates within the canvas and sends them to translate, so its position can be shifted. Unfortunately this is not working.
Can you only call translate once on an element within CSS? This is the conclusion I'm coming to but I haven't been able to find information in the docs say this type of behavior isn't allowed.
The heart of the matter:
function change_level() {
var level = document.getElementById("level");
level.parentNode.removeChild(level);
var ball = document.getElementById("init_pos");
ball.style.backgroundColor = "orange";
ball.style.borderRadius = "25px";
ball.style.transform = "translate(-600%, -647%)";
setTimeout(ball_movement(ball), 3000);
ball.style.transition = "background-color 2s ease-in, transform 3s ease";
}
function ball_movement(ball) {
var movements = 5;
var x;
var y;
for (var i = 0; i < movements; i++) {
x = getRandomArbitrary(-800, 800);
y = getRandomArbitrary(-800, 800);
ball.style.transform = "translate("+x+", "+y+")";
ball.style.transition = "transform 3s ease";
console.log(x);
}
}
Posted my code on jsfiddle, though my calculations are bigger than the campus in jsfiddle and so don't work properly.
https://jsfiddle.net/2c5gwbcd/

There are a couple of corrections needed to your code:
When setting the transform value within ball_movement, the x and y variables have merely numbers as value but the translate function needs a value with units (percentage, pixels etc). So, add it by appending px or % to the string as appropriate.
In the timeout function call, when you give the first param as ball_movement(ball) the function gets called immediately. You should wrap it within an anonymous function.
Note: In the below snippet, I had reduced the initial value of the translate function and the input for the random number calculation to keep the ball movement within boundaries.
window.onload = function() {
var
html_display = {
0: "Level One",
1: "Level Two",
2: "Level Three",
3: "Level Four",
4: "Level Five"
};
html_key = 0;
//need to take level offscreen, add ball
function change_level() {
var level = document.getElementById("level");
level.parentNode.removeChild(level);
var ball = document.getElementById("init_pos");
ball.style.backgroundColor = "orange";
ball.style.borderRadius = "25px";
ball.style.transform = "translate(-150%, -150%)";
ball.style.transition = "background-color 2s ease-in, transform 3s ease";
setTimeout(function() {
ball_movement(ball);
}, 3000);
}
function ball_movement(ball) {
var movements = 5;
var x;
var y;
for (var i = 0; i < movements; i++) {
x = getRandomArbitrary(-100, 100);
y = getRandomArbitrary(-100, 100);
ball.style.transform = "translate(" + x + "px, " + y + "px)";
ball.style.transition = "transform 3s ease";
}
}
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
function intro_html() {
document.getElementById("level").innerHTML = html_display[html_key];
setTimeout(change_level, 1000);
}
intro_html();
}
body {
position: absolute;
top: 45%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#level {
font-family: helvetica;
font-size: 29px;
position: absolute;
top: 45%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
#init_pos {
position: absolute;
top: 44%;
left: 48.17%;
height: 50px;
width: 50px;
}
.container {
height: 700px;
width: 1100px;
top: 45%;
left: 50%;
border: 4px solid black;
overflow: hidden;
}
<div class="container">
<p id="level"></p>
<p id="init_pos"></p>
</div>

Repeat an image in tile, and make it rotate

How do I fill a website with a repeated image in tiles, just like background-repeat: repeat; and make it rotate using either CSS or Javascript?
To rotate a single image I can use CSS:
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
img#id {
-webkit-animation-name: spin;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
But I can't tell how I could do this to a repeated image, i.e. access background-image as a element or repeat a <img> and fill the whole page with given image like background-repeat.
Here's an example of a rotating single image.

Based on your requirements I did something like this, although I think it is a bad option, and it can done much better...
------- Updated -------
Well, i make code more cleaner...
jsFiddle Demo updated
(function () {
var left = 0,
top = 0,
background = document.getElementById("background"),
getWidth = document.width,
getHeight = document.height,
imageSize = 240,
width = 960,
height = 960,
countPerLine = 4,
countOfImages = 16,
difference = 0;
function setParameters() {
if (getWidth > width) {
width = getWidth;
countPerLine = Math.floor(getWidth / imageSize);
difference = getWidth % imageSize;
imageSize += Math.round(difference / countPerLine);
}
if (getHeight > height) {
countOfImages = Math.floor(getHeight / imageSize);
countOfImages *= countPerLine;
}
}
function setBackground() {
for (var i = 0; i < countOfImages; i++) {
var div = document.createElement("div");
div.classList.add("bgr");
div.style.width = imageSize + "px";
div.style.height = imageSize + "px";
div.style.backgroundSize = "100% 100%";
background.appendChild(div);
if (i === 0) {
div.style.left = "0px";
div.style.top = "0px";
} else {
left += imageSize;
if (left >= width) {
left = 0;
top += imageSize;
}
div.style.left = left + "px";
div.style.top = top + "px";
}
}
}
setParameters();
setBackground();
}());