🖼️ Gliding Gallery | Simple Image Slider Transitions | @keyframers 1.15.0

gliding-gallery-simple-image-slider-transitions-keyframers-1-15-0.markdown

🖼️ Gliding Gallery | Simple Image Slider Transitions | @keyframers 1.15.0

David Khourshid and Stephen Shaw build a Gliding Gallery, a simple image slider with big transitions.

• ⏰ Streamed live on July 16, 2018 at https://twitch.tv/keyframers
• 💡 Inspiration: https://dribbble.com/shots/4830195-Team-profile-transitions
• 📺 Video: https://youtu.be/DbwdbNi_QUk
• 💻 Code: https://cdpn.io/pen/pZyWPd

Skip around: 6:00 Animation overview 10:00 Start coding 1:00:00 Keyflections

Additional Resources:

• Flipping https://github.com/davidkpiano/flipping

Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!

• Like & Subscribe on YouTube
• Follow & Tweet us at twitter.com/keyframers.
• Join the live streams & Subscribe on Twitch http://twitch.tv/keyframers
• Support us on Patreon at https://patreon.com/keyframers

Topics covered:

• Image sliders
• Layering content
• CSS Transitions
• tabindex

A Pen by @keyframers on CodePen.

License.

index.html

<a href="https://youtu.be/DbwdbNi_QUk" target="_blank" data-keyframers-credit style="color: #FFF; display: none"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div id="app" data-state="0">
  <div class="ui-big-images">    
    <div class="ui-big-image" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt=""/>
    </div>
    <div class="ui-big-image" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt=""/>
    </div>
    <div class="ui-big-image" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt=""/>
    </div>
    <div class="ui-big-image" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt=""/>
    </div>
    <div class="ui-big-image" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt=""/>
    </div>
    <div class="ui-big-image" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt=""/>
    </div>
  </div>
  <div class="ui-thumbnails">
    <div class="ui-thumbnail" tabindex="-1" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt=""/>
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
  </div>
  <div class="ui-content">
    
    <nav class="ui-nav">
      <button id="prev" tabindex="-1" title="Previous">&lt;</button>
      <button id="next" tabindex="-1" title="Next">&gt;</button>
    </nav>
    
    <div class="ui-articles">
      <article class="ui-article" data-key="0">
        <h2 class="ui-heading">Stephen Shaw</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
      </article>
      <article class="ui-article" data-key="1">
        <h2 class="ui-heading">David Khourshid</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
      </article>
      <article class="ui-article" data-key="2">
        <h2 class="ui-heading">Sarah Drasner</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="3">
        <h2 class="ui-heading">Maybe You</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="4">
        <h2 class="ui-heading">Evil Twin</h2>
        <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
      </article>
      <article class="ui-article" data-key="5">
        <h2 class="ui-heading">Chris Coyier</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
      </article>
    </div>
  </div>
</div>

script.js

console.clear();

const elPrevButton = document.querySelector('#prev');
const elNextButton = document.querySelector('#next');
const flipping = new Flipping();

const elImages = Array.from(document.querySelectorAll('.ui-big-image'));
const elThumbnails = Array.from(document.querySelectorAll('.ui-thumbnail'));

let state = {
  photo: 0
};

function send(event) {
  // read cuticle positions
  flipping.read();
  
  const elActives = document.querySelectorAll('[data-active]');
  
  Array.from(elActives)
    .forEach(el => el.removeAttribute('data-active'));

  switch (event) {
    case 'PREV':
      state.photo--;
      // Math.max(state.photo - 1, 0);
      break;
    case 'NEXT':
      state.photo++;
      // Math.min(state.photo + 1, elImages.length - 1);
      break;
    default:
      state.photo = +event;
      break;
  }
  
  var len = elImages.length;
  // Loop Around
  //state.photo = ( ( state.photo % len) + len ) % len;
  state.photo = Math.max(0, Math.min( state.photo, len - 1) );

  Array.from(document.querySelectorAll(`[data-key="${state.photo}"]`))
    .forEach( el => {
    el.setAttribute('data-active', true);
  });
  
  // execute the FLIP animation
  flipping.flip();
}

