Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<section class="rw-wrapper">
                <h2 class="rw-sentence">
                    <span class="cursor">I WANT NOTHING BUT</span>
          <br>
                    <div class="rw-words">
            <span class="type">spice</span>
                        <span class="type">color</span>
                        <span class="type">happiness</span>
                        <span class="type">wonder</span>
                        <span class="type">sugar</span>
                        <span class="type">happiness</span>
                    </div>
                </h2>
            </section>
 
body {
   font-family: "HelveticaNeue-Light", sans-serif; 
}
​
.rw-wrapper{
    margin: 20px auto 0 auto;
    padding: 10px;
}
​
.rw-sentence{
    margin: 0;
}
​
.rw-sentence span{
    color: #444;
    font-weight: normal;
}
​
.rw-words{
    display: inline;
  font-family: Consolas, monaco, monospace;
  width: 12vh;
}
​
.type{
    position: absolute;
    opacity: 0;
  width: 12ch;
    overflow: hidden;
    animation: words 18s steps(12) infinite 0s;
}
.type:nth-child(2) { 
  -webkit-animation-delay: 3s; 
  animation-delay: 3s;
}
.type:nth-child(3) { 
  -webkit-animation-delay: 6s; 
  animation-delay: 6s;
}
.type:nth-child(4) { 
  -webkit-animation-delay: 9s;
    animation-delay: 9s; 
}
.type:nth-child(5) { 
  -webkit-animation-delay: 12s; 
    animation-delay: 12s; 
}
.type:nth-child(6) { 
  -webkit-animation-delay: 15s;
    animation-delay: 15s; 
}
​
@keyframes words {
  0% { opacity: 0; width:0; }
  2% { opacity: 1;}
  14% { opacity: 1; width: 12ch;}
  15% { opacity: 0; }
}
​
.cursor:after {
    content:" _";
    opacity: 0;
    animation: cursor 1s infinite;
}
​
@keyframes cursor {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
​
 
if (location.pathname === '/welcome' || location.pathname === '/welcome/') {
  location = '/welcome/edit?html,live';
}
​
if (window.location.pathname.indexOf('/edit') !== -1) $('a.open').click(function (event) {
  event.preventDefault();
  window.top.$('a[href$="' + this.hash + '"]').mousedown().click();
});
​
var presses = 0;
​
var spin = [
  "Woahohaohaohaahoahaohaohaohaohaoha...",
  "Nononono...aiiiiiiiiiiiiieeeeeeee....",
  "Aaaaaaaaaghhhhh...woahwoahwoahwoahwoah...",
  "You're eeeeeeeeviiiiiiilllllllll....",
  "Eee...eee...eee...eee...eee...",
  "Woowoowoowoowoowoowoowoowoo..."
];
  
var stop = [
  "Please... never again.",
  "I'm so dizzy.",
  "That's just... cruel.",
  "Don't you have better things to do?",
  "I can't feel my toes... oh wait, I don't have any toes!",
  "This isn't fun anymore.",
  "...",
  "I'm going to be sick.",
  "Uh-oh, I think I just dropped some tables...",
  "Yep, I think I'm about to SQL-project everywhere...",
  "SELECT * FROM `stomach`...",
  "var_dump($result)...",
  "+_+"
];
​
$('#dave').mousedown(function () {
  
  $('#message').fadeOut(function () {
    $(this).text(spin[presses % spin.length]);
    presses = presses + 1;
  }).fadeIn();
  
}).mouseup(function () {
  
  $('#message').fadeOut(function () {
    $(this).text(stop[presses % stop.length]);
  }).fadeIn();
  
  if( presses >= stop.length - 1 ) {
    $(this).animate({left: '-999px'}, 1000 * 10, function () {
      $(this).animate({left: '0'}, 1000 * 4);
      presses = 0;
    });
  }
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers