We Keep Coding

improve javascript animation to do it smooth and optimized

I need your help to improve my animation : it is a 3d hover effect on mouse move on some elements.
this animation is visually working but i'd like to improve it and optimize it (with requestAnimationFrame maybe ?) or something else, i'm a javascript novice and don't really understand how to do that...
there is a working exemple of my code, thanks for your help
function mouseCoordinates(event, element) {
const bounds = element.getBoundingClientRect()
const centerX = bounds.left + bounds.width / 2
const centerY = bounds.top + bounds.height / 2
return {
x: event.clientX - centerX,
y: event.clientY - centerY
}
}
function hover3d(event, element) {
const coordinates = mouseCoordinates(event, element)
let x = coordinates.x / 1000000
let y = coordinates.y / 500000
element.style.transform = 'matrix3d(1,0,0.00,' + x + ',0.00,1,0.00,' + y + ',0,0,1,0,0,0,0,1)'
}
const tiles = document.querySelectorAll('.tile__wrapper')
tiles.forEach(tile => {
tile.addEventListener('mousemove', function (e) {
hover3d(e, this)
})
tile.addEventListener('mouseout', function () {
this.style.transform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)'
})
})
.tiles {
display: flex;
flex-wrap: wrap
}
.tile {
margin-right: 20px;
margin-bottom: 20px;
}
.tile__wrapper {
transform-style: preserve-3d;
will-change: transform;
transition: transform .3s ease-out;
}
<div class="tiles">
<div class="tiles__item tile">
<div class="tile__wrapper">
<img src="https://picsum.photos/300/200" alt="">
</div>
</div>
<div class="tiles__item tile">
<div class="tile__wrapper">
<img src="https://picsum.photos/300/200" alt="">
</div>
</div>
<div class="tiles__item tile">
<div class="tile__wrapper">
<img src="https://picsum.photos/300/200" alt="">
</div>
</div>
<div class="tiles__item tile">
<div class="tile__wrapper">
<img src="https://picsum.photos/300/200" alt="">
</div>
</div>
</div>
Help would be appreciated!

How to create multiple Tooltips?

How can i create multiple tooltips for multiples class?
https://jsfiddle.net/6v1fbrk9/
<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg"/>
<span id="tooltip-span">
<img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>

You will need to select each of your "tooltip-able" links, loop over them and bind mouseover event to every tooltip content. Also don't use duplicated ids, use classes. I fixed HTML and CSS a little (add z-index).
Something like this will work:
var tooltips = [].slice.call(document.querySelectorAll('.tooltip'))
tooltips.forEach(function(tooltip) {
var tooltipSpan = tooltip.querySelector('.tooltip-content');
tooltip.onmousemove = function(e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
}
})
.tooltip {
text-decoration: none;
position: relative;
}
a.tooltip .tooltip-content {
display: none;
z-index: 1000;
}
a.tooltip:hover .tooltip-content {
display: block;
position: fixed;
overflow: hidden;
}
img.hidden {
display: block;
}
<a class="tooltip" href="http://www.google.com/">
<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg" />
<span class="tooltip-content">
<img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>
</a>
<a class="tooltip" href="http://www.google.com/">
<img src="http://animekompi.web.id/wp-content/uploads/2015/01/68839-128x200.jpg" />
<span class="tooltip-content">
<img class="hidden" src="https://2.bp.blogspot.com/-RPZhwHLprkw/WOtXJpHaQ6I/AAAAAAAAE-M/SXjdESQrlZ4FQzWWwrfoSJ9-UWJ4jxxlQCLcB/s1600/q.png" />
</span>
</a>

Question is unclear.
Are you trying to put multiple tooltips for a single image?
If that's the case,You could use image-map or put divs with background: transparent at the locations you want the tooltips, and then using the tooltips on it.
Some help from W3 with map
Hope this works for you.

Interactjs rotation shifts the position

I am trying to rotate, resize and drag an image using interactjs.
I am using pinch to zoom for resizing.
After rotating the image the drag feature does't work well and positions the image at wrong coordinates.
I also tried to move the img by (width/2,height/2) before rotating so that it retains its position, but this stopped resize and rotate feature.
Here is the code I am using.
The pinch to zoom and rotate only works on touch phone :
Here is the fiddle(Please check in Phone for pinch-to-zoom and rotate).
HTML
<div style="display:flex;flex-direction:row;border:solid grey 2px;border-radius:20px;position:relative;float:left;background-color:silver;width:100%">
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-12-02/19220-50b6c96d8aa44ed1511a962bae279f25.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5895-37981e6fff910eef9907adaf99faa6b6.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5728-08fc043472bfa4cc9ba6d7c4a90324e0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-11-30/17784-d2820ac7614e8f4eeb755c38bdccadc0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5728-08fc043472bfa4cc9ba6d7c4a90324e0.png" style="width:150px; height:150px;" />
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5895-37981e6fff910eef9907adaf99faa6b6.png" style="width:150px; height:150px;" />
</div>
<div style="display:flex;flex-direction:row;justify-content:space-between;align-items:center;border:solid grey 2px;border-radius:20px;position:relative;float:left;background-color:silver;height:50px;width:150px">
<button id="save" style="width:50px" />
<button id="savetwo" style="height:40px;border-radius:20px;width:70px">Save Image</button>
</div>
<br />
</div>
</div>
SCRIPT
$(document).ready(function(){
$(".Choice").click(function () {
console.log($(this));
var url = '"' + $(this)[0].src + '"';
var index = url.indexOf("http://");
console.log(url);
var modurl = url.substring(index, url.length - 1);
console.log(url);
$(".ChoiceImage").attr("src", modurl);//url appends src to the current uri so I had to split it(suggest alternative )
});
var scale = 1,angle=0;
var gestureArea = document.getElementById('gesture-area');
var scaleElement = document.getElementById('chosenOne');
var scaleElementParent = scaleElement.parentElement;
interact(gestureArea).gesturable({
onstart: function(event) {
},
onmove: function(event) {
angle += event.da;
scale = scale * (1 + event.ds);
scaleElement.style.webkitTransform =
scaleElement.style.transform =
'scale(' + scale + ') rotate('+ angle + 'deg)';
scaleElementParent.style.webkitTransform =
scaleElementParent.style.transform =
'scale(' + scale + ') rotate('+ angle + 'deg)';
dragMoveListener(event);
},
onend: function(event) {
}
}).draggable({ onmove: dragMoveListener });
function dragMoveListener(event) {
var target = event.target.children[0];
console.log(target);
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
});
The user clicks on an image from the list of images to perform the actions.
Thanks in advance

Your main issue was to scale and rotate the image AND the "gesture area.
So if the gesture detection element is rotated, interac.js only can misinterpret the movements.
I cleaned the code a little... And removed all the unused elements from this answer, like the buttons...
Here is the code in full and a CodePen to try it on a mobile device.
console.clear();
$(".Choice").click(function() {
$(".ChoiceImage").attr("src", $(this).attr("src"));
});
var scale = 1,
angle=0,
gestureArea = $('#gestureArea')[0],
scaleElement = $('.ChoiceImage'),
scaleElementParent = $('#gestureArea');
// Scale and rotate
interact(gestureArea).gesturable({
onstart: function(event) {
},
onmove: function(event) {
angle += event.da;
scale = scale * (1+event.ds);
scaleElement.css({'transform':'scale(' + scale + ') rotate('+ angle + 'deg)'});
//scaleElementParent.css({'transform':'scale(' + scale + ') rotate('+ angle + 'deg)'});
dragMoveListener(event);
},
onend: function(event) {
}
}).draggable({ onmove: dragMoveListener });
// Drag
function dragMoveListener(event) {
var target = $(event.target);
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.attr('data-x')) || 0) + event.dx;
y = (parseFloat(target.attr('data-y')) || 0) + event.dy;
// translate the element
target.css({'transform':'translate(' + x + 'px, ' + y + 'px)'});
// update the posiion attributes
target.attr('data-x', x);
target.attr('data-y', y);
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;
#gestureArea{
position:relative;
z-index:999;
width:150px;
height:150px;
background-color:transparent;
border:none;
padding: 0px 0px 0px 0px;
}
.container{
display:flex;
flex-direction:row;
border:solid grey 2px;
border-radius:20px;
position:relative;
float:left;
background-color:silver;
width:100%;
position:fixed;
bottom:0;
}
img{
width:150px;
height:150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.8/interact.min.js"></script>
<div id="gestureArea">
<img id="chosenOne" class="ChoiceImage resize-drag">
</div>
<div class="container">
<img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-12-02/19220-50b6c96d8aa44ed1511a962bae279f25.png">
</div>

How to get Slider to show next or previous on span click

I'm using a combination of bootstrap 3 and just writing from scratch.
When I click the image thumbnails, they do what they're supposed to do, but when I click the span arrows, it doesn't go to the next or previous image.
Here's the code:
var maximages = 6;
var startpath = "imgs"
var extension = ".jpg"
function calcslide(x) {
var currentimage = document.getElementById("bigpic").src;
var dotat = currentimage.indexOf(extension);
var stringnumber = currentimage.substr(dotat - 2, 2);
var nextnum = parseInt(stringnumber) + x;
if (nextnum < 1) {
nextnum = maximages;
}
if (nextnum > maximages) {
nextnum = 1;
}
var twodigitnum = ("0" + nextnum).slice(-2);
var showimg = startpath + twodigitnum + extension;
showbig(showimg);
}
function showbig(pic) {
document.getElementById("bigpic").src = pic;
}
.slider {
text-align: center;
}
#bigpic {
height: 500px;
}
.thumbs img {
height: 100px;
padding: 20px 0 20px 0;
}
<div class="slider">
<span class="glyphicon glyphicon-chevron-left btn btn-lg" alt="previous" onclick="calcslide(-1)"></span>
<img src="imgs/slider01.jpg" id="bigpic" />
<span class="glyphicon glyphicon-chevron-right btn btn-lg" alt="next" onclick="calcslide(1)"></span>
<div class="thumbs">
<span class="glyphicon glyphicon-chevron-left" alt="previous" onclick="calcslide(-1)"></span>
<img src="imgs/slider01.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider02.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider03.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider04.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider05.jpg" onclick="showbig(this.src)" />
<img src="imgs/slider06.jpg" onclick="showbig(this.src)" />
<span class="glyphicon glyphicon-chevron-right" alt="next" onclick="calcslide(1)"></span>
</div>
</div>

