Blend Mode Slider - Double Exposure

blend-mode-slider-double-exposure.markdown

Blend Mode Slider - Double Exposure

Using CSS blender backgrounds & animation to create double exposure effects for article slides.

A Pen by Sullivan Nolan on CodePen.

License.

index.html

<div id="prev" alt="Prev" title="Prev">			
				<div class="arrow-left"></div>
    </div>
 <div id="next" alt="Next" title="Next">
				<div class="arrow-right"></div>
			</div>

<header>			
			<div id="slider">
        <div class="slide" id="three">
					 <div class="content">
                <h1 class="title">Calamity Jane</h1>
              <h5 class="by-line">by Jane Doe</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis ante ac elit placerat luctus. In vitae varius ante.</p>
               <button>Read More</button>
        </div>          
          <div class="container">
              <div class="overlay"></div>
              <div class="field"></div>
              <div class="jright" ></div>
              <div class="jleft"></div> 
         </div>	
				</div><!--/.slide-->
        
         <div class="slide" id="two">
          <div class="content">
                <h1 class="title">The Lone <br>Ranger</h1>
              <h5 class="by-line">by Jane Doe</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis ante ac elit placerat luctus. In vitae varius ante.</p>
               <button>Read More</button>
        </div>          
          <div class="container">
              <div class="space"></div>
              <div class="cowboy" ></div>
              <div class="overlay"></div>
         </div>	
				</div><!--/.Slide-->
        	
        
				<div class="slide" >
					 <div class="content" id="one">
                <h1 class="title">The Giant <br> Grizzly Bear</h1>
              <h5 class="by-line">by Jane Doe</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis ante ac elit placerat luctus. In vitae varius ante.</p>
               <button>Read More</button>
        </div>          
          <div class="container">
              <div class="forest"></div>
              <div class="bear" ></div>
              <div class="overlay"></div>
         </div>	
				</div><!--/.Slide-->
			</div><!--/.slider-->
		</header>

	
			
				

script.js

/**
"Simple Responsive Content Slider" by Michal: https://codepen.io/Kopecky/pen/xswkb

**/


$(document).ready(function(){
	// options
	var speed = 500; //transition speed - fade
	var autoswitch = false; //auto slider options
	var autoswitch_speed = 5000; //auto slider speed
	
	// add first initial active class
	$(".slide").first().addClass("active");
	
	// hide all slides
	$(".slide").hide();
	
	// show only active class slide
	$(".active").show();
	
	// Next Event Handler
	$('#next').on('click', nextSlide);// call function nextSlide
	
	// Prev Event Handler
	$('#prev').on('click', prevSlide);// call function prevSlide
	
	// Auto Slider Handler
	if(autoswitch == true){
		setInterval(nextSlide,autoswitch_speed);// call function and value 4000
	}
	
	// Switch to next slide
	function nextSlide(){
		$('.active').removeClass('active').addClass('oldActive');
		if($('.oldActive').is(':last-child')){
			$('.slide').first().addClass('active');
		} else {
			$('.oldActive').next().addClass('active');
		}
		$('.oldActive').removeClass('oldActive');
		$('.slide').fadeOut(speed);
		$('.active').fadeIn(speed);
	}
	
	// Switch to prev slide
	function prevSlide(){
		$('.active').removeClass('active').addClass('oldActive');
		if($('.oldActive').is(':first-child')){
			$('.slide').last().addClass('active');
		} else {
			$('.oldActive').prev().addClass('active');
		}
		$('.oldActive').removeClass('oldActive');
		$('.slide').fadeOut(speed);
		$('.active').fadeIn(speed);
	}
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

$bg: #fff;
@import url('https://fonts.googleapis.com/css?family=Lora:400,700');

header{
	width:90%;
  left: 0;
  right: 0;
  margin: auto;
  height: 800px;
  position: relative;
   min-width: 1200px;
   font-family: 'Lora', serif;
}


#slider{
	width:100%; 
  height: 800px;
	position:absolute;
  top: 0px;
	overflow:hidden;
	float:left;
	padding:0;
}


.slide{
	position:absolute;
	width:100%;
	height:100%;
  background: #fff;
  
  &#two{
    .content{
      color: #fff;
    }
  
  }
  
}

#prev, #next{
	cursor:pointer;
	z-index:100;
	background:#000;
  top: 300px;
	height:50px;
	width:50px;
	display:block;
	position:relative;
	margin:0;
	padding:0;

}

#next{
	float:right;
	right:0px;
}

#prev{
	float:left;
	left:0px;
}

.arrow-right {
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;	
	border-left: 15px solid #fff;
	position:relative;
	top:20%;
	right:-40%;
}

.arrow-left {
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;	
	border-right:15px solid #fff; 
	position:relative;
	top:20%;
	left:30%;
}

.content{
    position:absolute;
    display: inline-block;
    text-align:center;
    width: 30%;
    height: 100px;
   z-index: 99;
    color: #000;
    left:0px;
    opacity: 1;

    h1{
      font-size: 3em;
      margin-bottom: 0px;
      }
  
    h5.by-line{
     padding: 10px 0px;
    }
    
     p{
    line-height: 1.5;
    text-align: left;
    font-size: 1.2em;
    padding: 10px 10px 30px;
    }
  
    button{
     position: relative;
      padding: 10px 25px;
      color: #fff;
      background: #000;
      border: 3px solid #000;
      font-size: 1em;
      font-weight: 700;
      cursor: pointer;
      margin: 15px auto;
    }
  }


.container{
  position: relative;
  display:inline-block;
  float:left;
  width:100%;
  height: 100%;
  background: #fff;
  overflow:hidden;
  
  div{
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
  
  }
  
  .forest{
    background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459311/background_qinipt_ot41xf.jpg");
      background-blend-mode: lighten;
    animation: forestSlide 3.5s 1 ease-in-out forwards;
  }
 
  .overlay{ background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459222/bear-bg_ogbfvi_npk6gr.png");
  }

  .bear{ background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459227/bear_fkpw8s_aleqcu.png"),
     linear-gradient(to top, rgba(0,0,0,0), rgba(257, 257, 257, .6) 105%);
    background-blend-mode: soft-light;
    mix-blend-mode: hard-light;
        }
}



#two{
  .container{
   
    
    .space{
      background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459266/stars_ax7ikz_ltxio7.png"),
      linear-gradient(to left, rgba(0,0,0,0), #000 120%);
         background-blend-mode: hard-light;
       animation: slideRight 3.5s 1 ease-in-out forwards;
    }
    
    .cowboy{
      background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459229/cowboy3_u7l8qf_zojgyj.png");
       mix-blend-mode: hard-light;
       opacity: .5; 
    }
    .overlay{
      background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459237/cowboytran2_nm9zkn_axxkfg.png")
    };  
  }
}

#three{
  .container{
    .field{
    background-position: 0px 0%;
    background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459246/janebg_fo1eft_xortv4.png");
      background-blend-mode: scrreen;
  }
 
  .overlay{ background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459243/janecenter_zwa1tt_wmrqbd.png");
  }

  .jright{ 
    background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459255/janeright2_wu9yuc_jfpae0.png");
    mix-blend-mode: screen;
    animation: slideRight 3.5s ease forwards;
        }
    
     .jleft{ background-image: url("https://res.cloudinary.com/daoaxswnl/image/upload/v1491459262/janeleft2_smplqu_kbfjyw.png");
    mix-blend-mode: screen;
       animation: slideLeft 3.5s ease forwards;
        }
  }
}




*{
	margin:0;
	padding:0;
}


@keyframes slideLeft{
  0%{
    left: 0%;

  } 
  100%{
    left: 15%;
  }
  
}

@keyframes slideRight{
  0%{
    right: 0%;

  } 
  100%{
    right: 15%;
  }
  
}

@keyframes forestSlide{
  0%{
    left: -12%;

  } 
  100%{
    left: 10%;
  }
  
}