Window Blinds

Little css3/jquery animation effect

by Alen Doe

HTML

<div class="home__columnShades__div">
  <div class="home__columnShades__div__column">
    <div class="home__columnShades__div__columnOne"></div>
  </div>
  <div class="home__columnShades__div__column">
    <div class="home__columnShades__div__columnTwo"></div>
  </div>
  <div class="home__columnShades__div__column">
    <div class="home__columnShades__div__columnThree"></div>
  </div>
  <div class="home__columnShades__div__column">
    <div class="home__columnShades__div__columnFour"></div>
  </div>
</div>

<div class="home__mainContent__div">
Hello, world!
</div>

SCSS

.home__columnShades__div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 899;
}

.home__columnShades__div__column {
  width: 25%;
  height: 100%;
  float: left;
}

.home__columnShades__div__columnOne {
  position: absolute;
  left: 0;
  height: 100%;
  width: inherit;
  background-color: #000;
  transition: transform 3s, left 3s;
  transition-delay: 0.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
}

.home__columnShades__div__columnTwo {
  @extend .home__columnShades__div__columnOne;
  left: 25%;
}

.home__columnShades__div__columnThree {
  @extend .home__columnShades__div__columnOne;
  left: 50%;
}

.home__columnShades__div__columnFour {
  @extend .home__columnShades__div__columnOne;
  left: 75%;
}

JavaScript

var viewWidth = $(window).width(),
  viewWidthQuarter = viewWidth / 4;

  $('.home__columnShades__div__columnOne').css({
    'left': viewWidth-(viewWidthQuarter*4.5) + 'px',
    'transform': 'scaleX(0)'
  });
  $('.home__columnShades__div__columnTwo').css({
    'background-position': '-' + viewWidthQuarter + 'px' + ' 0',
    'left': viewWidth-(viewWidthQuarter*3.5) + 'px',
    'transform': 'scaleX(0)'
  });
  $('.home__columnShades__div__columnThree').css({
    'background-position': '-' + viewWidthQuarter * 2 + 'px' + ' 0',
    'left': viewWidth-(viewWidthQuarter*2.5) + 'px',
    'transform': 'scaleX(0)'
  });
  $('.home__columnShades__div__columnFour').css({
    'background-position': '-' + viewWidthQuarter * 3 + 'px' + ' 0',
    'left': viewWidth-(viewWidthQuarter*1.5) + 'px',
    'transform': 'scaleX(0)'
  });