Using CSS blender backgrounds & animation to create double exposure effects for article slides.
Created
August 2, 2017 19:25
-
-
Save anonymous/ef2f76204bb033fac21138fc69734614 to your computer and use it in GitHub Desktop.
Blend Mode Slider - Double Exposure
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
"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); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment