Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                a(href="https://dribbble.com/shots/5932864-My-first-app-interface" class="shot" target="blank") &#9829; Dribbble shot
.phone
  .screen#content
    .img
    .menu
      h4.top Clickable
      ul
        li Trigger (hamburger)
        li Author icon
        li Social icons

      h4 Draggable
      ul
        li All interface (scroll)
        li Social icons
        li Images in slider (left & right)
        li Blocks in topic
    .navbar
      .trigger
        span Rock'N'Roll
    .content
      .author
        .on
      h1.name Andrej Sharapov
        span Frontend developer
      .block
        h3 Follow:
        .social#sortabletwo
          div.on
            a(href="https://twitter.com/andrejsharapov" target="_blank")
              svg(
              viewBox="0 0 72 72"
              width="32"
              fill="#fff"
              )
                path(
                d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"
                )
          div.tw
            a(href="https://dribbble.com/andrejsharapov" target="_blank")
              svg(
              width="28"  
              viewBox="0 0 32 32" 
              fill="none"
              )
                rect(
                fill="black" 
                fill-opacity="0"
                )
                path(
                fill="#fff"
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M16 0C7.16703 0 0 7.16703 0 16C0 24.833 7.16703 32 16 32C24.8156 32 32 24.833 32 16C32 7.16703 24.8156 0 16 0ZM26.5683 7.37527C28.4772 9.70065 29.6226 12.6681 29.6573 15.8785C29.2061 15.7918 24.6941 14.872 20.1475 15.4447C20.0434 15.2191 19.9566 14.9761 19.8525 14.7332C19.5748 14.0738 19.2625 13.397 18.9501 12.7549C23.9826 10.7072 26.2733 7.75705 26.5683 7.37527ZM16 2.36009C19.4707 2.36009 22.6464 3.66161 25.0586 5.7961C24.8156 6.14317 22.7505 8.90239 17.8915 10.7245C15.6529 6.61171 13.1714 3.24512 12.7896 2.72451C13.8134 2.48156 14.8894 2.36009 16 2.36009ZM10.1866 3.64425C10.551 4.13015 12.9805 7.5141 15.2538 11.5401C8.86768 13.2408 3.22777 13.2061 2.62039 13.2061C3.50542 8.9718 6.36876 5.44902 10.1866 3.64425ZM2.32538 16.0174C2.32538 15.8785 2.32538 15.7397 2.32538 15.6009C2.9154 15.6182 9.54447 15.705 16.3644 13.6573C16.7636 14.4208 17.128 15.2017 17.4751 15.9826C17.3015 16.0347 17.1106 16.0868 16.9371 16.1388C9.89154 18.4121 6.14317 24.6247 5.8308 25.1453C3.6616 22.7332 2.32538 19.5228 2.32538 16.0174ZM16 29.6746C12.8416 29.6746 9.92625 28.5987 7.61822 26.7939C7.86117 26.2907 10.6377 20.9458 18.3427 18.256C18.3774 18.2386 18.3948 18.2386 18.4295 18.2213C20.3557 23.2017 21.1367 27.3839 21.3449 28.5813C19.6963 29.2928 17.8915 29.6746 16 29.6746ZM23.6182 27.3319C23.4794 26.4989 22.7505 22.5076 20.9631 17.5965C25.2495 16.9197 28.9978 18.0304 29.4664 18.1866C28.8764 21.987 26.6898 25.2668 23.6182 27.3319Z"
                )
          div.thr
            a(href="https://codepen.io/andrejsharapov" target="_blank")
              svg(
              viewBox="0 0 100 100"
              width="28" 
              fill="#fff"
              )
                path(
                d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"
              )
      .text
        h3 Skills:
      .slider
        .map
          .carousel
            div CSS 3<br>&#9829;
            div HTML 5<br> & <br>Haml/Pug
            div JavaScript
            div SASS/SCSS<br> & <br>Stylus
            div jQuery<br> & <br>Bootstrap
            div PHP
            div React<br> & <br>Vue
      .text
        h3 Topics:
      .topics#sortable
        div.on.ui-state-default 
          h4 This my first experience with the stylus
          p.inside
            | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim, illo at amet quod quo veniam vero soluta rem quidem, magnam velit blanditiis, repudiandae nisi? Nostrum voluptas atque error porro aliquid!Maiores quidem autem quisquam asperiores veritatis, doloremque, sint repellendus numquam optio expedita quae consequuntur illum beatae ipsa ipsam quia quis deserunt eligendi magnam vitae! Voluptate libero nisi amet illum suscipit.
        div.tw.ui-state-default 
          h4 Out of habit i add dots and commas
          p.inside
            svg(
            viewBox="0 0 424.239 424.239"
            fill="#fff"
            width="72"
            )
              path(            d="M129.287,245.558c3.906,0,7.578,1.521,10.34,4.283c1.562,1.562,3.609,2.344,5.657,2.343c2.047,0,4.095-0.781,5.657-2.343 		c3.125-3.124,3.125-8.189,0-11.314c-5.784-5.784-13.474-8.969-21.653-8.969c-8.179,0-15.869,3.185-21.653,8.969 		c-3.125,3.124-3.125,8.189,0,11.314s8.19,3.124,11.313,0C121.709,247.079,125.381,245.558,129.287,245.558z"
            )
              path(
              d="M273.298,238.527c-3.125,3.124-3.125,8.189,0,11.314c3.124,3.124,8.189,3.124,11.313,0c5.701-5.702,14.979-5.701,20.68,0 		c1.562,1.562,3.609,2.343,5.657,2.343s4.095-0.781,5.657-2.343c3.125-3.124,3.125-8.189,0-11.314 		C304.667,226.588,285.239,226.587,273.298,238.527z"
            )
              path(
              d="M294.908,317.447c-45.65,45.65-119.927,45.65-165.578,0c-3.124-3.124-8.189-3.124-11.313,0 		c-3.125,3.124-3.125,8.19,0,11.314c25.944,25.944,60.023,38.916,94.102,38.916c34.08,0,68.159-12.972,94.103-38.916 		c3.125-3.124,3.125-8.189,0-11.314C303.098,314.323,298.032,314.323,294.908,317.447z"
            )
              path(
              d="M400.881,254.178c0-21.731-15.71-39.851-36.366-43.63V76.715c0-17.362-8.637-33.458-23.104-43.057 		c-13.589-9.015-30.457-11.061-45.711-5.686l-50.226-17.048C206.88-2.177,166.255-3.521,127.992,7.036 		C77.9,20.857,49.182,50.083,44.749,91.627c-3.923,5.174-7.04,10.985-9.158,17.255l-3.896,11.531 		c-2.091,6.191,0.214,12.697,5.738,16.189c5.523,3.492,12.39,2.786,17.086-1.759c1.604-1.553,3.358-2.861,5.204-3.955v79.66 		c-20.656,3.779-36.366,21.898-36.366,43.63c0,22.601,16.991,41.296,38.868,44.014c5.494,30.336,19.931,58.319,42.006,80.712 		c28.821,29.236,67.135,45.336,107.888,45.336c0.005,0,0.01,0,0.015,0c40.701-0.004,78.965-15.856,107.745-44.635 		c22.481-22.481,37.073-50.749,42.386-81.445C384.02,295.329,400.881,276.691,400.881,254.178z M332.565,46.991 		c10.137,6.725,15.95,17.559,15.95,29.724v104.689c-24.831-3.859-43.897-25.383-43.897-51.279l-0.662-87.96 		C313.725,39.59,323.912,41.25,332.565,46.991z M49.195,118.604l1.555-4.601c4.073-12.055,13.118-21.842,24.815-26.85 		c11.696-5.008,25.021-4.8,36.556,0.573c24.226,11.283,53.513,5.183,71.219-14.833l1.982-2.241 		c2.928-3.309,2.618-8.365-0.691-11.292c-3.31-2.927-8.366-2.618-11.293,0.691l-1.982,2.241 		c-13.048,14.75-34.629,19.244-52.48,10.93c-15.653-7.291-33.736-7.574-49.609-0.777c-1.445,0.619-2.85,1.31-4.233,2.033 		c9.299-24.791,31.805-42.249,67.215-52.019c35.161-9.702,72.535-8.451,108.084,3.615l47.623,16.165l0.624,41.337 		c-21.205,28.831-52.131,48.348-87.373,55.059c-36.087,6.871-72.901-0.4-103.663-20.474 		C82.513,108.354,63.562,108.773,49.195,118.604z M39.357,254.178c0-12.863,8.609-23.747,20.366-27.21v43.362 		c0,3.746,0.135,7.471,0.398,11.172C48.162,278.169,39.357,267.186,39.357,254.178z M308.566,368.29 		c-25.758,25.758-60.005,39.945-96.433,39.949c-0.006,0-0.007,0-0.014,0c-36.433,0-70.705-14.409-96.494-40.568 		c-25.731-26.102-39.902-60.672-39.902-97.342V127.116c4.531,0.338,9.027,1.804,13.075,4.445 		c34.246,22.347,75.228,30.442,115.4,22.792c32.609-6.21,61.903-22.263,84.419-45.938v21.709c0,34.731,26.217,63.437,59.897,67.41 		v74.308C348.515,308.276,334.328,342.529,308.566,368.29z M364.206,281.476c0.198-3.194,0.309-6.405,0.309-9.633v-44.875 		c11.757,3.463,20.366,14.347,20.366,27.21C384.881,267.153,376.121,278.114,364.206,281.476z"
            )
        div.thr.ui-state-default 
          h4 Not enough time
          p.inside
            svg(
            viewBox="0 0 60 60"
            fill="#fff"
            width="60"
            )
              path(
              d="M30,0c-0.553,0-1,0.447-1,1v13.292c0,0.553,0.447,1,1,1s1-0.447,1-1V2.018C45.979,2.546,58,14.896,58,30 		c0,15.439-12.561,28-28,28S2,45.439,2,30c0-7.46,2.9-14.479,8.166-19.764c0.391-0.392,0.389-1.024-0.002-1.414 		C9.772,8.434,9.14,8.434,8.75,8.824C3.107,14.486,0,22.007,0,30c0,16.542,13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z"
              )
              path(                d="M28.555,33.532c0.614,0.845,1.563,1.376,2.604,1.457C31.252,34.997,31.345,35,31.437,35c0.942,0,1.848-0.372,2.519-1.044 		c0.737-0.737,1.114-1.756,1.033-2.797s-0.612-1.99-1.459-2.606l-12.944-9.363c-0.396-0.286-0.945-0.242-1.293,0.104 		c-0.348,0.348-0.391,0.896-0.104,1.293L28.555,33.532z M32.355,30.172c0.371,0.27,0.604,0.687,0.64,1.144 		c0.036,0.456-0.13,0.903-0.453,1.227c-0.324,0.323-0.779,0.488-1.228,0.453c-0.456-0.035-0.873-0.269-1.141-0.637l-5.713-7.897 		L32.355,30.172z"
              )
        div.fo.ui-state-default Body's separately, heads separately &copy; Venom
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900')

