Skip to content

Instantly share code, notes, and snippets.

@andrewlaskey

andrewlaskey/reveal_slider.html

Last active December 15, 2015 19:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewlaskey/5314367 to your computer and use it in GitHub Desktop.
Save andrewlaskey/5314367 to your computer and use it in GitHub Desktop.
Download ZIP
A responsive image with a slider to reveal hidden text.
Raw
reveal_slider.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Idiom Test - Slider</title>
<style type="text/css">
.wrapper {
position: relative;
width: 100%;
height: 500px;
background-attachment: fixed;
background-size: cover;
}
.highlight-stop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 4;
}
.color-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
z-index: 5;
-webkit-box-shadow: -2px 0 2px 0px #222 inset;
-moz-box-shadow: -2px 0 2px 0px #222 inset;
box-shadow: -2px 0 2px 0px #222 inset;
}
.color {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.6;
}
.hidden-text-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
z-index: 5;
overflow: hidden;
}
.hidden-text {
color: #FFF;
float: left;
height: 100%;
width: 100%;
margin: 3em auto;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.above-text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 6;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #FFF;
}
.divider {
position: absolute;
top: 50%;
right: -10px;
z-index: 6;
display: block;
width: 20px;
height: 20px;
cursor: pointer;
background: #FFF;
}
</style>
</head>
<body>
<div class="wrapper" data-img="Grand_Canyon.jpg">
<div class="color-mask" data-color="#BACDE8">
<div class="divider"></div>
<div class="color"></div>
</div>
<div class="hidden-text-mask">
<div class="hidden-text">
<h1>WE ARE SOME HIDDEN CHARACTERS</h1>
</div>
</div>
<div class="above-text">
<h2>I am not hidden</h2>
</div>
<div class="highlight-stop"></div>
</div>
<p>some text down here</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var handle = $(".wrapper");
$(document).ready(function(){
$('.wrapper').css("background-image", "url(" + $('.wrapper').attr('data-img') + ')');
$('.color-mask .color').css('background-color', $('.color-mask').attr('data-color'));
$('.hidden-text').width($('.wrapper').width());
handle.mousedown(function() {
$(this).data("sliding", true);
});
handle.mouseup(function() {
$(this).data("sliding", false);
});
});
$(document).mousemove(function(e) {
var colorMask = $(".color-mask"),
textMask = $(".hidden-text-mask");
if(handle.data("sliding"))
{
var offs = e.pageX - colorMask.offset().left
colorMask.width(offs);
textMask.width(offs);
}
});
$(window).on("resize", function() {
$('.hidden-text').width($('.wrapper').width());
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment