How to make the slider move right and left alternatively - javascript

The slider i have is moving from to left side automatically and once it reaches it moves the first slider and then it repeats.
All i wanted to do is to make the slider right to left and then to left to right alternatively.
How can i do this ?
Here is my Fiddle.
Here is the css
#slideshow {
position: relative;
width: 640px;
height: 310px;
padding: 15px;
border: 1px solid #ddd;
margin: 0 auto 2em;
background: #FFF;
background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
As i don't have any idea in javascript i am not able to have any steps.


Your current animation keyframes:
#-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}
it goes from 0 to -100% to -200% .. -300% and than back to 0.
you can change it to something like this:
#-webkit-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: 0 }
75%, 95% { left: -100% }
}
here it will just got back and forth between 0 and -100%.
Show more than 2 slides:
Add classes to your slides to be able to hide and show them and created these keyframes to do so:
#-webkit-keyframes slider1 {
0%, 20%, 100% { opacity: 1; display: block; visibility: visible; }
25%, 45% { opacity: 0; display: none; visibility: hidden; }
50%, 70% { opacity: 0; display: none; visibility: hidden; }
75%, 95% { opacity: 0; display: none; visibility: hidden; }
}
#-webkit-keyframes slider2 {
0%, 20%, 100% { opacity: 0; display: none; visibility: hidden; }
25%, 45% { opacity: 1; display: block; visibility: visible; }
50%, 70% { opacity: 0; display: none; visibility: hidden; }
75%, 95% { opacity: 0; display: none; visibility: hidden; }
}
#-webkit-keyframes slider3 {
0%, 20%, 100% { opacity: 0; display: none; visibility: hidden; }
25%, 45% { opacity: 0; display: none; visibility: hidden; }
50%, 70% { opacity: 1; display: block; visibility: visible; }
75%, 95% { opacity: 0; display: none; visibility: hidden; }
}
#-webkit-keyframes slider4 {
0%, 20%, 100% { opacity: 0; display: none; visibility: hidden; }
25%, 45% { opacity: 0; display: none; visibility: hidden; }
50%, 70% { opacity: 0; display: none; visibility: hidden; }
75%, 95% { opacity: 1; display: block; visibility: visible; }
}
now you just need to position slide 3 where 1 is and 4 where 2 is, since you have a fixed width i just used position: relative; and add the animation keyframes (don't forget the other prefixes)
#slideshow .slide_1 {
-webkit-animation: slider1 32s infinite;
}
#slideshow .slide_2 {
-webkit-animation: slider2 32s infinite;
}
#slideshow .slide_3 {
position: relative;
left: -1280px;
-webkit-animation: slider3 32s infinite;
}
#slideshow .slide_4 {
position: relative;
left: -1280px;
-webkit-animation: slider4 32s infinite;
}
the finished Fiddle

Related

Javascript/jQuery FlipClock destroy/clearInterval

I'm trying to use this FlipClock plugin.
var clock = $(".clock").FlipClock({
clockFace: 'TwentyFourHourClock',
callbacks:{
}
});
/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
/* Main */
.flip-clock-wrapper {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
font-size: 36px !important; }
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 1em;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 60px;
height: 90px;
font-size: 80px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 87px;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 80px;
overflow: hidden;
outline: 1px solid transparent; }
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 44px;
left: 0;
z-index: 5;
width: 100%;
height: 3px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #333;
border-radius: 6px;
font-size: 70px; }
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.01s 0.49s linear both;
-moz-animation: asd 0.01s 0.49s linear both;
animation: asd 0.01s 0.49s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 20px;
height: 100px; }
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
left: 5px; }
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -86px;
color: black;
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -88px; }
.flip-clock-divider.seconds .flip-clock-label {
right: -91px; }
.flip-clock-dot.top {
top: 30px; }
.flip-clock-dot.bottom {
bottom: 30px; }
#-webkit-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-moz-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-o-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
#-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
#-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
#-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
#keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
#-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
#-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
#-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
#keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
#-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
<div class="clock"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I wonder if do We have possible to destroy/clearInterval var clock; just using clearInterval(clock) ? Tried and no luck.
I already open the manual documentation, but seems I'm not so understand how to destroy that.

Per the documentation you linked, the [clock instance has .stop() and reset() methods...
var clock = $(".clock").FlipClock({
clockFace: 'TwentyFourHourClock',
callbacks:{
}
});
function stopClock() {
clock.stop();
}
/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-clock-wrapper a {
cursor: pointer;
text-decoration: none;
color: #ccc; }
.flip-clock-wrapper a:hover {
color: #fff; }
.flip-clock-wrapper ul {
list-style: none; }
.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
content: " ";
display: table; }
.flip-clock-wrapper.clearfix:after {
clear: both; }
.flip-clock-wrapper.clearfix {
*zoom: 1; }
/* Main */
.flip-clock-wrapper {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
-webkit-user-select: none; }
.flip-clock-meridium {
background: none !important;
box-shadow: 0 0 0 !important;
font-size: 36px !important; }
.flip-clock-meridium a { color: #313333; }
.flip-clock-wrapper {
text-align: center;
position: relative;
width: 100%;
margin: 1em;
}
.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.flip-clock-wrapper:after {
clear: both;
}
/* Skeleton */
.flip-clock-wrapper ul {
position: relative;
float: left;
margin: 5px;
width: 60px;
height: 90px;
font-size: 80px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
background: #000;
}
.flip-clock-wrapper ul li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 87px;
text-decoration: none !important;
}
.flip-clock-wrapper ul li:first-child {
z-index: 2; }
.flip-clock-wrapper ul li a {
display: block;
height: 100%;
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
margin: 0 !important;
overflow: visible !important;
cursor: default !important; }
.flip-clock-wrapper ul li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
font-size: 80px;
overflow: hidden;
outline: 1px solid transparent; }
.flip-clock-wrapper ul li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2; }
.flip-clock-wrapper ul li a div.up {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
top: 0; }
.flip-clock-wrapper ul li a div.up:after {
content: "";
position: absolute;
top: 44px;
left: 0;
z-index: 5;
width: 100%;
height: 3px;
background-color: #000;
background-color: rgba(0, 0, 0, 0.4); }
.flip-clock-wrapper ul li a div.down {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
bottom: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.flip-clock-wrapper ul li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #333;
border-radius: 6px;
font-size: 70px; }
.flip-clock-wrapper ul li a div.up div.inn {
top: 0; }
.flip-clock-wrapper ul li a div.down div.inn {
bottom: 0; }
/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
z-index: 3; }
.flip-clock-wrapper .flip { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
.flip-clock-wrapper ul.play li.flip-clock-active {
-webkit-animation: asd 0.01s 0.49s linear both;
-moz-animation: asd 0.01s 0.49s linear both;
animation: asd 0.01s 0.49s linear both;
z-index: 5; }
.flip-clock-divider {
float: left;
display: inline-block;
position: relative;
width: 20px;
height: 100px; }
.flip-clock-divider:first-child {
width: 0; }
.flip-clock-dot {
display: block;
background: #323434;
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
left: 5px; }
.flip-clock-divider .flip-clock-label {
position: absolute;
top: -1.5em;
right: -86px;
color: black;
text-shadow: none; }
.flip-clock-divider.minutes .flip-clock-label {
right: -88px; }
.flip-clock-divider.seconds .flip-clock-label {
right: -91px; }
.flip-clock-dot.top {
top: 30px; }
.flip-clock-dot.bottom {
bottom: 30px; }
#-webkit-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-moz-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#-o-keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
#keyframes asd {
0% {
z-index: 2; }
100% {
z-index: 4; } }
.flip-clock-wrapper ul.play li.flip-clock-active .down {
z-index: 2;
-webkit-animation: turn 0.5s 0.5s linear both;
-moz-animation: turn 0.5s 0.5s linear both;
animation: turn 0.5s 0.5s linear both; }
#-webkit-keyframes turn {
0% {
-webkit-transform: rotateX(90deg); }
100% {
-webkit-transform: rotateX(0deg); } }
#-moz-keyframes turn {
0% {
-moz-transform: rotateX(90deg); }
100% {
-moz-transform: rotateX(0deg); } }
#-o-keyframes turn {
0% {
-o-transform: rotateX(90deg); }
100% {
-o-transform: rotateX(0deg); } }
#keyframes turn {
0% {
transform: rotateX(90deg); }
100% {
transform: rotateX(0deg); } }
.flip-clock-wrapper ul.play li.flip-clock-before .up {
z-index: 2;
-webkit-animation: turn2 0.5s linear both;
-moz-animation: turn2 0.5s linear both;
animation: turn2 0.5s linear both; }
#-webkit-keyframes turn2 {
0% {
-webkit-transform: rotateX(0deg); }
100% {
-webkit-transform: rotateX(-90deg); } }
#-moz-keyframes turn2 {
0% {
-moz-transform: rotateX(0deg); }
100% {
-moz-transform: rotateX(-90deg); } }
#-o-keyframes turn2 {
0% {
-o-transform: rotateX(0deg); }
100% {
-o-transform: rotateX(-90deg); } }
#keyframes turn2 {
0% {
transform: rotateX(0deg); }
100% {
transform: rotateX(-90deg); } }
.flip-clock-wrapper ul li.flip-clock-active {
z-index: 3; }
/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.3s linear both; }
/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: show 0.5s linear both;
-moz-animation: show 0.5s linear both;
animation: show 0.5s linear both; }
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
-webkit-animation: hide 0.5s 0.3s linear both;
-moz-animation: hide 0.5s 0.3s linear both;
animation: hide 0.5s 0.2s linear both; }
#-webkit-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-moz-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-o-keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#keyframes show {
0% {
opacity: 0; }
100% {
opacity: 1; } }
#-webkit-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-moz-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#-o-keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
#keyframes hide {
0% {
opacity: 1; }
100% {
opacity: 0; } }
<div class="clock"></div>
<button onclick="stopClock()">stop</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The clearInterval() method clears a timer set with the setInterval() method.
The ID value returned by setInterval() is used as the parameter for the clearInterval() method.
Note: To be able to use the clearInterval() method, you must use a variable when creating the interval method:
Here clock variable is not a timer set with setInterval so you can't use clearInterval.
Events callback should help you to do your thing .

How to reverse a #keyframe animation on mouse off?

I need to reverse the wipe animation when the mouse moves off the button. Is there a way to do this in only CSS?
I know I can reverse the animation, but I'm not sure where to put in the CSS file in order to get the right animation. If I put it in .get-started, it wipes the border and I'm unable to interact with the button completely.
HTML:
<div class="get-started" id="button">
<h4 class="part1">Get <span class="part2">Started</span></h4>
</div>
CSS:
body {
background:black;
}
#button {
display: flex;
font-size: 2.5rem;
color: white;
align-items: center;
justify-content: center;
width: 250px;
height: 75px;
position: relative;
top: -30%;
left: calc(50% - 125px);
}
.get-started {
--borderWidth: 5px;
position: relative;
border-radius: var(--borderWidth);
background-color: #8551FF;
box-shadow: inset 0 0 0 5px white;
z-index:1;
}
.get-started h4.part1 {
color: #FFFFFF;
font-family: 'Coves Light';
font-weight: normal;
}
.get-started span.part2 {
color: #5EFF00;
font-family: 'Coves';
font-weight: bold;
}
.get-started:after {
content: '';
position: absolute;
}
.get-started:hover:after {
background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2px;
background-size: 300% 300%;
animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}
/* motion */
#keyframes gradient-animation {
0% {
background-position: 15% 0%;
}
50% {
background-position: 85% 100%;
}
100% {
background-position: 15% 0%;
}
}
#keyframes frame-enter {
0% {
clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px), 5px 100%, 100% 100%, 100% 0%, 0% 0%);
}
25% {
clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 100% 100%, 100% 0%, 0% 0%);
}
50% {
clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, 100% 0%, 0% 0%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 5px 100%, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 0%, 0% 0%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 0% 100%);
}
}
Runnable Snippet

You could try
.get-started:not(:hover):after {}
with an inversed animation. But it can have unwanted behaviour on initial pageload, it always starts with this animation I guess. Sometimes you can't avoid javascript. Adding a class on mouseout and removing it again on mouseenter might work, so you can assign a reverse animation to this class.
var els = document.querySelectorAll('.get-started');
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('mouseleave', function(e) {
e.target.classList.add('mouseleaveAnimationClass');
});
els[i].addEventListener('mouseenter', function(e) {
e.target.classList.remove('mouseleaveAnimationClass');
});
}

How to make leading edge of CSS circle spinner half moon shaped

Image: Circular spinner rotating along the border rim of other solid circle
Please visit: https://codepen.io/sadashivjp/pen/oqqzwg
I have create a UI codepen here. You are free to make any changes in this, and post the solution here.
The same code is as follows:
.outer-circle{
width:330px;
height:330px;
border:30px solid #001b33;
position:absolute;
top:0; bottom:0; left:0;right:0;
margin:auto;
border-radius:50%;
}
.spinner {
animation: rotate 5s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
left: -15px;
top: -15px;
}
.spinner:before,
.spinner:after {
content: '';
position: absolute;
}
.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%) 0% 0%,
linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.5) 100%) 100% 0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.60) 0%, hsla(0, 0%, 100%, 0.70 ) 100%) 0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
.spinner:after {
background: black;
border: 15px solid #001b33;
border-radius: 50%;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<div class="outer-circle">
<div class="spinner"></div>
</div>
There are two problems in this code:
1) It is causing wobbling(shaking) effect of spinner circle in IE11 browser. But, works perfect in Google chrome browser.
2) As in attached image, need the similar effect of half moon shaped(cylindrical bottom shaped) at the leading edge at the front of the inner white spinner circle.
How to solve these two issues?
Modification of my existing code or providing solution with SVG or Canvas on any other would be fine.

Add a div inside your spinner.
.outer-circle{
width:330px;
height:330px;
border:30px solid #001b33;
position:absolute;
top:0; bottom:0; left:0;right:0;
margin:auto;
border-radius:50%;
}
.spinner {
animation: rotate 5s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
left: -15px;
top: -15px;
}
.spinner:before,
.spinner:after {
content: '';
position: absolute;
}
.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%) 0% 0%,
linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.5) 100%) 100% 0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.60) 0%, hsla(0, 0%, 100%, 0.70 ) 100%) 0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
.spinner:after {
background: black;
border: 15px solid #001b33;
border-radius: 50%;
top: 3%;
bottom: 3%;
left: 3%;
right: 3%;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.circle{
background: #b1bac1;
width: 10px;
height: 10px;
position: absolute;
top: 177px;
bottom: 0;
left: 0;
right: 0;
border-radius: 50% 50%;
}
<div class="outer-circle">
<div class="spinner">
<div class="circle">
</div>
</div>
</div>

.outer-circle{
width:330px;
height:330px;
border:30px solid #001b33;
position:absolute;
top:0; bottom:0; left:0;right:0;
margin:auto;
border-radius:50%;
}
.spinner {
animation: rotate 5s linear infinite;
border-radius: 50%;
height: 360px;
width: 360px;
position: relative;
left: -15px;
top: -15px;
}
.spinner:before,.spinner:after,
.outer-circle:after {
content: '';
position: absolute;
}
.spinner:before {
border-radius: 50%;
background:
linear-gradient(0deg, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%) 0% 0%,
linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.5) 100%) 100% 0%,
linear-gradient(180deg, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%,
linear-gradient(360deg, hsla(0, 0%, 100%, 0.60) 0%, hsla(0, 0%, 100%, 0.70 ) 100%) 0% 100%
;
background-repeat: no-repeat;
background-size: 50% 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
.spinner:after{
background: #afb7bf;
height: 15px; width:15px;
border-radius: 50%;
top: 175px;
left: -1px;
right: -100px;
bottom: 0px;
}
.outer-circle:after {
background: black;
border: 15px solid #001b33;
border-radius: 50%;
top: -1px;
bottom: -1px;
left: -1px;
right: -1px;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<div class="outer-circle">
<div class="spinner"></div>
</div>
I hope this is the solution you are looking for!

Fixed Header - Stops Animating When Scrolling Down, continues when stop scrolling

I have created a fixed menu for my website.
Everything is working quite fine, the problem is;
When I scroll down, as soon as the fixed menu starts animating, if I scroll down faster it stops, and when I stop scrolling down, the animation continues until it gets fixed.
The JS is below;
function init() {
window.addEventListener("scroll", function() {
var topbar = $("#topbar"),
header = $("#header-main"),
hdr_img = $("#header-main .inner img"),
hdr_inner = $("#header-main .inner"),
search = $("#search"),
cart = $("#cart");
$(window).width() > 1200 && ($(this).scrollTop() > 235 ? (header.addClass("sabit"), hdr_inner.addClass("sabit"), search.addClass("sabit"), cart.addClass("sabit"), hdr_img.addClass("sabit"), topbar.addClass("sabit"), header.stop().animate({
top: "-44px",
opacity: 1
}, 800), topbar.stop().animate({
top: "-44px",
opacity: 0
}, 900)) : $(this).scrollTop() < 1 && (header.stop().animate({
top: "0px",
opacity: 1
}, 800), topbar.stop().animate({
top: "0",
opacity: 1
}, 1300), header.removeClass("sabit"), hdr_inner.removeClass("sabit"), search.removeClass("sabit"), cart.removeClass("sabit"), hdr_img.removeClass("sabit"), topbar.removeClass("sabit")))
})
}
window.onload = init();
Also CSS codes are below;
#topbar {
color: #7BBD42;
background: #2e3a47;
background-image: url("//images....com./sprites/kullanicimenupat.png");
padding: 5px 0;
min-height: 30px;
border-bottom: 1px solid #7bbd42;
border-width: 3px;
}
#topbar.sabit {
position: fixed;
width: 100%;
z-index: 99;
top: 0;
}
#header-main {
background-color: #ffffff;
min-height: 107px;
color: #8c8c8c;
}
#header-main.sabit{
position : fixed;
width: 100%;
z-index: 1010;
padding-top: 35px;
border-bottom: 1px solid #AFC999;
min-height: 100px;
min-height: 99px;
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(47%, rgba(245,245,245,1)), color-stop(93%, rgba(237,237,237,1)), color-stop(99%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 47%, rgba(237,237,237,1) 93%, rgba(237,237,237,1) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
}
#header-main .inner {
text-align: left;
margin-top: 25px;
padding: 0;
#header-main .logo img {
/*background-color: #7bbd42;*/
transition: all 0.4s ease-in 0s;
}
#header-main .inner.sabit{
margin-bottom: -15px;
margin-top: 18px;
}
#header-main .inner.sabit img {
max-width: 75%;
margin-top: -4px;
transition: all 0.5s ease 0s;
}

Use a setTimeout inside the scroll event:
var timerX = -1;
$(window).on('scroll', function () {
clearTimeout(timerX);
timnetToChangVp = setTimeout(function() {
init();
}, 200);
});

This is happening because of .stop().
Stop the currently-running animation on the matched elements.
Every time when you scrolling it stopping animation and starting again. Remove .stop() you can see effect then.

Display an image wrapped around a sphere with CSS/Javascript

I am aware that this is possible with three.js but it seems that three.js maxes a mesh sphere and the image gets a bit distorted. I'd also rather just use CSS if possible.
Is this something that can be done with CSS transforms? Ideally I'd like to animate it going from a flat image to a sphere so something that can easily be animated with CSS transitions would be great.

I found a nice example of how to do this with CSS on codepen: http://codepen.io/donovanh/pen/GBIiv. It doesn't actually wrap the image in 3d but it looks nice enough for my purposes.
Here is the relevant html/css:
<section class="stage">
<figure class="ball"><span class="shadow"></span></figure>
</section>
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
-webkit-transform-style: preserve-3d;
background: url('https://alxgroup.net/gto-range-builder/images/treeSS.png') repeat-x;
background-size: auto 100%;
-webkit-animation: move-map 30s infinite linear;
-moz-animation: move-map 30s infinite linear;
-o-animation: move-map 30s infinite linear;
-ms-animation: move-map 30s infinite linear;
animation: move-map 30s infinite linear;
}
.ball:before {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: -40px 10px 70px 10px rgba(0,0,0,0.5) inset;
z-index: 2;
}
.ball:after {
content: "";
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-filter: blur(0);
opacity: 0.3;
background: radial-gradient(circle at 50% 80%, #81e8f6, #76deef 10%, #055194 66%, #062745 100%);
}
.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
body {
width: 300px;
margin: 20px auto;
background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
background-repeat: no-repeat;
}
.stage {
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
#-moz-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#-webkit-keyframes move-map {
0% {
background-position: 0 0; }
100% {
background-position: -849px 0; }
}
#-o-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#-ms-keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }
#keyframes move-map {
0% {
background-position: -849px 0; }
100% {
background-position: 0 0; } }

Categories

Resources