Reveal text by dragging horizontally.
This should really be a jquery plugin with some kickass sass mixins but I was just playing.
Forked from Charlotte Dann's Pen Draggable Overflow.
Reveal text by dragging horizontally.
This should really be a jquery plugin with some kickass sass mixins but I was just playing.
Forked from Charlotte Dann's Pen Draggable Overflow.
.content | |
.draggable.big | |
.draggable-wrap | |
.draggable-inner | |
Draggable overflow for long sentences without the space | |
.draggable | |
.draggable-wrap | |
.draggable-inner | |
"Such is the nature of men, that howsoever they may acknowledge many others to be more witty, or more eloquent, or more learned; yet they will hardly believe there to be many so wise as themselves." - Thomas Hobbes |
$(document).ready(function() { | |
$('.draggable').each(function() { | |
var $this = $(this); | |
$this.addClass('left right'); | |
if ($this.width() < $this.find('.draggable-inner').outerWidth()) { | |
$this.removeClass('right'); | |
} else { | |
$this.addClass('nodrag'); | |
} | |
}) | |
$('.draggable').on('mousedown', '.draggable-wrap', function(e) { | |
var $this = $(this); | |
var x = e.pageX-parseInt($this.css('left')); | |
$this.addClass('dragging').parents().on('mousemove', function(e) { | |
var $drag = $('.dragging'); | |
var left = e.pageX-x; | |
$drag.closest('.draggable').removeClass('left right'); | |
if (left > 0) { | |
left = 0; | |
$drag.closest('.draggable').addClass('left'); | |
} | |
if (left < -$drag.find('.draggable-inner').outerWidth()+$drag.width()) { | |
left = -$drag.find('.draggable-inner').outerWidth()+$drag.width(); | |
$drag.closest('.draggable').addClass('right'); | |
} | |
$drag.css({left: left}); | |
$drag.on('mouseup', function() { | |
$(this).removeClass('draggable'); | |
}); | |
}); | |
e.preventDefault(); | |
}) | |
$(document).on('mouseup', function() { | |
$('.dragging').removeClass('dragging'); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import "compass/css3"; | |
$bg: thistle; | |
$text: #000; | |
$drag-bg: $bg; | |
$fade-start: rgba($bg,0.8); | |
$fade-end: $bg; | |
$fade-size: 2em; | |
$fade-border: 1px solid desaturate(darken($bg,20),50); | |
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro); | |
html { | |
font-size: 10px; | |
} | |
body { | |
background: $bg; | |
margin: 0; | |
font-family: Source Sans Pro, Open Sans, Helvetica, sans-serif; | |
font-size: 1.6rem; | |
color: $text; | |
} | |
* { | |
box-sizing: border-box; | |
} | |
.content { | |
margin: 0; | |
padding: 5rem 2rem; | |
} | |
.draggable { | |
max-width: 60rem; | |
margin: 3rem auto; | |
background-color: $drag-bg; | |
position: relative; | |
overflow: hidden; | |
cursor: col-resize; | |
user-select: none; | |
&.big { | |
font-size: 4rem; | |
} | |
&.nodrag { | |
cursor: default; | |
user-select: none; | |
} | |
.draggable-wrap { | |
white-space: nowrap; | |
position: relative; | |
left: 0px; | |
} | |
.draggable-inner { | |
display: inline-block; | |
padding: 1rem $fade-size; | |
} | |
&:before, &:after { | |
content: ''; | |
display: block; | |
position: absolute; | |
width: $fade-size; | |
height: 100%; | |
z-index: 10; | |
} | |
&:before { | |
@include background(linear-gradient(right, $fade-start, $fade-end)); | |
border-right: $fade-border; | |
} | |
&:after { | |
right: 0; | |
top: 0; | |
@include background(linear-gradient(left, $fade-start, $fade-end)); | |
border-left: $fade-border; | |
} | |
&.left:before, &.right:after { | |
display: none; | |
} | |
} |