Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Rocketship to Planet Feelings</title>
- <script type="text/javascript">
- // Type the number of images you are rotating.
- NumberOfImagesToRotate = 14;
- // Keep track of Unique Planet ID (UPID (tm))
- var lastId = 0;
- // CSS parts
- var parts = "";
- parts += "-webkit-transition: 2s;";
- parts += "-moz-transition: 2s;";
- parts += "-o-transition: 2s;";
- parts += "-ms-transition: 2s;";
- parts += "float: left;";
- parts += "background-image: url(img/pplanet{r}.png);";
- parts += "margin: {margin};";
- parts += "background-size: {scale}px {scale}px;";
- parts += "background-repeat: no-repeat;";
- parts += "background-position: center;";
- parts += "background-color: #FF33FF;"; // < dees lijn wegdoen als ge geen couleurke wilt
- parts += "width: 250px;";
- parts += "height: 250px;";
- parts += "background-clip: border-box;";
- parts += "-ms-transform: rotate({rot}deg);";
- parts += "-webkit-transform: rotate({rot}deg);";
- parts += "transform: rotate({rot}deg);";
- function printImage()
- {
- // Define properties of the planet
- var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
- var margin = Math.ceil(Math.random() * 50);
- var scale = randomIntFromInterval(180, 230);
- var rotate = Math.ceil(Math.random() * 360);
- var endSize = 250;
- // Create our CSS for this planet by replacing
- var clone = parts + "";
- clone = replaceAll("{r}", r, clone);
- clone = replaceAll("{margin}", margin, clone);
- clone = replaceAll("{scale}", scale, clone);
- clone = replaceAll("{rot}", rotate, clone);
- // New id please and write CSS style and div
- lastId++;
- document.write('<style type="text/css">.planet' + lastId + '{' + clone + '}.planet' + lastId + ':hover{background-size:' + endSize + 'px ' + endSize + 'px;</style>');
- document.write('<div class="planet' + lastId + '"></div>');
- }
- function replaceAll(find, replace, str)
- {
- return str.replace(new RegExp(find, 'g'), replace);
- }
- function randomIntFromInterval(min, max)
- {
- return Math.floor(Math.random() * (max - min + 1) + min);
- }
- </script>
- <style>
- body
- {
- background-color: #383131;
- margin: 0;
- }
- .planets
- {
- /* background-color: blue; */
- width: 80%;
- height: 200%;
- text-align: center;
- }
- .sidebar
- {
- text-align: center;
- float: right;
- /* background-color: yellow; */
- width: 20%;
- height: 100%;
- }
- .planet:hover
- {
- background-size: 250px 250px;
- }
- img.planet:hover
- {
- cursor:pointer;
- margin-top: 5px;
- width: 250px;
- height: auto;
- background-color: blue;
- -webkit-transform: scale(1.2);
- -moz-transform: scale(1.2);
- -ms-transform: scale(1.2);
- transform: scale(1.2);
- }
- </style>
- </head>
- <body>
- <div class="sidebar">
- </div>
- <div class="planets">
- <script type="text/javascript">
- // 20 planets pl0x
- for(var i = 0; i < 20; i++)
- {
- printImage();
- }
- </script>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement