I want the inner circle to stay within the outer circle when moving it. The inner circle should still be animated though. I tried to use overflow: hidden, but that didn't work. It would be great if anyone could give me advice. Thank you in advance!
$(document).mousemove(function( event ) {
$(".cursor-circle, .cursor-inner-wrap").css({
"top": (event.pageY - 65) + "px",
"left": (event.pageX - 65) + "px"
});
});
body {
background: rgb(20,20,20);
}
.cursor-circle{
border: 1px solid white;
border-radius: 100%;
width: 120px;
height: 120px;
overflow: hidden;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
}
.cursor-wrap{
width: 120px;
height: 120px;
position: absolute;
}
.cursor-inner-wrap{
width: 120px;
height: 120px;
position: absolute;
display: flex;
align-items: center;
}
.cursor-inner {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #fff;
}
.cursor-inner{
width: 20px;
height: 20px;
background: white;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
border-radius: 100%;
transition-duration: 199ms;
transition-timing-function: ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor-wrap">
<div class="cursor-circle"></div>
<div class="cursor-inner-wrap">
<div class="cursor-inner"></div>
</div>
</div>
Since the .cursor-circle has a transition, and the .cursor-inner-wrap is not. All changes effect the .cursor-inner-wrap immediately, while the circle takes time to reach the same place. Move the transition from .cursor-inner to .cursor-inner-wrap, and set the the duration of the transition to be slightly less of that of the circle:
$(document).mousemove(function(event) {
$(".cursor-circle, .cursor-inner-wrap").css({
"top": (event.pageY - 65) + "px",
"left": (event.pageX - 65) + "px"
});
});
body {
background: rgb(20, 20, 20);
}
.cursor-circle {
border: 1px solid white;
border-radius: 100%;
width: 120px;
height: 120px;
position: absolute;
transition: 200ms ease-out;
}
.cursor-inner-wrap {
display: flex;
width: 120px;
height: 120px;
position: absolute;
align-items: center;
justify-content: center;
transition: 140ms ease-out;
}
.cursor-inner {
z-index: 2;
width: 20px;
height: 20px;
border-radius: 100%;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor-wrap">
<div class="cursor-circle"></div>
<div class="cursor-inner-wrap">
<div class="cursor-inner"></div>
</div>
</div>
Related
I made this mini game and I want that my "player" named div to move to left and right inside of the "game" div but I'm stuck. Can someone help me? I think my error is inside of the JavaScript file... Also if my "player" div moves, will my "gun" div move with it too?
let modifier = 50;
let player = document.getElementById('player');
window.addEventListener('keydown', (event) => {
const {
style
} = player;
switch (event.key) {
case 'ArrowRight':
style.left = `${parseInt(style.left) - modifier}px`;
break;
case 'ArrowLeft':
style.left = `${parseInt(style.left) + modifier}px`;
break;
}
});
body {
margin: 0;
padding: 0;
background-color: mediumblue;
height: 800px;
overflow: hidden;
}
p {
font-size: 48pt;
color: black;
font-family: fantasy;
font-weight: bold;
position: relative;
left: 300px;
top: -50px;
}
.game {
width: 800px;
height: 500px;
position: center;
border: 14px solid darkblue;
border-radius: 5px;
margin-left: 300px;
margin-top: -100px;
background-color: black;
}
#player {
height: 20px;
width: 40px;
background-color: firebrick;
border-radius: 2px;
position: relative;
top: 470px;
left: 400px;
}
#gun {
position: relative;
height: 40px;
width: 10px;
background-color: firebrick;
top: -20px;
left: 15px;
border-radius: 2px;
}
#bullet {
position: relative;
background-color: darkorange;
width: 8px;
height: 20px;
top: 0;
left: 1px;
animation: shoot 0.7s linear;
}
#keyframes shoot {
0% {
top: 0px;
}
100% {
top: -470px;
}
}
<p>Galaxy Invaders</p>
<div class="game">
<div id="player">
<div id="gun">
<div id="bullet"></div>
</div>
</div>
<div id="enemy"></div>
</div>
<script src="js.js"></script>
You need to use getComputedStyle: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
let modifier = 50;
let player = document.getElementById('player');
window.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowRight':
player.style.left = (parseInt(getComputedStyle(player).left) + modifier) + "px";
break;
case 'ArrowLeft':
player.style.left = (parseInt(getComputedStyle(player).left) - modifier) + "px";
break;
}
});
body {
margin: 0;
padding: 0;
background-color: mediumblue;
height: 800px;
overflow: hidden;
}
p {
font-size: 48pt;
color: black;
font-family: fantasy;
font-weight: bold;
position: relative;
left: 300px;
top: -50px;
}
.game {
width: 800px;
height: 500px;
position: center;
border: 14px solid darkblue;
border-radius: 5px;
margin-left: 300px;
margin-top: -100px;
background-color: black;
}
#player {
height: 20px;
width: 40px;
background-color: firebrick;
border-radius: 2px;
position: relative;
top: 470px;
left: 400px;
}
#gun {
position: relative;
height: 40px;
width: 10px;
background-color: firebrick;
top: -20px;
left: 15px;
border-radius: 2px;
}
#bullet {
position: relative;
background-color: darkorange;
width: 8px;
height: 20px;
top: 0;
left: 1px;
animation: shoot 0.7s linear;
}
#keyframes shoot {
0% {
top: 0px;
}
100% {
top: -470px;
}
}
<p>Galaxy Invaders</p>
<div class="game">
<div id="player">
<div id="gun">
<div id="bullet"></div>
</div>
</div>
<div id="enemy"></div>
</div>
HTML elements CSS property values acquired by .style aswell as per getComputedStyle() will be returned by Javascript as strings like 10px for div { left: 10px}, containing unit types depending on the CSS property.
You will have to substract the unit types from those strings and then your parseInt should work:
parseInt(style.left.replace('px', ''))
i tried making an easy working clock but i have no idea how to get the clock hands to rotate. i tried to use "#keyframes" to try to get it working but i dont know what to put in "before". is there a way to make it rotate using only css or will using javascript be easier. the link below shows my work but you can also look below and see my code.
https://codepen.io/dior44/pen/GRZMZdy
h1 {
margin: -40px 0 0 0;
font-size: 50px;
position: relative;
top: 100px;
}
div {
margin: 0 auto;
}
.clock {
height: 400px;
width: 400px;
border-radius: 400px;
background: #cccc;
}
.dot {
height: 60px;
width: 60px;
border-radius: 60px;
background: #aaa;
position: relative;
top: 120px;
left: -27px;
z-index: -1;
}
.hours {
width: 7px;
height: 90px;
background: blue;
position: relative;
top: 100px;
}
.minutes {
width: 5px;
height: 170px;
background: black;
position: relative;
top: -50px;
}
.seconds {
width: 3px;
height: 220px;
background: red;
position: relative;
top: -10px;
animation-name: second;
animation-duration: 1s;
}
#keyframes second {
from {
}
}
h2 {
position: relative;
top: 45px;
left: 738px;
font-size: 35px;
margin: -20px 0 0 0;
}
h3 {
margin: -140px 0 0 0;
font-size: 35px;
position:relative;
top: 310px;
left: 920px;
}
h4 {
margin: 3px 0 0 0;
position: relative;
top: 268px;
left: 570px;
font-size: 35px;
}
h5 {
margin: 20px 0 0 0;
position: relative;
top: 400px;
left: 738px;
font-size: 35px;
}
<h1>Clock</h1>
<h2>12</h2>
<h3>3</h3>
<h4>9</h4>
<h5>6</h5>
<body>
<div class="clock">
<div class="hours">
<div class="minutes">
<div class="seconds">
<div class="dot">
<div class="12">
<div class="3">
<div class="6">
<div class="9">
</body>
Pure HTML/CSS second hand:
#clock_container {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid black;
}
#seconds {
height: 50%;
width: 0px;
box-sizing: border-box;
border: 1px solid black;
top: 0%;
left: 50%;
position: absolute;
transform-origin: bottom;
/* of-course, would be 60s */
animation: secondsMotion 10s infinite linear;
}
#keyframes secondsMotion {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div id="clock_container">
<div id="seconds"></div>
</div>
If you wanted to start with the correct time - with a little JS early on:
var sec = new Date().getSeconds();
var sec_start = (sec/60) * 360 + 'deg';
var sec_end = (sec/60) * 360 + 360 + 'deg';
document.documentElement.style.setProperty("--sec-rot-start", sec_start);
document.documentElement.style.setProperty("--sec-rot-end", sec_end);
and then, in the keyframes:
#keyframes secondsMotion {
0% {
transform: rotate(var(--sec-rot-start));
}
100% {
transform: rotate(var(--sec-rot-end));
}
}
I've a form I'm creating, and I'll have some sections that will apear from right to left, on top of that and fixed is a bar, that should increase in width each time I click on continue to go to the next question. that way user will know he's progressing. I can't make work my progress bar, can you help me figure out why?
HTML
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<div class="questionsContainer">
<div class="section one">
<p class="sectionTitle">This is the First Question?</p>
<div class="buttonContinue" id="section2">CONTINUE</div>
</div>
<div class="section two">
<p class="sectionTitle">Aja! time for the Second one!!</p>
<div class="buttonContinue" id="section3">CONTINUE</div>
</div>
<div class="section three">
<p class="sectionTitle">Another Question? 3 so far?</p>
<div class="buttonContinue" id="section4">CONTINUE</div>
</div>
</div>
CSS
body {
margin: 0 auto;
transition: all 0.2s ease;
}
.progress-container {
width: 100%;
height: 4px;
background: transparent!important;
position: fixed;
top: 0;
z-index: 99;
}
.progress-bar {
height: 4px;
background: #4ce4ff;
width: 10%;
}
header {
width: 100%;
height: 150px;
position: relative;
background-color: fuchsia;
}
.questionsContainer {
width: 100%;
height: calc(100% - 200px);
position: absolute;
background-color: lime;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
background-color: black;
}
.section {
background-color: purple;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.one {
position: absolute;
right: auto;
transition: all 0.2s ease;
}
.two {
position: absolute;
right: -100%;
transition: all 0.2s ease;
}
.three {
position: absolute;
right: -100%;
transition: all 0.2s ease;
}
.sectionTitle {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 30px;
margin: 0 auto;
}
.buttonContinue {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 16px;
padding: 10px 20px;
background-color: red;
border-radius: 5px;
margin: 20px 0px;
text-align: center;
cursor: pointer;
width: 100px;
}
JAVASCRIPT
<script type="text/javascript">
document.getElementById('section2').onclick = function(){
$('.one').css('right','100%');
$('.two').css('right','auto');
}
document.getElementById('section3').onclick = function(){
$('.two').css('right','100%');
$('.three').css('right','auto');
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#section2").click(addVisit);
$("#section3").click(addVisit);
$("#section4").click(addVisit);
});
function addVisit(){
var progressTag = $('#myBar');
count ++;
progressTag.css('width', count * 10 + "%");
});
</script>
Your main issue is that the count variable has not been created and given a value initially.
I have optimized your code a bit and this is how I did it:
var count = 1;
$(document).ready(function() {
$("#section2, #section3, #section4").click(function() {
$('#myBar').css('width', ++count * 10 + "%");
});
});
I also added transition: all 1s; for animated CSS transition.
Here is your updated code in JSFiddle
I think this will be a problem really difficult to solve...
I created a speedometer that shows number of earthquakes occured in my city.
I want to animate this speedometer in two way:
background-color (green when there aren't quakes and red when there are 3000 quakes) and width of this colored div (the div where i animate background-color).
So the width will be 0 when there aren't quakes and will be 100% when there are 3000 quakes.
The animation is 2 seconds, so for example if i have 1500 quakes:
Add the class for animate speedometer
$('#first').addClass('first-start');
And using setTimeout i add a class to stop the animation after 1 second
setTimeout(function() {
$('#first').addClass('first-pause');
}, 1000);
This code almost always works great.
Now i add a snippet:
$('#first').addClass('first-start');
setTimeout(function() {
$('#first').addClass('first-pause');
}, 1000);
#page {
margin-top: 50px;
width: 300px;
height: 300px;
background-color: #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 4;
overflow: hidden;
}
#box-first{
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0 0;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-start;
z-index: 3;
overflow: hidden;
}
#first{
border-radius: 200px 200px 0 0;
margin: 0;
background: red;
width: 200px;
height: 100px;
transform: rotate(180deg);
transform-origin: 50% 100%;
position: absolute;
top: 0px;
right: 0px;
border: 0;
z-index: 1;
}
#n1{
font-size: 20px;
color: #fff;
font-weight: bold;
position: absolute;
left: 50px;
right: 0;
text-align: center;
top: 50px;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100px;
height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
overflow: hidden;
}
#keyframes first {
0% {
background-color: green;
transform: rotate(180deg);
}
33% {
background-color: yellow;
transform: rotate(240deg);
}
66% {
background-color: orange;
transform: rotate(300deg);
}
100% {
background-color: red;
transform: rotate(360deg);
}
}
.first-start {
animation: first 2s linear;
}
.first-pause {
animation-play-state: paused;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<div id="box-first">
<div id="first">
</div>
<div id="n1">
1500
</div>
</div>
</div>
https://jsfiddle.net/hoymds97/
The problem is that i use this code in a big file (4000 lines) with a lot of events and in the same function there are 8 speedometers.
I noticed that sometimes (when there are more events) setTimeout not start immediately after added class for animate speedometer.
As a result, the animation will stop after ...
In our case, for example, it is as if it blocked after 1700 milliseconds and not 1000 seconds. Sometimes it stops even after 2 seconds.
I think the problem is the many events in the queue.
So how can i solve this problem ?
Is possible to solve using always setTimeout or without it?
I hope you can help me and sorry for my english.
Here is a complete new idea that relies on transition instead of animation and where you can easily adjust the state without synchronization issue.
The main trick is to use a gradient for the background coloration and adjust its position in order to have the needed color.
Here is a simple code to illustrate the coloration:
.box {
background: linear-gradient(to right, green, yellow, orange, red);
background-size: 2000% 100%;
transition:1s;
background-repeat: no-repeat;
background-position: 0 0;
height: 200px;
}
.box:hover {
background-position: 100% 0;
}
<div class="box">
</div>
As you can see, I defined a gradient with the 4 colors and we simply need to adjust the background-size in order to have the coloration (0% for green and 100% for red). This won't be exactly the same visually because we will not have a solid color like with animation and for this reason I made the background-size big enough to create the illusion of a solid color.
Now, we simply need to find the values of the background-position and the degree which is pretty easy. The backround-position is a value between 0% and 100% and the degree is a value between 180deg and 360deg. For the state 50% we will logically use 50% for the background-position and 270deg for the transformation and for an x% state we will use respectively x% and x%*(360deg - 180deg) + 180deg = x%*180deg + 180deg = 180deg(x% + 1)
Here is an example with 50% (hover to see)
#page {
margin-top: 50px;
width: 300px;
height: 300px;
background-color: #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 4;
overflow: hidden;
}
#box-first{
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0 0;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-start;
z-index: 3;
overflow: hidden;
}
#first{
border-radius: 200px 200px 0 0;
margin: 0;
background: linear-gradient(to right, green, yellow, orange, red);
background-size: 2000% 100%;
background-repeat:no-repeat;
background-position:0% 0%;
transition:1s;
width: 200px;
height: 100px;
transform: rotate(180deg);
transform-origin: 50% 100%;
position: absolute;
top: 0px;
right: 0px;
border: 0;
z-index: 1;
}
#box-first:hover #first{
transform: rotate(270deg);
background-position:50% 0%;
}
#n1{
font-size: 20px;
color: #fff;
font-weight: bold;
position: absolute;
left: 50px;
right: 0;
text-align: center;
top: 50px;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100px;
height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
overflow: hidden;
}
<div id="page">
<div id="box-first">
<div id="first">
</div>
<div id="n1">
1500
</div>
</div>
</div>
In order to make this dynamic, we need to adjust the values using JS and the transition will do the job. For this we can define a data-attribute for the state that we convert to the needed value.
Here is an example where I also simplified the html and used pseudo element and CSS variables
setTimeout(function() {
$('.box').each(function() {
var d = $(this).data('state');
$(this).attr("style", "--s:" + d);
});
}, 1000);
body {
margin: 0;
background: #000;
}
.box {
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0 0;
margin: 10px;
position: relative;
display: inline-flex;
z-index: 0;
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
z-index: -1;
border-radius: 200px 200px 0 0;
background: linear-gradient(to right, green, yellow, orange, red);
background-size: 2000% 100%;
background-repeat: no-repeat;
background-position: calc(var(--s, 0) * 1%) 0%;
transition:2s linear;
width: 200px;
height: 100px;
transform: rotate(calc((var(--s, 0)/100 + 1)*180deg));
transform-origin: 50% 100%;
top: 0px;
right: 0px;
}
.box:after {
content: attr(data-number);
font-size: 20px;
color: #fff;
font-weight: bold;
text-align: center;
margin: auto auto 0;
width: 100px;
height: 50px;
line-height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-number="1500" data-state="50"></div>
<div class="box" data-number="1000" data-state="20"></div>
<div class="box" data-number="3000" data-state="80"></div>
<div class="box" data-number="6000" data-state="100"></div>
You may notice that all will have the same duration since the transition is the same for all. In case you want a different duration and keep the same speed, simply use the CSS variable within the transition also.
setTimeout(function() {
$('.box').each(function() {
var d = $(this).data('state');
$(this).attr("style", "--s:" + d);
});
}, 1000);
body {
margin: 0;
background: #000;
}
.box {
width: 200px;
height: 100px;
background-color: #fff;
border-radius: 200px 200px 0 0;
margin: 10px;
position: relative;
display: inline-flex;
z-index: 0;
overflow: hidden;
}
.box:before {
content: "";
position: absolute;
z-index: -1;
border-radius: 200px 200px 0 0;
background: linear-gradient(to right, green, yellow, orange, red);
background-size: 2000% 100%;
background-repeat: no-repeat;
background-position: calc(var(--s, 0) * 1%) 0%;
transition: calc(2s * var(--s, 0)/100) linear;
width: 200px;
height: 100px;
transform: rotate(calc((var(--s, 0)/100 + 1)*180deg));
transform-origin: 50% 100%;
top: 0px;
right: 0px;
}
.box:after {
content: attr(data-number);
font-size: 20px;
color: #fff;
font-weight: bold;
text-align: center;
margin: auto auto 0;
width: 100px;
height: 50px;
line-height: 50px;
background: #000;
border-radius: 100px 100px 0 0;
z-Index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-number="1500" data-state="50"></div>
<div class="box" data-number="1000" data-state="20"></div>
<div class="box" data-number="3000" data-state="80"></div>
<div class="box" data-number="6000" data-state="100"></div>
I'm working on a Roulette site, i just can't get the roulette animation to work.
I have an image for the roulette but i need the image to disappear after a certain amount of % and that the image loops around to the left.
This is how it kind of needs to look like (it doesn't end at the end of the border, and doesn't loop around to the left thought.):
$("#right").click(function () {
$("#one").css("left", "200px");
$("#two").css("left", "200px");
$("#three").css("left", "200px");
$("#four").css("left", "200px");
$("#five").css("left", "200px");
$("#six").css("left", "200px");
});
$("#left").click(function () {
$("#one").css("left", "0px");
});
section {
width: 80%;
height: 50px;
border: 5px solid black;
margin: auto;
padding: 7px;
z-index: 1;
transition: left 2s ease;
}
div#one {
width: 15%;
height: 50px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#six {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#five {
width: 15%;
height: 50px;
background: black;
float: left;
margin-left: 5px;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#two {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#three {
width: 15%;
height: 50px;
margin-left: 5px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#four {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</section>
<button id="right">
left: 100px;
</button>
And this is what i want it to look like, but the border has to end near the end of the screen, and the image has to be invisible outside the border, and loop around:
div.numbers {
display: inline-flex;
border: 4px solid gray;
}
div.numbers img {
margin-right: 5px;
}
<section>
<div class="numbers">
<img src="https://image.ibb.co/jrnaVG/cases.png">
<img src="https://image.ibb.co/jrnaVG/cases.png">
<img src="https://image.ibb.co/jrnaVG/cases.png">
</div>
</section>
so once i click on a button it should do the transition left 500px, and loop the image around to the left so the image keeps going to the right until the image is 500px further, and it should be invisible outside the border.
Thanks alot for the help!
You're really close to hiding the scrolled content. You just need to hide the overflow in section with overflow: hidden;
$("#right").click(function() {
$("#one").css("left", "200px");
$("#two").css("left", "200px");
$("#three").css("left", "200px");
$("#four").css("left", "200px");
$("#five").css("left", "200px");
$("#six").css("left", "200px");
});
$("#left").click(function() {
$("#one").css("left", "0px");
});
section {
width: 80%;
height: 50px;
border: 5px solid black;
margin: auto;
padding: 7px;
z-index: 1;
transition: left 2s ease;
overflow: hidden;
}
div#one {
width: 15%;
height: 50px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#six {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
loop: true;
}
div#five {
width: 15%;
height: 50px;
background: black;
float: left;
margin-left: 5px;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#two {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#three {
width: 15%;
height: 50px;
margin-left: 5px;
background: black;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
div#four {
width: 15%;
height: 50px;
margin-left: 5px;
background: red;
float: left;
z-index: -1;
left: 0px;
position: relative;
transition: left 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>
<div id="eight"></div>
</section>
<button id="right">
left: 100px;
</button>
The parent element needs { overflow-y: hidden; } in your css code