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.
Created
June 23, 2015 23:39
-
-
Save IgnetStudio/6db961ceb69c0fe9f3e5 to your computer and use it in GitHub Desktop.
Draggable Overflow
This file contains hidden or 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
| .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 |
This file contains hidden or 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
| $(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'); | |
| }); | |
| }); |
This file contains hidden or 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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or 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
| @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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment