CODEWITHSUNDEEP
javascripthtmlcss
eujin
eujin

Reputation: 182

Javascript, Infinite slide animation moving up and down

I want to make an infinite slide animation that moves up and down like the image below into JavaScript. Slides that fall out of the area should not be shown, but slides 1 and 2 and 3 should be seen again after slide 3.

I saw the link to https://www.w3schools.com/howto/howto_js_slideshow.asp, but I don't know what to do. JQuery is not available. What method should I use?

The slides should continue to flow through the screen.

enter image description here

*{margin:0;padding:0;}
.parent{
  position:relative;
  width:700px;
  height:500px;
  background-color:lavender;
  overflow:hidden;
}
.block1,.block2{
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  width:200px;
}
.block1{
  right:220px;
}
.block2{
  right:0px;
}

.c1,.c2,.c3{
  width:100%;
  height:220px;
}
.c1{background-color:red;}
.c2{background-color:pink;}
.c3{background-color:orange;}
<div class="parent">
  <div class="block1">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </div>
  <div class="block2">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </div>
<div>

Upvotes: 0

Views: 1660

Answers (2)

A Haworth
A Haworth

Reputation: 36512

Because of the dimension (heights) of the items to be animated in comparison to the height of the containing element, all three items are (partially) in view at once and at times little bits of the same item will be visible at both top and bottom.

Therefore we need two copies. CSS animation with a transform that moves each block 50% (i.e. the 3 images) per iteration results in a continuous flow.

*{margin:0;padding:0;}
.parent{
  position:relative;
  width:700px;
  height:500px;
  background-color:lavender;
  overflow:hidden;
}
.block1,.block2{
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  width:200px;
}
.block1{
  right:220px;
}
.block2{
  right:0px;
}

.c1,.c2,.c3{
  width:100%;
  height:220px;
}
.c1{background-color:red;}
.c2{background-color:pink;}
.c3{background-color:orange;}

.block1, .block2 {
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.block1 {
  animation-name: slidedown;
}
.block2 {
  animation-name: slideup;
}
@keyframes slidedown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideup {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
<div class="parent">
  <div class="block1">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
  </div>
  <div class="block2">
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
      <div class="c1"></div>
      <div class="c2"></div>
      <div class="c3"></div>
  </div>
<div>

Upvotes: 2

Anil
Anil

Reputation: 716

Not smooth but my solution

Note you change - delay, animation time and many Also Check this article for more brief Explanation : - https://css-tricks.com/almanac/properties/a/animation/

*{margin:0;padding:0;}
.parent{
  position:relative;
  width:700px;
  height:500px;
  background-color:lavender;
  overflow:hidden;
}
.block1,.block2{
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  width:200px;
}
.block1{
  right:220px;
    -webkit-animation: expand 5s;
    animation-iteration-count:infinite;
    animation-direction: alternate;
}
.block2{
  right:0px;
    -webkit-animation: expand 5s;
    animation-iteration-count:infinite;
    animation-delay: 2s;
    animation-direction: alternate;
}

.c1,.c2,.c3{
  width:100%;
  height:120px;
}
@-webkit-keyframes expand{
    0%{top:0%}
    25%{top:100%}
    50%{top:0%}
    100%{top:100%;}
}
.c1{background-color:red;}
.c2{background-color:pink;}
.c3{background-color:orange;}
<div class="parent">
  <div class="block1">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </div>
  <div class="block2">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
  </div>
<div>

Upvotes: 0

Related Questions