bgc = #1d1e22
txt = #fff
drk = #333
lght = #efefef
grn = #07994b
on = #1da1f2
tw = #ee0979
thr = #1d1e22

colored(col)
  background col
  color lighten(col, 75%)
  border-top 2px solid lighten(col, 10%)
  border-bottom 2px solid darken(col, 10%)

*
::before
::after
  box-sizing border-box

::-webkit-scrollbar
  width 6px
  height 6px

::-webkit-scrollbar-track
  border-radius 5px
  background-color rgba(bgc, 0.05)
  
::-webkit-scrollbar-thumb
  border-radius 5px
  background-color rgba(bgc, 0.35)
  
  &:hover
    background-color rgba(bgc, 0.75)

.shot
  position fixed
  top 1em
  left 1em
  text-decoration none
  text-transform uppercase
  font-size 0.825rem
  font-weight 600
  color tw
    
body
  margin 0
  display flex
  min-height 100vh
  justify-content center
  align-items center
  font-family 'Montserrat', sans-serif
  font-size 62.5%
  background-color lght
  
  h1
  h2
  h3    
    font-weight 800
  
.phone
  position relative
  margin auto
  overflow hidden
  width 300px
  height 580px
  padding 50px 10px
  border-radius 40px
  background txt
  box-shadow 0 1px 4px 0 rgba(drk, 0.1), 0 8px 24px 0 rgba(drk, 0.1), 0 0 0 1px rgba(drk, 0.03), inset 0 -2px 2px 2px rgba(drk, 0.05)

