I put together a simple javascript / css slider, started as a training exercise, but now I want to apply it in the real world. The problem is that the animation is volatile on my desktop (which is v. High spec game console) - and even worse on a mobile device (to the extent that it is not really an animation)
You can see it in action here:
www.chrishowie.co.uk/sands/
jsfiddle isolates most of the relevant code - this is not a “this doesn't work” problem, so hopefully the fiddle gives enough to help optimize it.
http://jsfiddle.net/9aozrxy8/5/
In conclusion: I have a DIV with 4 images per line, each image is 100% of the page width. I use javascript for translateX (I tried translate3d since I heard that it uses a GPU but did not make much difference) and I set CSS transitions to make the conversion easier.
I also thought that potentially I was just trying to do too much on this site, but then I look at some other sites that make a hell of a lot more, and it is as smooth as silk. Therefore, I think I missed something.
function slideRight() { if (sliding) { return false }; window.sliding = true; el = document.getElementById("slider"); cst = getComputedStyle(el); transformst = cst.transform || cst.webkitTransform || cst.mozTransform; widthst = cst.width; widthst = widthst.replace("px", ""); // computed width of slider (7680px) slidewidth = widthst / 4; transformst = transformst.replace("matrix(", ""); transformst = transformst.replace(")", ""); transformst = transformst.split(","); transformst = transformst[4]; // returns current transform in px without unit (px) if (!transformst) { transformst = 0; } var activebtn = "sldr" + Math.round((Number(transformst) / (-1 * slidewidth))); document.getElementById(activebtn).classList.remove("sliderbuttonactive"); if (activebtn != "sldr3") { document.getElementById("slider" + Math.round((2 + Number(transformst) / (-1 * slidewidth)))).style.visibility = "visible"; document.getElementById("slider" + Math.round((2 + Number(transformst) / (-1 * slidewidth)))).style.display = "initial"; document.getElementById("slider").style.transform = "translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)"; document.getElementById("slider").style.transform = "-webkit-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)"; document.getElementById("slider").style.transform = "-moz-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)"; document.getElementById("slider").style.transform = "-ms-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)"; document.getElementById("leftslidebtn").style.visibility = "visible"; document.getElementById("leftslidebtn").style.display = "block"; } activebtn = activebtn.replace("sldr", ""); activebtn = "sldr" + (1 + Number(activebtn)); document.getElementById(activebtn).classList.add("sliderbuttonactive"); if (Number(activebtn.replace("sldr", "")) == 3) { document.getElementById("rightslidebtn").style.visibility = "hidden"; document.getElementById("rightslidebtn").style.display = "none"; } setTimeout(function () { window.sliding = false }, 2000);
}
update: still not allowed, but on a mobile phone I made it usable by reducing the size of the image for small screens, and also not displaying the image off-screen. Not quite smooth, but there.
Thank you very much,
WITH