cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="slider-wrapper">
  <div class="slider">
    <div class="slide-navigation__squares">
      <div class="squares-wrapper">
        <div class="squares-slider">
           <span class="square"></span>
           <span class="square"></span>
           <span class="square red"></span>
           <span class="square "></span>
           <span class="square"></span>
          </div>
      </div>
      
    </div>
    <div class="slides-container">
      <div class="slide-wrapper">
        <div class="slide" data-order="1">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/photo-1428908728789-d2de25dbd4e2.jpeg" alt="" />
          <div class="slide-content">
            <h1>Discover</h1>
            <h2>The warm heart of Nordic Beauty</h2>
            <div class="slide-txt">
              <p>The Nordic Countries varied landscapes offer wonderful scenery for any journey, no matter by land or sea.  How you choose to travel will depend on where you go.</p>
              <button>Show regions</button>
            </div>
          </div>
         </div>
        <div class="slide" data-order="2">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/todo-banner.jpg" alt="" />
          <div class="slide-content">
            <h1>To do</h1>
            <h2>Close encounters with nature</h2>
            <div class="slide-txt">
              <p>There's never a bad time to visit the Nordic countries! When you should visit will depend on which types of activities or natural phenomena interest you most.</p>
              <button>Activities</button>
            </div>
          </div>
         </div>
        <div class="slide" data-order="3">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/plan-banner_copy.jpg" alt="" />
          <div class="slide-content">
            <h1>Plan</h1>
            <h2>Top attractions in the nordics</h2>
            <div class="slide-txt">
              <p>June, July and August is the best time to travel, this is when you can expect the warmest weather, longest daylight hours and best availability of outdoor activities.</p>
              <button>Reservations</button>
            </div>
          </div>
         </div>
      </div>
    </div>
    <div class="slide-navigation__txt">
      <ul>
        <li><span data-order="1">Discover</span></li>
        <li><span data-order="2">To do</span></li>
        <li><span data-order="3">Plan</span></li>
      </ul>
    </div>
  </div>
</div>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Work+Sans:400,900,800,500,700,600);

*, *::after,*::before{
  box-sizing:border-box;
}

html, body {
  font-size:6px;
  background:#fbfbfb;
  padding:40px 20px;
  font-family: 'Work Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  
  @media (min-width: 860px) {
      font-size:8px;
      padding:30px 50px;
  }

  @media (min-width: 1200px) {
      font-size:10px;
  }
}

.slider-wrapper {
  position:relative;
  max-width: 90rem;
  min-width: 480px;
  background:#fff;
  margin: 0 auto;
  overflow:hidden;
  box-shadow: 0 0 35px 20px #DDE5EE;
  .slider{
    position:relative;
    height: 65rem;
    padding: 5rem 0;
    &::after {
      content: "";
      display: table;
      clear: both;
    }
    .slide-wrapper {
      position:relative;
      display:block;
      width:100%;
        height:100%;
    }
  }
  
  .slide-navigation__squares, .slide-navigation__txt {
    width:10%;
    position:relative;
    float:left;
     overflow:hidden; 
    
    &::after {
      content: "";
      display: table;
      clear: both;
    }
  }
  
  .slide-navigation__txt {
    display:block;
    height:100%;
    &::after {
      content: "";
      display: table;
      clear: both;
    }
    
    ul {
      margin:0;
      list-style:none;
      padding:0;
      position:absolute;  
      display:table-cell;
      width: 30rem;
      transform:rotate(90deg);
      transform-origin:0;
      margin-left:calc(50% - 0.14rem);
      &::after {
        content: "";
        display: table;
        clear: both;
      }
    }
    li {
      text-transform:uppercase;
      letter-spacing:0.2rem;
      margin: 0 1.2rem;
      position:relative;
      float:left;
      font-size:1.2rem;
      font-weight:600;
      color:#A1A5B8;
      span {
        cursor:pointer;
        transition: all 0.5s ease;
        display:block;
        &.active{
          transform: scale(1.1, 1.1);
          color: #E34D67;
        }
      }
    }
    
  }
  
  .slide-navigation__squares{
     display:block;
     height:100%;
    .squares-wrapper{
      position:absolute;
      margin-left: calc(50% - 0.4rem);
      bottom: 5rem;
      height: 4.6rem;
      overflow:hidden;
    }
    .squares-slider{
      position:relative;
      display:block;
      margin-top:-2.5rem;
      transform:translateY(-2.5rem);
    }
    
    .square{
      width: 0.6rem;
      height:0.6rem;
      display:block;
      margin:1.3rem 0;
      background:#A1A5B8;
      &.red{
        background: #E34D67;
      }
    }
    
  }
  
  .slides-container {
    position:relative;
    width:80%;
    float:left;
    height:100%;
  }
  
  .slide {
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    z-index:1;
    
    img {
      max-width:100%;
      display:block;
      height:100%;
      object-fit:cover;
    }
    .slide-content{
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
      padding: 5rem 5.8rem;
      overflow:hidden;
      h1 {
        text-transform:uppercase;
        color:white;
        font-weight:900;
        font-size:10rem;
        text-align:center;
        margin:0;
        opacity:0.6;
        position:relative;
      }
      h2 {
        color:#E34D67;
        font-size:4.8rem;
        max-width:80%;
        margin:0;
        margin-top:-6rem;
        font-weight:900;
        line-height:1;
        position:relative;
        
      }
    }
    .slide-txt{
      position:relative;
      display:block;
      width:100;
      margin-top:6rem;
      &::after {
        content: "";
        display: table;
        clear: both;
      }
      p {
        margin:0;
        max-width:55%;
        color:#666666;
        font-size:1.2rem;
        line-height:1.4;
        float:left;
      }
      button {
        display:block;
        float:right;
        width:18rem;
        text-align:center;
        background:transparent;
        background-color:transparent;
        border:0.28rem solid #E34D67;
        text-transform:uppercase;
        padding:0.8rem 0.5rem;
        font-size:1.5rem;
        color: #E34D67;
        font-weight:600;
        letter-spacing:0.2rem;
        outline:none;
        overflow:hidden;
      }
    }
  }
}
            
          
!
            
              /*

Inspired by the work of the guys at Tubik Studio.
Dribble: https://dribbble.com/Tubik.
https://dribbble.com/shots/2710181-Tubik-Studio-Ice.

*/


var initialSlide = $('.slides-container [data-order="1"]');
var initalSelected = $('.slide-navigation__txt [data-order="1"]');
var mq_medium = window.matchMedia( '(min-width: 860px)' );
var mq_big = window.matchMedia( '(min-width: 1200px)' );


function activate_slide(order){
    
  var unactiveSlide = $('.slide.active');
  var activeSlide = $('.slides-container [data-order="'+order+'"]');
  
  if( !(activeSlide.hasClass('active')) ){
      slide_in(activeSlide);
      slide_out(unactiveSlide);
  }
}

function slide_in(slide) {
  
  var _this = slide;
  
  animation_in(slide);
  _this.addClass('active');
  TweenMax.to(_this, 1, {autoAlpha:1}, '-=1');
  
}

function slide_out(slide){
  
  var _this = slide;
  
  _this.css( 'z-index', '2' );
  _this.removeClass('active');
  TweenMax.to(_this, 1, {autoAlpha:0, onComplete: removeZ});
  
  function removeZ(){
    _this.css( 'z-index', '1' );
  }  
  
  animation_out(slide);
}

function animation_in(slide){
  
  var title = slide.find('h1');
  var subtitle = $(slide).find('h2');
  var text = $(slide).find('p');
  var button = $(slide).find('button');
  var image = $(slide).find('img');
  
  TweenMax.fromTo(title, 0.6,{autoAlpha:0, x:100}, {autoAlpha:0.6, x:0, ease: Power2.easeOut});
  TweenMax.fromTo(subtitle, 0.5,{autoAlpha:0, x:-200}, {autoAlpha:1, x:0, ease: Power2.easeOut},'-0.1');
  TweenMax.fromTo(text, 0.8,{autoAlpha:0, x:50}, {autoAlpha:1, x:0, ease: Power2.easeOut});
  TweenMax.fromTo(button, 0.5,{autoAlpha:0 }, {autoAlpha:1});
  TweenMax.to(image, 0, {autoAlpha:1,scale:1});
}

function animation_out(slide){
  
  var title = slide.find('h1');
  var subtitle = $(slide).find('h2');
  var text = $(slide).find('p');
  var button = $(slide).find('button');
  var image = $(slide).find('img');
  
  TweenMax.to(title, 0.6, {autoAlpha:0, x:0});
  TweenMax.to(subtitle, 0.5, {autoAlpha:0, x:200});
  TweenMax.to(text, 0.5,{autoAlpha:0});
  TweenMax.to(button, 0.5,{autoAlpha:0});
  TweenMax.to(image, 1, {scale:1.1});
  
}

$('.slide-navigation__txt span').on('click', function(){
  
  var _this = $(this);
  var order = _this.data('order');
  var spans = $('.slide-navigation__txt span');
  var current = $('.active').data('order');
  
  spans.removeClass('active');
  _this.addClass('active');
  activate_slide(order); 
  stagger_squares(order, current);
});

function stagger_squares(order, current) {
  var mq = 0.7;
  var moveY;
  var squares = $('.slide-navigation__squares .square');
  var staggerTime = -0.12;
  
  if( order < current ) {
    staggerTime = staggerTime * -1; 
  }
  
  if( mq_medium.matches) { mq = 1 }
  if( mq_big.matches) { mq = 1.3 }
  
    
  
  moveY = (order-1) * (15 * mq );
  TweenMax.staggerTo(squares, 0.1, {y: moveY}, staggerTime);
  
}



$(document).ready(function() {
  
  initialSlide.addClass('active');
  initalSelected.addClass('active');
  TweenMax.to(initialSlide, 0.5, {autoAlpha:1});
  
});





            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console