We Keep Coding

What could be the bare minimum steps to animate the following carousel implementation?

I am making a vanilla js carousel. I have laid out basic previous and next functionality using js along with html and css.
Now I tried to use css-animations (keyframes) to do left and right slide-in/slide-out animations but the code became messy for me. So here I am asking that what minimal changes would be needed to get the same animation effects in this implementation ?
Will you go for pure JS based or pure CSS based or a mix to do the same ?
My goal is get proper animation with minimal code.
(function () {
let visibleIndex = 0;
let carousalImages = document.querySelectorAll(".carousal__image");
let totalImages = [...carousalImages].length;
function makeNextVisible() {
visibleIndex++;
if (visibleIndex > totalImages - 1) {
visibleIndex = 0;
}
resetVisible();
renderVisible();
}
function makePrevVisible() {
visibleIndex--;
if (visibleIndex < 0) {
visibleIndex = totalImages - 1;
}
resetVisible();
renderVisible();
}
function resetVisible() {
for (let index = 0; index < totalImages; index++) {
carousalImages[index].className = "carousal__image";
}
}
function renderVisible() {
carousalImages[visibleIndex].className = "carousal__image--visible";
}
function renderCarousel({ autoplay = false, autoplayTime = 1000 } = {}) {
if (autoplay) {
[...document.querySelectorAll("button")].forEach(
(btn) => (btn.style.display = "none")
);
setInterval(() => {
makeNextVisible();
}, autoplayTime);
} else renderVisible();
}
renderCarousel();
// Add {autoplay:true} as argument to above to autplay the carousel.
this.makeNextVisible = makeNextVisible;
this.makePrevVisible = makePrevVisible;
})();
.carousal {
display: flex;
align-items: center;
}
.carousal__wrapper {
width: 500px;
height: 400px;
}
.carousal__images {
display: flex;
overflow: hidden;
list-style-type: none;
padding: 0;
}
.carousal__image--visible {
position: relative;
}
.carousal__image {
display: none;
}
<div class='carousal'>
<div class='carousal__left'>
<button onclick='makePrevVisible()'>Left</button>
</div>
<section class='carousal__wrapper'>
<ul class='carousal__images'>
<li class='carousal__image'>
<img src='https://fastly.syfy.com/sites/syfy/files/styles/1200x680/public/2018/03/dragon-ball-super-goku-ultra-instinct-mastered-01.jpg?offset-x=0&offset-y=0' alt='UI Goku' / width='500' height='400'/>
</li>
<li class='carousal__image'>
<img src='https://www.theburnin.com/wp-content/uploads/2019/01/super-broly-3.png' alt='Broly Legendary' width='500' height='400'/>
</li>
<li class='carousal__image'>
<img src='https://lh3.googleusercontent.com/proxy/xjEVDYoZy8-CTtPZGsQCq2PW7I-1YM5_S5GPrAdlYL2i4SBoZC-zgtg2r3MqH85BubDZuR3AAW4Gp6Ue-B-T2Z1FkKW99SPHwAce5Q_unUpwtm4' alt='Vegeta Base' width='500' height='400'/>
</li>
<li class='carousal__image'>
<img src='https://am21.mediaite.com/tms/cnt/uploads/2018/09/GohanSS2.jpg' alt='Gohan SS2' width='500' height='400'/>
</li>
</ul>
</section>
<div class='carousal__right'>
<button onclick='makeNextVisible()'>Right</button>
</div>
</div>
Updated codepen with feedback from the below answers and minor additional functionalities = https://codepen.io/lapstjup/pen/RwoRWVe

I think the trick is pretty simple. ;)
You should not move one or two images at the same time. Instead you should move ALL images at once.
Let's start with the CSS:
.carousal {
position: relative;
display: block;
}
.carousal__wrapper {
width: 500px;
height: 400px;
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.carousal__wrapper,
.carousal__images {
transform: translate3d(0, 0, 0);
}
.carousal__images {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.carousal__image {
float: left;
height: 100%;
min-height: 1px;
}
2nd step would be to calculate the maximum width for .carousal__images. For example in your case 4 * 500px makes 2000px. This value must be added to your carousal__images as part of the style attribute style="width: 2000px".
3rd step would be to calculate the next animation point and using transform: translate3d. We start at 0 and want the next slide which means that we have slide to the left. We also know the width of one slide. So the result would be -500px which also has to be added the style attribute of carousal__images => style="width: 2000px; transform: translate3d(-500px, 0px, 0px);"
That's it.
Link to my CodePen: Codepen for Basic Carousel with Autoplay

Try this. First stack all the images next to each other in a div and only show a single image at a time by setting overflow property to hidden for the div. Next, add event listeners to the buttons. When a bottom is clicked, the div containing the images is translated by -{size of an image} * {image number} on the x axis. For smooth animation, add transition: all 0.5s ease-in-out; to the div.
When someone clicks left arrow on the first image, the slide should display the last image. So for that counter is set to {number of images} - 1 and image is translated to left size * counter px.
For every click on the right arrow, the counter is incremented by 1 and slide is moved left. For every click on the left arrow, the counter is decremented by 1.
Slide.style.transform = "translateX(" + (-size * counter) + "px)"; this is the condition which is deciding how much the slide should be translated.
const PreviousButton = document.querySelector(".Previous-Button");
const NextButton = document.querySelector(".Next-Button");
const Images = document.querySelectorAll("img");
const Slide = document.querySelector(".Images");
const size = Slide.clientWidth;
var counter = 0;
// Arrow Click Events
PreviousButton.addEventListener("click", Previous);
NextButton.addEventListener("click", Next);
function Previous() {
counter--;
if (counter < 0) {
counter = Images.length - 1;
}
Slide.style.transform = "translateX(" + (-size * counter) + "px)";
}
function Next() {
counter++;
if (counter >= Images.length) {
counter = 0;
}
Slide.style.transform = "translateX(" + (-size * counter) + "px)";
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.Container {
width: 60%;
margin: 0px auto;
margin-top: 90px;
overflow: hidden;
position: relative;
}
.Container .Images img {
width: 100%;
}
.Images {
transition: all 0.5s ease-in-out;
}
.Container .Previous-Button {
position: absolute;
background: transparent;
border: 0px;
outline: 0px;
top: 50%;
left: 20px;
transform: translateY(-50%);
filter: invert(80%);
z-index: 1;
}
.Container .Next-Button {
position: absolute;
background: transparent;
border: 0px;
outline: 0px;
top: 50%;
right: 20px;
transform: translateY(-50%);
filter: invert(80%);
z-index: 1;
}
.Container .Images {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Carousel</title>
</head>
<body>
<div class="Container">
<button class="Previous-Button">
<svg style = "transform: rotate(180deg);" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg>
</button>
<button class="Next-Button">
<svg xmlns="http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg>
</button>
<div class="Images">
<img src="https://source.unsplash.com/1280x720/?nature">
<img src="https://source.unsplash.com/1280x720/?water">
<img src="https://source.unsplash.com/1280x720/?rock">
<img src="https://source.unsplash.com/1280x720/?abstract">
<img src="https://source.unsplash.com/1280x720/?nature">
<img src="https://source.unsplash.com/1280x720/?trees">
<img src="https://source.unsplash.com/1280x720/?human">
<img src="https://source.unsplash.com/1280x720/?tech">
</div>
</div>
<script src="main.js"></script>
</body>
</html>

JavaScript moving text animation doesn't work. FULL CODE

JS: My problem is in running the following JS script, it's supposed to be very easy ,i think, but i can't understand why won't it run. I've just started coding and i'm already stuck in this problem. I want the text to go up (by increasing the bottom in CSS) for 5px until it reaches pos=6 ; then clearInterval should do its job.
CSS: I've put the position of div's to RELATIVE as i've read in some tutorials but didn't put the " container's " position to ABSOLUTE, may it be the problem?
<html>
<head>
<style>
html {
height: 100%;
}
body {
height: ;
width: 100%;
background-color: ;
margin: 0px;
padding: 0px;
}
#generale {
height: 100%;
width: 100%;
}
#intestazione {
height: 7%;
width: 100%;
float: left;
background-image: url(immagini/sfumatura.png);
position: static;
}
#profilo {
position: static;
float: right;
width: 12%;
height: 100%;
}
.testo_rialzato {
position: relative;
float: right;
width: auto;
height: 100%;
padding-left: 20px;
padding-right: 20px;
background-color: transparent;
}
</style>
</head>
<body>
<div id="generale">
<div id="intestazione">
<div id="profilo"></div>
<div class="testo_rialzato sumba">
<p>Sp</p>
</div>
<div class="testo_rialzato ap">
<p>App</p>
</div>
<div class="testo_rialzato te">
<p>Te</p>
</div>
<div class="testo_rialzato do">
<p>Dom</p>
</div>
<div class="testo_rialzato big">
<p style="line-height:70%; margin-top:8px; text-align:center;">Big</p>
</div>
</div>
<script>
var ez = document.querySelectorAll(".sumba , .ap , .te , .do, .big");
ez.onmouseover = alza();
var intervallo = setInterval(alza, 100);
function alza() {
var pos = 0;
if (pos = 6) {
clearInterval(intervallo);
} else {
ez.style.bottom = pos + "px";
}
}
</script>
</div>
</body>
</html>

First thing is , why declaring you are using event on an array of dome node (result of querySelectorAll will return array of domenodes ) so in order to attach mouseover and also apply some style you have to loop around those nodes .
Seconde thing while declaring set interval, its usless to use mousemovehere ?
Also the condition if is wrong you're using assignment , so you have to use == or === in order to make comaparison .
See below snippet :
var ez = document.querySelectorAll(".sumba , .ap , .te , .do, .big");
var pos = 0;
var intervallo = setInterval(alza, 100);
ez.forEach(function(el){
el.addEventListener("mouseover", alza);
})
function alza() {
if (pos == 25) {
clearInterval(intervallo);
} else {
ez.forEach(function(el){
el.style.bottom = pos + "px";
});
pos++;
}
}
.sumba, .ap {
position:absolute;
}
.ap {
color:red;
left:40px
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="sumba">Text</div>
<div class="ap">Text 2</div>

try this
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
}
</style>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="container">
<div id ="animate">ggg</div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>

JS function is passed a different value depending on whether I'm executing or debugging

PROBLEM: Element with id "containerLnkMenu" does not center correctly in it's parent div when passed into the js function "centerElementYParent" unless I put a break point in the function using google chrome's debugger.
The "getComputedStyle(f, null)" call returns a "0px" for height if executed normally so I end up with a '-57px' for the margin-top.
COMMENT: So I found a few people that had similar problems on the internet, but I couldn't find a way to map their solution to my needs.
Any help on this would be appreciated.
Let me know if you need me to explain anything further.
I would prefer a detailed response or links to further reading, that is related to my issue (so I can learn from this error), but any related/helpful comment is welcome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<div id="btnMenu" class="borderRadius" style="top: 10px; left: 10px;" onClick="btnMenuClicked(this)">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
<div id="menu" class="borderRadius" style="width: 0px; height: 0px;">
<div id="containerLnkMenu">
<a id="lnkNews" class="centerTxt lnkMenu" href="">NEWS</a>
<a id="lnkFiles" class="centerTxt lnkMenu" href="">FILES</a>
<a id="lnkTree" class="centerTxt lnkMenu" href="">TREE</a>
</div>
</div>
</body>
<script>
function btnMenuClicked(e) {
animateBtnMenu(e);
var menu = document.getElementById('menu');
var menuStyle = window.getComputedStyle(menu, null);
if (menuStyle.width == '0px' && menuStyle.height == '0px') {
openMenu(menu, menuStyle, e);
centerElementYParent(document.getElementById('containerLnkMenu'), document.getElementById('menu'));
} else {
closeMenu(menu, menuStyle, e);
}
}
</script>
</html>
body {
margin: 0;
font-family: Arial;
font-size: 16px;
}
a {
display: block;
text-decoration: none;
cursor: pointer;
}
/* Class Tools */
.centerTxt { text-align: center; }
.borderRadius { border-radius: 5px; }
.bar {
height: 5px;
transition: 0.4s;
background-color: #2E0A91;
}
.lnkMenu {
padding: 5px;
color: #FFD500;
font-size: 1.5em;
}
/*--- navigation ---*/
#btnMenu {
position: fixed;
width: 25px;
padding: 5px;
transition: 0.8s;
cursor: pointer;
}
#btnMenu:hover { background-color: #2E0A91; }
#btnMenu:hover .bar { background-color: #D4B100; }
#bar2 { margin: 5px 0 5px 0; }
.change #bar1 {
transform: rotate(-45deg) translate(-10px, 4px);
width: 141%;
}
.change #bar2 { opacity: 0; }
.change #bar3 {
transform: rotate(45deg) translate(-10px, -4px);
width: 141%;
}
#menu {
position: fixed;
z-index: 100;
top: 0;
left: 0;
overflow: hidden;
transition: 0.8s;
background-color: #2E0A91;
}
//NAME: centerElementYParent
//DESCRITPTION: e = element to center, f = parent element
// Adds margin top to e in order to vertically center element within parent (f)
function centerElementYParent(e, f) {
var eStyle = window.getComputedStyle(e, null);
var fStyle = window.getComputedStyle(f, null);
console.log(fStyle.height);
var eHeight = parseInt(eStyle.height.slice(0, eStyle.height.length - 2));
var fHeight = parseInt(fStyle.height.slice(0, fStyle.height.length - 2));
var marginTop = ((fHeight - eHeight)/2) + 'px';
e.style.marginTop = marginTop;
}
//NAME: animateBtnMenu
//DESCRIPTION: Attaches the 'change' class to the btnMenu element.
function animateBtnMenu(e) {
e.classList.toggle('change');
}
//NAME: openMenu
//DESCRIPTION: Applies a width and height to the menu whilst moving the menu button respectivley
function openMenu(e, eStyle, f) {
e.style.height = '250px';
e.style.width = '300px';
var eStyle = window.getComputedStyle(e, null);
f.style.left = '310px';
f.style.top = '260px';
}
//NAME: closeMenu
//DESCRIPTION: Sets width and height of the menu to 0 and moves the menu button respectivley
function closeMenu(e, eStyle, f) {
e.style.width = '0px';
e.style.height = '0px';
f.style.top = '10px';
f.style.left = '10px';
}

It may be because the element you want to center didn't rendered on the right position yet. Try adding setTimeout to call the function.
openMenu(menu, menuStyle, e);
setTimeout(function() {
centerElementYParent(document.getElementById('containerLnkMenu'), document.getElementById('menu'));
}, 800);

javascript animation - buttons using previous end point

I'm trying to have a bar slide up and down over the below image, based on certain values triggered by buttons. Ideally the new "start" position every time is the previously entered "end" position (unless there is a better method). Here is the
example image
My code below accomplished most of what I want, except I'd love to have the bar smoothly slide between the desired values after each button click. Thanks!
<!DOCTYPE html>
<html>
</script>
</body>
</html>
<style>
#container {
width: 19px;
height: 186px;
position: relative;
background: clear;
margin: 0px;
}
#animate {
border: 1px solid white;
width: 32px;
height: 12px;
position: absolute;
background-color: #252525;
}
</style>
<body>
<p>
<button onclick="myMove(0 ,20)">Move to Orange</button>
<button onclick="myMove(20, 100)">Move to Green</button>
<button onclick="myMove(100, 155)">Move to Blue</button>
</p>
<div id ="container">
<img src="https://dl.dropboxusercontent.com/u/377009668/webGL/stuff/legendVertical.png" alt="Fit Map Legend" style="float:left">
<div id ="animate"></div>
</div>
<script>
function myMove(start, stop) {
var elem = document.getElementById("animate");
var id = setInterval(frame, 5);
function frame() {
if (start == stop) {
clearInterval(id);
} else {
start++;
elem.style.top = start + 'px';
}
}
}
</script>
</body>
</html>

