CodePen Embed - Clean Slider With Curved Background

<div class="cont">
  <div class="mouse"></div>
  <div class="app">
    <div class="app__bgimg">
      <div class="app__bgimg-image app__bgimg-image--1">
      </div>
      <div class="app__bgimg-image app__bgimg-image--2">
      </div>
    </div>
    <div class="app__img">
      <img onmousedown="return false" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/whiteTest4.png" alt="city" />
    </div>
    
    <div class="app__text app__text--1">
      <div class="app__text-line app__text-line--4">imperdiet </div>
      <div class="app__text-line app__text-line--3">ut le</div>
      <div class="app__text-line app__text-line--2">non tincidunt </div>
      <div class="app__text-line app__text-line--1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png" alt="" /></div>
    </div>
    
    <div class="app__text app__text--2">
      <div class="app__text-line app__text-line--4">habitant</div>
      <div class="app__text-line app__text-line--3">ut eget</div>
      <div class="app__text-line app__text-line--2">Nam imperdiet</div>
      <div class="app__text-line app__text-line--1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png" alt="" /></div>
    </div>
  </div>
  <div class="pages">
    <ul class='pages__list'>
      <li data-target='1' class='pages__item pages__item--1 page__item-active'></li>
      <li data-target='2' class='pages__item pages__item--2'></li>
    </ul>
  </div>
</div>
<a href="https://dribbble.com/shots/2936160-Opus-Animation" target="_blank" class="icon-link">
    <img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/256/Dribbble-icon.png">
  </a>
  <a href="https://twitter.com/mrspok407" target="_blank" class="icon-link icon-link--twitter">
    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">
  </a>

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

$contBgClr: linear-gradient(to left bottom, #F2E3C6 0%, #A7A1A5 100%);
$appShadowClr: rgba(#000, .3);

.cont {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: $contBgClr;
  overflow: hidden;
}

.app {
  position: relative;
  min-width: 850px;
  height: 540px;
  box-shadow: 0 0 60px $appShadowClr;
  overflow: hidden;
  
  &__bgimg {
    position: absolute;
    top: 0;
    left: -2.5%;
    width: 105%;
    height: 100%;
    transition: transform 3.5s 770ms;
    
    &-image {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      
      &--1 {
        background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/city22222.jpg') center center no-repeat;
        background-size: cover;
      }
      
      &--2 {
        background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/forest.jpg') center center no-repeat;
        background-size: cover;
        opacity: 0;
        transition: opacity 0ms 1300ms;
        will-change: opacity;
      }
    }
  }
  
  &__text {
    position: absolute;
    right: 165px;
    top: 150px;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    z-index: 1;
    
    &-line {
      transition: transform 1500ms 400ms, opacity 750ms 500ms;
      will-change: transform, opacity;
      user-select: none;
      @for $i from -4 through -1 {
      &--#{abs($i)} {
        transition: transform 1500ms 2000ms + 100ms * ($i - 1), opacity 1500ms 2750ms + 250ms * ($i - 1);
      }
    }
      &--4 {
        font: {
          size: 50px;
          weight: 700;
        }
        color: #0A101D;
      }
      &--3 {
        font: {
          size: 40px;
          weight: 300;
        }
      }
      &--2 {
        margin-top: 10px;
        font: {
          size: 14px;
          weight: 500;
        }
        color: #0099CC;
      }
      &--1 {
        margin-top: 15px;
        img {
          width: 50px;
        }
      }
    }
    
    &--1 {
      
      .app__text-line {
        transform: translate3d(0, -125px, 0);
        opacity: 0;
      }
    }
    
    &--2 {
      right: initial;
      top: 250px;
      left: 80px;
      z-index: -1;
      transition: z-index 1500ms;
      
      @for $i from -4 through -1 {
      .app__text-line--#{abs($i)} {
        opacity: 0;
        transition: transform 1500ms 300ms + 75ms * ($i - 1), opacity 400ms 500ms + 75ms *($i - 1);
      }
    }
    }
  }
  
  &__img {
    position: absolute;
    transform: translate3d(0, -750px, 0);
    width: 850px;
    height: 100%;
    transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    will-change: transform;
    
    img {
      min-width: 100%;
      user-select: none;
    }
  }
}