elThumbnails.forEach( thumb => { 
  thumb.addEventListener('click', () => {
    send(thumb.dataset.key);
  });
});

elPrevButton.addEventListener('click', () => {
  send('PREV');
});

elNextButton.addEventListener('click', () => {
  send('NEXT');
});

send(0);

scripts

<script src="https://unpkg.com/flipping@1.1.0/dist/flipping.web.js"></script>

style.scss

$gold: #D4A12D;
$purple: #493e56;
$duration: .7s;
$easing: cubic-bezier(.25, 0, .1, 1);

img { max-width: 100%; }

#app {
  width: 90%;
  height: 85%;
  overflow: hidden;
}

.ui-big-images {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
  
  img {
    object-fit: cover;
    object-position: center 20%;
    width: 100%;
    height: 100%;
    display: block;
  }
}

.ui-thumbnails {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 0 1rem;
  padding-top: .5rem;
  padding-right: 45%;
  padding-right: calc( 45% + .5rem );
}

.ui-thumbnail {
  display: block;
  margin-right: .5rem;
  padding: .5rem 0;
  cursor: pointer;
}

.ui-cuticle {
  background-color: $gold;
  position: absolute;
  bottom: 0;
  height: .25rem;
  width: 100%;
}

.ui-thumbnail > img {
  width: auto;
}

.ui-content {
  position: absolute;
  width: 40%;
  right: 5%;
  bottom: 0;
}

.ui-articles {
  background: #493e56;
  color: white;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.ui-article {
  padding: 1.5rem;
  width: 100%;
  margin-right: -100%;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ui-paragraph {
  margin: 0;
  font-size: .7rem;
  line-height: 1.7;
}

.ui-nav {
  position: absolute;
  right: 0;
  bottom: 100%;
  background: inherit;
  
  button {
    background: $purple;
    border: none;
    appearance: none;
    padding: .5em;
    width: 2em;
    color: #FFF;
    font-family: monospace;
    transition: inherit;
    
      transition-duration: 300ms;
    &:hover,
    &:focus {
      background: $gold;
      outline: none;
    }
    
    &:active {
      outline: none;
      transform: translateY(.25em); 
      transition-duration: 100ms;
    }
  }
}

.ui-heading {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: normal;

  &:before {
    content: 'Animator';
    font-size: .5rem;
    text-transform: uppercase;
    display: block;
    margin-bottom: .5rem;
    letter-spacing: 1px;
  }
}

/* ---------------------------------- */


.ui-big-image { 
  opacity: 0;
  transform: translateX(-100%);

  img {
    transform: scale(0.85);
  }
}

.ui-big-image[data-active] ~ .ui-big-image {
  transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  transform: translateX(0%);
  img {
    transform: scale(1);
  }
}


/* ---------------------------------- */

.ui-article {
  transform: translateX(-100%);

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $gold;
    opacity: 1;
    transition-duration: $duration / 2;
    z-index: 1;
  }
}

.ui-article[data-active] ~ .ui-article {
  transform: translateX(100%);
}

.ui-article[data-active] {
  transform: translateX(0%);

  &:before {
    opacity: 0;
  }
}


/* ---------------------------------- */


.ui-thumbnail {
  > img {
    filter: grayscale(100%);
    transition-duration: $duration / 2;
  }

  &:active {
    > img {
      transform: scale(0.9);
      transition-duration: 100ms;
    }
  }

  &:focus {
    outline: none;
  }
}

.ui-cuticle {
  display: none;
}

.ui-thumbnail {
  &[data-active], &:hover {
    > img {
      filter: grayscale(0%);
    }
  }

  &[data-active] .ui-cuticle {
    display: block; 
  }
}


/* ---------------------------------- */


body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1A130C;
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
  transition-property: transform, opacity, filter;
  transition-duration: $duration, $duration, $duration;
  transition-timing-function: cubic-bezier(.5, 0, .5, 1);
}

body, html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}