In order to have the bar slide smoothly to the next position, rather than sliding from the top again, you need to know where the bar currently is starting from.
This can be achieved in a few ways, either by having a global variable store the current position, or by recalculating the current position of it each time you call myMove.
The other thing you need to take into account is that the slider may need to slide up to get to the correct position, not just down. This is easiest to handle in the same if/else statement that you are already using to check if the bar is already in the correct position.
Example using a global variable to keep track of the current position:
(as a bonus myMove() no longer needs to be given a starting location as a parameter, just the location you want the bar to end up at).
<!DOCTYPE html>
<html>
</script>
</body>
</html>
<style>
#container {
width: 19px;
height: 186px;
position: relative;
background: clear;
margin: 0px;
}
#animate {
border: 1px solid white;
width: 32px;
height: 12px;
position: absolute;
background-color: #252525;
}
</style>
<body>
<p>
<button onclick="myMove(20)">Move to Orange</button>
<button onclick="myMove(100)">Move to Green</button>
<button onclick="myMove(5)">Move to Blue</button>
</p>
<div id ="container">
<img src="https://dl.dropboxusercontent.com/u/377009668/webGL/stuff/legendVertical.png" alt="Fit Map Legend" style="float:left">
<div id ="animate"></div>
</div>
<script>
var start = 0;
function myMove(stop) {
var elem = document.getElementById("animate");
var id = setInterval(frame, 5);
function frame() {
if (start == stop) {
clearInterval(id);
} else if (start > stop){
start--;
elem.style.top = start + 'px';
} else {
start++;
elem.style.top = start + 'px';
}
}
}
</script>
</body>
</html>

Amazing smooth animation using CSS3 transition
Use of data-* attribute instead of inline JS calls
Simple JS code
var moveBtn = document.querySelectorAll("[data-move]");
var bar = document.getElementById("animate");
function move(el) {
el.addEventListener("click", function(){
bar.style.transform = "translateY("+ this.dataset.move +"px)";
});
}
[].forEach.call(moveBtn, move);
#container {
width: 19px;
height: 186px;
position: relative;
}
#animate {
border: 3px solid #444;
width: 14px;
height: 8px;
position: absolute;
top:0;
-webkit-transition: 0.4s;
transition: 0.4s;
}
<p>
<button data-move="20">Move to Orange</button>
<button data-move="100">Move to Green</button>
<button data-move="170">Move to Blue</button>
</p>
<div id ="container">
<img src="http://i.stack.imgur.com/3pLSG.png" alt="Fit">
<div id="animate"></div>
</div>

How can I add limits to a custom scrolling element?

I have a pretty huge image being displayed in a container, the image stretches with the view port as it gets resized, but as the image is so big I have added scroller buttons to the side of the page, up and down, the only problem I have now is that when I press up or down there is no limit, the user can keep going until the image is completely out of sight, how can I stop that from happening?
Here is the code I have thus far,
HTML:
<body>
<div id="wrapper">
<div class="scroll top"></div>
<div id="content">
<div id="zoom_container">
<img id="image" src="8052x2000px" />
</div>
</div>
<div class="scroll bot"></div>
</div>
</body>
CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
overflow: hidden;
height: 100%;
max-height: 100%;
}
#content {
min-height: 100% !important;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#image {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
jQuery:
//side scroller bar
$('.scroll').live('click', function(){
var direction = $(this).hasClass('top');
var img_pos_top = $("#zoom_container img").position().top;
var inc = 0;
inc = $("#zoom_container img").height() / 10;
if(direction)
{
inc = $("#zoom_container img").position().top + inc;
}
else
{
inc = $("#zoom_container img").position().top - inc;
}
$("#zoom_container img").css({ position: 'relative',top: inc });
});
so as you can see I am incrementing or decrementing the top positioning of the image by 10% of it's height each click, how can I make sure the top of the image will never go further down than the top of the viewport and the bottom of the image never further up than the bottom of the viewport?
Is there a better more efficient way of achieving the same result?

Have a try this one.
<html>
<head>
<title>Canvas Sizing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var canvasContext;
resizeCanvas();
$(window).resize(function() { resizeCanvas() });
function resizeCanvas()
{
var w = window.innerWidth - 40;
var h = window.innerHeight - 40;
var canvasString = '<canvas id="mainCanvas" width="' + w + '" height="' + h + '">Canvas is not supported</canvas>';
$('#contentholder').empty();
$(canvasString).appendTo('#contentholder');
canvasContext = $('#mainCanvas').get(0).getContext('2d');
drawOnCanvas();
}
function drawOnCanvas()
{
var x = 15;
var y = 35;
canvasContext.font = "30pt serif";
canvasContext.fillStyle="#0f0";
canvasContext.fillText("Hello World!", x, y);
}
});
</script>
<style>
#mainCanvas
{
background-color: #000;
border: solid 3px #0F0;
}
body
{
background: #000;
}
#contentholder
{
width: 99%;
height: 99%;
margin: auto;
}
</style
</head>
<body>
<div id="contentholder"></div>
</body>