// Interval and words for placing words randomly
var interval = 100; // Interval between word placements (in milliseconds)
var words = [
'JavaScript',
'Angular',
'ReactJS',
'Three.js',
'Moment',
'Redux',
'Chart.js',
'Ember',
'BackboneJS',
'Underscore',
'Reveal.js',
'Babel',
'Modernizr',
'CoffeeScript',
'TypeScript',
'Gulp',
'NodeJS',
'Select2',
'Bower',
'NPM',
'Express',
'Pdf.js',
'Full Page.js',
'Foundation',
'Bootstrap',
'Mocha',
'Jasmine',
'D3.js',
'Mustache.js',
'Handlebars',
'jQuery Validation',
'Lodash',
'RequireJS',
'IntroJS',
'Typeahead.js',
'Scrollr',
'MooTools',
'Prototype',
'YUI',
'Dojo',
'Raphael',
'Knockout'
];
// Get the width and height of the viewport
var width = window.innerWidth;
var height = window.innerHeight;
// Function to place words at random positions
var wordPlacementInterval = setInterval(function() {
var currentWord = words.shift();
if (currentWord) {
var word = document.createElement('span');
word.innerHTML = currentWord;
// Randomly position the word within the viewport
word.style.top = Math.floor(Math.random() * height) + 'px';
word.style.left = Math.floor(Math.random() * width) + 'px';
document.body.appendChild(word);
}
else {
clearInterval(wordPlacementInterval);
}
}, interval);
$("button").hover(function(){
var self = this;
var pos = -(Math.floor(Math.random() * 5) + 1) * 55
setTimeout(function(){
$(self).find("ul").css("margin-top", pos + "px");
}, 500);
}, function(){
$(this).find("ul").css("margin-top", "0px");
})
* {
box-sizing: border-box;
}
/* body {
font-family: "Arial", sans-serif;
} */
button {
margin: 10% auto;
display: block;
padding: 0;
appearance: none;
overflow: hidden;
height: 50px;
border: #DCDCDC 1px solid;
background-color: #F2F2F2;
background-image: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1);
background-image: -moz-linear-gradient(top, #F5F5F5, #F1F1F1);
z-index: 2;
}
button:hover {
border-color: darken(#DCDCDC, 5%);
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px;
background-image: -webkit-linear-gradient(top, #f8f8f8, #F1F1F1);
background-image: -moz-linear-gradient(top, #f8f8f8, #F1F1F1);
}
button:active {
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 1px;
outline: none !important;
}
button:focus {
outline: 1px #08c solid;
}
button ul {
margin-top: 0;
padding: 0;
list-style: none;
-webkit-transition: margin-top .45s ease-in-out;
-moz-transition: margin-top .45s ease-in-out;
transition: margin-top .45s ease-in-out;
}
button ul li {
display: block;
height: 55px;
padding: 1em;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
span {
font-size: 12px;
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="top"></div>
<button>
<ul>
<li>I'm Feeling Lucky</li>
<li>I'm Feeling Alone</li>
<li>I'm Feeling Absence</li>
<li>I'm Feeling Void</li>
<li>I'm Feeling Deficit</li>
<li>I'm Feeling Lack</li>
</ul>
</button>