.screen
  position relative
  width 280px
  height 480px
  overflow-x hidden
  overflow-y scroll // if you turn off the scroll function by pressing, a scroll bar will appear
  font-size 1rem
  background lght
  border-radius 4px
  box-shadow inset 0px 1px 3px rgba(0, 0, 0, 0.1)
  
  &.hidden
    overflow-y hidden

  .img
    position absolute
    top 0
    left 0
    z-index 0
    width 100%
    height 150px
    background-image url(https://s3.amazonaws.com/media.eremedia.com/wp-content/uploads/2018/05/31112343/Codepen.png)
    background-size cover
    object-fit cover
    
    &::before
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      content ''
      background-color rgba(on, 0.55)
      background-image linear-gradient(
      45deg,
      rgba(on, 0.8),
      rgba(tw, 0.8)
    )
      
  .menu
    position absolute
    padding 1em
    padding-top 120px
    z-index 2
    display flex
    width 280px
    height 100%
    flex-flow column wrap
    justify-content flex-start
    align-items flex-start
    color txt
    border-radius 0% 100% 48% 52% / 100% 0% 100% 0%
    background-color lighten(on, 5%)
    background-image linear-gradient(
      45deg,
      on,
      tw
    )
    transform-origin 100% 0%
    transform translateX(-101%) scale(0)
    transition transform 0.25s ease-out
    
    &::before
    &::after
      position absolute
      top 0
      left 0
      z-index -2
      content ''
      width 100vw
      height 100vh
      border-radius 0% 100% 48% 52% / 100% 0% 100% 0%
      background-image inherit
      transform cubic-bezier(0.75, 0, 0.15, 1) 0.6s, border-radius linear 0.8s
      transition transform cubic-bezier(0.75, 0, 0.15, 1) 0.6s
      
    &::before
      opacity 0.6
      transition-delay 0s
      
    &::after
      opacity 0.4
      transition-delay 0.2s
      
    &.open
      border-radius 4px
      transform translateX(0%) scale(1)
      
      &::after
        border-radius 4px
        
      h4
        margin 0
        text-transform uppercase
      
      ul
        padding-left: 1em
        list-style-type circle      
        li
          line-height 1.5

  .navbar
    position relative
    z-index 2
    display flex
    width 100%
    height 150px
    padding 1em
    justify-content flex-start
    align-items center
        
    .trigger
      position relative
      width 30px
      height 26px
      cursor pointer
      border-top 5px solid txt
      border-bottom 5px solid txt
      border-radius 2px
      transition all 200ms linear
      
      span
        visibility hidden
        opacity 0
        transform translate(5px, 35px)
        color txt
        writing-mode vertical-lr
        letter-spacing 4px
      
      &::before
      &::after
        position absolute
        content ''
        top 2px
        left -4px
        width calc(100% + 8px)
        height 5px
        border-radius 2px
        background-color txt
        transition all 200ms linear

      &::after
        top 9px

      &.active
        transform rotate(-90deg)
        
        span
          visibility visible
          opacity 1
          transition all 300ms ease-in-out
          transition-delay 0.3s

        &::before
          width 65%
        &::after
          width 60%
   
  .content
    width 100%
    padding 1em

    .author
      position relative
      margin-top -30px
      width 74px
      height 74px
      cursor pointer
      border-radius 50%
      background-image url(https://s.cdpn.io/profiles/user/2727382/80.jpg?1545923020)
      background-size cover
      object-fit cover
      
      .on
        position absolute
        top -1px
        right -1px
        width 76px
        height 76px
        border 5px solid on
        border-radius 50%
        box-shadow 0 0 0 0 rgba(on, 0.5)
        animation pulse 1.5s infinite

        &.off
          border-color lighten(thr, 55%)
          animation none

    .name
      position absolute
      top 150px
      left 40%
      font-size 1.1rem
      color on

      &.non
        color lighten(thr, 45%)

      span
        display block
        font-size 0.825rem
        font-weight 500
        color lighten(thr, 25%)

    .block
      display flex
      width 100%
      height 50px
      justify-content space-between
      align-items flex-end

      h3
        margin 0
        color lighten(thr, 25%)

      .social
        display flex
        justify-content flex-end
        align-items center

        div
          position relative
          margin auto 0.1em
          width 48px
          height 48px
          border-radius 0.25em
          transition all 0.2s ease-out
          will-change transform

          a
            display flex
            width 48px
            height 48px
            justify-content center
            align-items center

            cursor move
            cursor grab
            cursor -moz-grab
            cursor -webkit-grab

            &:active
              cursor grabbing
              cursor -moz-grabbing
              cursor -webkit-grabbing

          &:hover
              transform translateY(-5px)

          &.on
            colored(on)
          &.tw
            colored(tw)
          &.thr
            colored(thr)

     .text
       h3
         margin 0.5em auto
         color lighten(thr, 25%)

     .slider
      position relative
      overflow-y hidden
      width 100%

      .map
        width 750px

        .carousel
          display flex
          width 100%
          height 120px
          align-items center
          justify-content flex-start

          div
            position relative
            margin auto
            display flex
            width 98px
            height 98px
            justify-content center
            align-items center
            text-align center
            font-size 1rem
            font-weight 800
            transition transform .2s ease-out
            border-radius 0.35em
            background-position center
            background-repeat no-repeat
            background-size 64px
            // object-fit cover

            cursor move
            cursor grab
            cursor -moz-grab
            cursor -webkit-grab
            
            &:hover
              z-index 2
              animation .5s shake forwards

            &:active
              cursor grabbing
              cursor -moz-grabbing
              cursor -webkit-grabbing

            &:nth-child(1)
              colored(on)
            &:nth-child(2)
              colored(#ed5f28)
            &:nth-child(3)
              colored(#f5de19)
            &:nth-child(4)
              colored(#cf649a)
            &:nth-child(5)
              colored(#0562a8)
            &:nth-child(6)
              colored(#777bb3)
            &:nth-child(7)
              colored(#61dafb)
     
     .topics
       display grid
       grid-template-columns 1fr 1fr
       grid-template-rows 1fr 1fr
       grid-gap 0.5em
       
       div
        position relative
        bottom 0
        left 0
        z-index 0
        padding 0.25em
        display flex
        width 100%
        height 110px
        flex-direction column
        justify-content center
        text-align center
        color txt
        border-radius 0.25em
        box-shadow 0px 0px 15px rgba(bgc, 0.1)
        transform-origin center center
        will-change transform

        cursor move
        cursor grab
        cursor -moz-grab
        cursor -webkit-grab
        
        .inside
          display none
          padding 0.5em
          text-align justify
        
        &:hover
          animation .5s shake forwards

        &:active
          cursor grabbing
          cursor -moz-grabbing
          cursor -webkit-grabbing
        
        &.on
          colored(on)
        &.tw
         colored(tw)
        &.thr
         colored(thr)
        &.fo
         colored(grn)
         
        &.full
          position absolute
          bottom 0
          left 0
          z-index 4
          width 280px
          height 480px
          transition all .2s ease-out
          
          &:hover
            animation none
          
          .inside
            display flex
            flex-direction column
            justify-content center
            align-items center

@keyframes pulse
  70%
    box-shadow 0 0 0 15px rgba(on, 0)
  100%
    box-shadow 0 0 0 0 rgba(on, 0)
    
@keyframes shake
  50% 
    transform scale(1.1)

              
            
!

JS

              
                //navbar
$('.trigger').click(function() {
  $(this).toggleClass('active');
  $('.menu').toggleClass('open');
  $('.screen').toggleClass('hidden');
});

// sort content
$(function() {
  $('#sortabletwo').sortable({
    revert: true,
    axis: "x"
  });
  $('div').disableSelection();
});

// author
$('.author').click(function() {
  $('.on').toggleClass('off');
  $('.name').toggleClass('non');
});

$('.topics div').click(function() {
  $(this).toggleClass('full');
});

// slider
let route;
$(".map").draggable({
  drag: function(event, ui) {
    var h =
        $(this)
          .parent()
          .height() - $(this).height(),
      w =
        $(this)
          .parent()
          .width() - $(this).width();
    ui.position.left > 0 && (ui.position.left = 0);
    ui.position.top > 0 && (ui.position.top = 0);
    ui.position.left < w && (ui.position.left = w);
    ui.position.top < h && (ui.position.top = h);
    Math.abs(route[0] - ui.position.top) < 50 && (ui.position.top = route[0]);
  },
  start: function(event, ui) {
    route = [ui.position.top, ui.position.left];
  },
  stop: function(event, ui) {
    var pos = {},
      w =
        Math[route[1] < ui.position.left ? "ceil" : "floor"](
          ui.position.left / 175
        ) * 175;
    var w =
      Math[
        Math.abs(route[0] - ui.position.top) > 50
          ? "round"
          : route[1] < ui.position.left ? "ceil" : "floor"
      ](ui.position.left / 175) * 175;
    Math.abs(route[0] - ui.position.top) > 50 &&
      $(this).animate(
        {
          top: route[0] > ui.position.top ? -175 : 0
        },
        600
      );
    $(this).animate(
      {
        left: w
      },
      600
    );
  }
});

// pressing mouse scroll content (mouse wheel is disabled)
(function($) {
  $.fn.touchanddrag = function() {
    this.wrapInner("<div>");
    var box = this,
      data = this.children();
    box.css({ overflow: "hidden" });
    data.css({ position: "relative", cursor: "default" });
    // touch and drag content
    data.mousedown(function(e) {
      var hgtBox = box.height(),
        hgtData = data.height();
      if (hgtData > hgtBox) {
        var posTap = e.pageY,
          posData = data.position().top,
          posShift,
          mouseMove = function(e) {
            if (e.which == 1) {
              posShift = e.pageY - posTap;
              if (data.position().top > 0) {
                data.css({ top: (posData + posShift) / 5 });
              } else if (data.position().top + hgtData < hgtBox) {
                data.css({ top: hgtBox - hgtData + posShift / 5 });
              } else {
                data.css({ top: posData + posShift });
              }
            } else {
              mouseUp();
            }
          },
          mouseUp = function() {
            $(document)
              .off("mousemove", mouseMove)
              .off("mouseup", mouseUp);
            $(document).off("mousedown", selection);
            data.css({ cursor: "default" });
            if (data.position().top > 0) {
              data.animate({ top: 0 }, 250);
            } else if (data.position().top + hgtData < hgtBox) {
              data.animate({ top: hgtBox - hgtData }, 250);
            }
          },
          selection = function() {
            if (window.getSelection) {
              window.getSelection().removeAllRanges();
            } else {
              document.selection.empty();
            }
            return false;
          };
        data.css({ cursor: "move" });
        $(document)
          .on("mousedown", selection)
          .on("mousemove", mouseMove);
        $(document)
          .on("mouseup", mouseUp)
          .on("contextmenu", mouseUp);
        $(window).on("blur", mouseUp);
      }
    });
    return this;
  };
})(jQuery);

$(document).ready(function() {
  $("#content").touchanddrag();
});
              
            
!
999px

Console