A slash / and a prefix is missing somewhere within your path construction.
Instead of:
var showimg = startpath + twodigitnum + extension
I would try:
var showimg = startpath + '/slider' + twodigitnum + extension

Horizontal scroller edge detection

How would I modify my script so it will detect the edge and not scroll more than the container width?
Mark-up and JS included and also JSFiddle - http://jsfiddle.net/carlozdre/4HSLb/8/
<div id="content">
<div class="inner">
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
</div>
</div>
<div style="">
<a class="left" href="#">LEEEEFT</a>
<a class="right" href="#">RIGHHHT</a>
</div>
<style>
#content { float: left; width: 600px; overflow: scroll; white-space: nowrap; max-width: 3000px;}
.inner {width: 300px;}
</style>
$(function () {
$('.left').click(function (e) {
e.preventDefault();
$('.inner').animate({
marginLeft: "-=" + 20 + "px"
}, 'fast');
});
$('.right').click(function (e) {
e.preventDefault();
$('.inner').animate({
marginLeft: "+=" + 20 + "px"
}, 'fast');
});
});

You need to make a couple of changes to ensure the size of the inner container is fixed to the size of the images within, and then check the left and right position of the inner container.
You are also better to animate to a specific coordinate rather than adding or subtracting from the previous one, as it will handle fast clicks much better.
Working example: http://jsfiddle.net/4HSLb/13/
Markup:
<div id="content">
<div class="inner">
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
<img src="http://lorempixum.com/300/300" />
</div>
</div>
<div style=""> <a class="left" href="#">LEEEEFT</a>
<a class="right" href="#">RIGHHHT</a>
</div>
CSS:
#content {
float: left;
width: 610px;
overflow: hidden;
white-space: nowrap;
max-width: 3000px;
}
.inner {
background:#444;
height:300px;
}
.inner img {
float:left;
margin-right:10px;
}
Script:
var left = 0;
var contentWidth = 0;
var innerWidth = 0;
var imgCount = 0;
var imgWidth = 310;
$(function () {
contentWidth = parseInt($('#content').innerWidth());
left = parseInt($('.inner').css('margin-left'));
imgCount = $('.inner img').size()
innerWidth = parseInt(imgCount * imgWidth);
$('.inner').width(innerWidth + "px");
$('.left').click(function (e) {
e.preventDefault();
updatePos(imgWidth);
if (left <= 0) {
$('.inner').animate({
marginLeft: left + "px"
}, 'fast');
}
});
$('.right').click(function (e) {
e.preventDefault();
updatePos(0 - imgWidth);
if (left >= 0 - innerWidth + (imgWidth * 2)) {
$('.inner').animate({
marginLeft: left + "px"
}, 'fast');
}
});
});
function updatePos(distance) {
console.log("NewPos: " + (left + distance));
console.log(0 - innerWidth);
if (left + distance <= 0 && left + distance >= 0 - innerWidth + (imgWidth * 2)) {
left = left + distance;
}
//console.log(left);
}
Edit:
Updated to prevent over scrolling when fast clicking.
Edit 2:
Updated code to allow the number of images in view to be easily changed. Rather than editing the example code above, here is an example on jsFiddle: http://jsfiddle.net/4HSLb/14/