PictureShift

index.pug

main
  .picture-shift.fl(data-url="http://lorempixel.com/output/city-q-c-200-200-7.jpg")
  .picture-shift.fl(data-url="https://s3.amazonaws.com/nautilus-vertical/cosmos-a-128.jpeg")

pictureshift.markdown

PictureShift

A Pen by Christian Fei on CodePen.

License.

script.js

const pictureShifts = document.querySelectorAll('.picture-shift')

pictureShifts.forEach(pictureShift => {
  createDOMMatrixFor(pictureShift.dataset.url)
  .forEach(tile => pictureShift.appendChild(tile))
  intervalFor(pictureShift)
})

function intervalFor (pictureShift) {
  shift(pictureShift)
  setInterval(() => shift(pictureShift), 120)  
}

function shift (pictureShift) {
  pictureShift.appendChild(pictureShift.firstChild)
}

function createDOMMatrixFor(url){  
  return [1,2,3,4,5,6,7,8,9].map(i => {
    const cutter = document.createElement('div')
    cutter.setAttribute('class', `cutter tile-${i}`)
    cutter.style.backgroundImage = `url(${url})`
    return cutter
  })
}

style.stylus

width = 200px
height = width

.picture-shift
  position relative
  width width
  height height
  border 1px solid lightgrey
  background-size width height
  overflow hidden
  // display inline-block
  font-size 0
  
  .cutter
    display inline-block
    border 0
    margin 0
    padding 0
    width calc(200px/3)
    height calc(200px/3)
    background-position 0 0
    
    &.tile-2
      background-position calc(-200px/3) 0px
    &.tile-3
      background-position calc(-200px/3 * 2) 0px
    &.tile-4
      background-position 0 calc(-200px/3)
    &.tile-5
      background-position calc(-200px/3) calc(-200px/3)
    &.tile-6
      background-position calc(-200px/3 * 2) calc(-200px/3)
    &.tile-7
      background-position 0 calc(-200px/3 * 2)
    &.tile-8
      background-position calc(-200px/3) calc(-200px/3 * 2)
    &.tile-9
      background-position calc(-200px/3 * 2) calc(-200px/3 * 2)