All geek questions in one place

CSS / slate effect for / with DIVs

I am trying to recreate a CSS transition effect similar to this one , only horizontal and with a DIV containing plain text (i.e. I will not be an image cleaner). I'm also not sure if breaking a DIV into several “slots” as necessary, for example:

<div id="slot" class="demo">
<div id="slot1" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot2" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot3" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot4" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot5" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot6" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot7" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
<div id="slot8" class="flipper">
<div class="outgoing"><img src="images/sample1.jpg" width="600" height="400" /></div>
<div class="incoming"><img src="images/sample2.jpg" width="600" height="400" /></div>
</div>
</div>

Even if necessary, can it be created on the fly for a container? Not looking for a complete solution, but if someone created an effect similar to this, or saw something similar to it in the wild, I would like to hear your thoughts or check the link. I initially thought it would be relatively simple, but it gives me a lot more problems than I expected.

Fiddle, . , CSS , JavaScript (jQuery, GreenSock, ) .

+4
3

- CodePen

SASS transition . , , ( p) CSS translateX jQuery .

CSS, animation keyframe.

p ( flexbox)

, , !

var i=0;
$("body").on('click', '#nextSlide', function() {
  i++;
  if(i == $('.slide').length) {
    $('.slide.active').removeClass('active out');
    $($('.slide')[0]).addClass('active');
    i=0;
  }
  else{
    $('.slide.active').addClass('out').next('.slide').addClass('active');
  }
});
body {
  padding: 2em;
  font-family: Arial, sans-serif;
  text-align: center;
}

#nextSlide {
  padding: 1em;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  display: inline-block;
  margin: 2em auto;
  text-align: center;
  transition: .3s;
  border: 2px solid #000;
}
#nextSlide:hover {
  background: #CCC;
}

p {
  color: #FFF;
  font-weight: bold;
}

#textSlider {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  background: #EEE;
  border: 2px solid #CCC;
}
#textSlider .slide {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 100%;
  position: absolute;
}
#textSlider .slide:nth-of-type(3n+1) p:nth-of-type(3n+1) {
  background: #046380;
}
#textSlider .slide:nth-of-type(3n+1) p:nth-of-type(3n+2) {
  background: #A7A37E;
}
#textSlider .slide:nth-of-type(3n+1) p:nth-of-type(3n+3) {
  background: #002F2F;
}
#textSlider .slide:nth-of-type(3n+2) p:nth-of-type(3n+1) {
  background: #8E2800;
}
#textSlider .slide:nth-of-type(3n+2) p:nth-of-type(3n+2) {
  background: #B64926;
}
#textSlider .slide:nth-of-type(3n+2) p:nth-of-type(3n+3) {
  background: #FFB03B;
}
#textSlider .slide:nth-of-type(3n+3) p:nth-of-type(3n+1) {
  background: #00A388;
}
#textSlider .slide:nth-of-type(3n+3) p:nth-of-type(3n+2) {
  background: #79BD8F;
}
#textSlider .slide:nth-of-type(3n+3) p:nth-of-type(3n+3) {
  background: #BEEB9F;
}
#textSlider .slide.active p {
  transform: translateX(0%);
}
#textSlider .slide.out p {
  transform: translateX(-100%);
}
#textSlider .slide p {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0 0 2em;
  flex: 1;
  transform-origin: 0 0;
  transform: translateX(100%);
  transition: .3s;
}
#textSlider .slide p:nth-of-type(5n+1) {
  transition: 1s;
}
#textSlider .slide p:nth-of-type(5n+2) {
  transition: .5s;
}
#textSlider .slide p:nth-of-type(5n+3) {
  transition: 1.5s;
}
#textSlider .slide p:nth-of-type(5n+4) {
  transition: .75s;
}
#textSlider .slide p:nth-of-type(5n+5) {
  transition: 1.25s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- basic text slider by azizgfx@gmail.com -->
<!-- http://stackoverflow.com/questions/35168245/css-slice-slot-transition-effect-for-with-divs -->

<!-- emmet: #textSlider>.slide*3>p*3>lorem5 -->
<div id="textSlider">
  <div class="slide active">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Reprehenderit natus nostrum blanditiis sint?</p>
    <p>Corporis dolore, voluptas rerum doloremque?</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Dolorum, eaque eius placeat possimus.</p>
    <p>Cupiditate voluptates debitis vel nam.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Autem dolores cupiditate, corrupti ullam!</p>
    <p>Vitae deleniti eveniet ex perferendis.</p>
    <p>Consectetur adipisicing elit.</p>
  </div>
</div>

<a href="#" id="nextSlide">Next Text Slide</a>
Hide result
+1

transition, :nth-child(). , :nth-child(), transition,

.s span {
  display:block;
  position:relative;
  width:50px;
  padding:0px;
  margin:0px;
  line-height:18px;
}

.s span:nth-child(2) {
  transition: all .5s;
}
.s span:nth-child(1), .s span:nth-child(10) {
  transition: all 3s;
}

.s span:nth-child(6) {
  transition: all 1s;
}

.s span:nth-child(even) {
  left:0px;
  color: skyblue;
  background: navy;
  opacity:1;
}

.s span:nth-child(odd) {
  left:-60px;
  color: navy;
  background: skyblue;
  opacity:0;
}

.s span:nth-child(1), .s span:nth-child(11) {
  transition: all 2.5s;
}

.s span:nth-child(5) {
  transition: all 1s;
}

.s span:nth-child(3), .s span:nth-child(7) {
  transition: all 5s;
}

.s span:nth-child(9) {
  transition: all 3.5s;
}

.s input[type="checkbox"]:checked ~ span:nth-child(even) {
   display:block;
   left: -60px;
   opacity:0;
}

.s input[type="checkbox"]:checked ~ span:nth-child(odd) {
   left:0px;
   display:block;
   opacity:1;
}
<div class="s">
  click <input type="checkbox" />
  <span>abc</span><span>def</span>
  <span>ghi</span><span>jkl</span>
  <span>mno</span><span>pqr</span>
  <span>stu</span><span>vwx</span>
  <span>y</span><span>z</span>
</div>
Hide result
+1

, , CSS JS "next". , CSS, , .

CSS -

CSS -

HTML

<div class="slider">
  <div class="slider__slide slider__slide--1"></div>
  <div class="slider__slide slider__slide--2"></div>
  <div class="slider__slide slider__slide--3"></div>
</div>

<button class="button js-slide-toggle">Next Slide</button>

CSS - . JS - .

+1

Source: https://habr.com/ru/post/1627095/

More articles:


All Articles