Draggable Overflow

Draggable Overflow.markdown

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.

A Pen by Ignet on CodePen.

License.

index.html

.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

script.js

$(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');
  });


});

scripts

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

style.css

@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;
  }
}