.initial {
  .app__img {
    transform: translate3d(0, 0, 0);
  }
  .app__text--1 {
    @for $i from 1 through 4 {
      .app__text-line--#{$i} {
        transform: translate3d(0, 0, 0);
        transition: transform 1500ms 1400ms + 75ms * ($i - 1), opacity 400ms 1600ms + 75ms *($i - 1);
        opacity: 1;
      }
    }
  }
}

.active {
  .app__bgimg {
    transform: translate3d(10px, 0, 0) scale(1.05);
    transition: transform 5s 850ms ease-in-out;
    .app__bgimg-image--2 {
      opacity: 1;
      transition: opacity 0ms 1500ms;
    }
  }
  .app__img {
    transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
    transform: translate3d(0, -1410px, 0);
  }
  .app__text--1 {
    z-index: -1;
    transition: z-index 0ms 1500ms;
    @for $i from 1 through 4 {
      .app__text-line--#{$i} {
        transform: translate3d(0, -125px, 0);
        transition: transform 1500ms 300ms + 75ms * ($i - 1), opacity 400ms 500ms + 75ms *($i - 1);
        opacity: 0;
      }
    }
  }
  .app__text--2 {
    z-index: 1;
    
    @for $i from 1 through 4 {
      .app__text-line--#{$i} {
        transform: translate3d(0, -125px, 0);
        transition: transform 2500ms 1100ms + 75ms * ($i - 1), opacity 1300ms 1300ms + 275ms *($i - 1);
        opacity: 1;
      }
    }
  }
}

.mouse {
  position: relative;
  margin-right: 20px;
  min-width: 50px;
  height: 80px;
  border-radius: 30px;
  border: 5px solid rgba(255, 255, 255, .8);
  &:after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
    animation: scroll 1s infinite alternate;
    @keyframes scroll {
      100% {transform: translate(-50%, 15px)}
    }
  }
}

.pages {
  margin-left: 20px;
  &__list {
    list-style-type: none;
  }
  &__item {
    position: relative;
    margin-bottom: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #fff;
    cursor: pointer;
    &:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0, 0);
      width: 75%;
      height: 75%;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0;
      transition: 500ms;
    }
    &:hover:after {
      transform: translate(-50%, -50%) scale(1, 1);
      opacity: 1;
    }
  }
}

.page__item-active {
  &:after {
    transform: translate(-50%, -50%) scale(1, 1);
    opacity: 1;
  }
}

.icon-link {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 50px;
  img {
    width: 100%;
    vertical-align: top;
  }
  &--twitter {
    left: auto;
    right: 5px;
  }
}

View Compiled

$(document).ready(function() {
  const $app = $('.app');
  const $img = $('.app__img');
  const $pageNav1 = $('.pages__item--1');
  const $pageNav2 = $('.pages__item--2');
  let animation = true;
  let curSlide = 1;
  let scrolledUp, nextSlide;
  
  let pagination = function(slide, target) {
    animation = true;
    if (target === undefined) {
      nextSlide = scrolledUp ? slide - 1 : slide + 1;
    } else {
      nextSlide = target;
    }
    
    $('.pages__item--' + nextSlide).addClass('page__item-active');
    $('.pages__item--' + slide).removeClass('page__item-active');
    
    $app.toggleClass('active');
    setTimeout(function() {
      animation = false;
    }, 3000)
  }
  
  let navigateDown = function() {
    if (curSlide > 1) return;
    scrolledUp = false;
    pagination(curSlide);
    curSlide++;
  }

  let navigateUp = function() {
    if (curSlide === 1) return;
    scrolledUp = true;
    pagination(curSlide);
    curSlide--;
  }

  setTimeout(function() {
    $app.addClass('initial');
  }, 1500);

  setTimeout(function() {
    animation = false;
  }, 4500);
  
  $(document).on('mousewheel DOMMouseScroll', function(e) {
    var delta = e.originalEvent.wheelDelta;
    if (animation) return;
    if (delta > 0 || e.originalEvent.detail < 0) {
      navigateUp();
    } else {
      navigateDown();
    }
  });

  $(document).on("click", ".pages__item:not(.page__item-active)", function() {
    if (animation) return;
    let target = +$(this).attr('data-target');
    pagination(curSlide, target);
    curSlide = target;
  });
});

View Compiled

This Pen is owned by Ruslan Pivovarov on CodePen.

See more by @mrspok407 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js