Simple Night Sky

Developer
Assaf Gelber
Size
3,266 Kb
Views
4,048
  1. Simple Night Sky Previews
  2. Simple Night Sky HTML Codes
  3. Simple Night Sky CSS Codes
  4. Simple Night Sky JS Codes

How do I make an simple night sky?

Simple moon and stars with CSS. All stars are generated randomly each time with a little JS help.. What is a simple night sky? How do you make a simple night sky? This script and codes were developed by Assaf Gelber on 03 January 2023, Tuesday.

Simple Night Sky Previews
IQ Test

Simple Night Sky - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Night Sky</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html,
body { width: 100%; height: 100%; margin: 0; padding: 0; background: #15294e; overflow: hidden;
}
.moon { position: absolute; top: 10%; right: 25%; width: 200px; height: 200px; border-radius: 50%; background: #ddd; box-shadow: inset 20px -10px 0 0 #b9b9b9;
}
.moon .crater1 { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: #bbb; box-shadow: inset -6px 3px 0 0 #aaa; top: 30px; right: 30px;
}
.moon .crater2 { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #bbb; box-shadow: inset -2px 1px 0 0 #aaa; top: 80px; right: 100px;
}
.moon .crater3 { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #bbb; box-shadow: inset -3px 1.5px 0 0 #aaa; top: 110px; right: 60px;
}
.stars { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
}
.stars .star { position: absolute; background: #f8f4a2; border-radius: 50%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='stars js-plaxify' data-xrange='60' data-yrange='60'></div>
<div class='moon js-plaxify' data-xrange='20' data-yrange='20'> <div class='crater1'></div> <div class='crater2'></div> <div class='crater3'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/cameronmcefee/plax/master/js/plax.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Night Sky - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; margin: 0; padding: 0; background: #15294e; overflow: hidden;
}
.moon { position: absolute; top: 10%; right: 25%; width: 200px; height: 200px; border-radius: 50%; background: #ddd; box-shadow: inset 20px -10px 0 0 #b9b9b9;
}
.moon .crater1 { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: #bbb; box-shadow: inset -6px 3px 0 0 #aaa; top: 30px; right: 30px;
}
.moon .crater2 { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #bbb; box-shadow: inset -2px 1px 0 0 #aaa; top: 80px; right: 100px;
}
.moon .crater3 { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #bbb; box-shadow: inset -3px 1.5px 0 0 #aaa; top: 110px; right: 60px;
}
.stars { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
}
.stars .star { position: absolute; background: #f8f4a2; border-radius: 50%;
}

Simple Night Sky - Script Codes JS Codes

var $sky = $(".stars");
var skyHeight = $sky.innerHeight(), skyWidth = $sky.innerWidth(); numberOfStars = (skyWidth * skyHeight) / 10000;
for (var i = 0; i < numberOfStars; i++) { var starSize = Math.floor((Math.random() * 8) + 2), starTop = Math.floor(Math.random() * skyHeight), starLeft = Math.floor(Math.random() * skyWidth); $('<div class="star">').css({ width: starSize, height: starSize, top: starTop, left: starLeft }).prependTo($sky);
}
$(".js-plaxify").plaxify();
$.plax.enable();
Simple Night Sky - Script Codes
Simple Night Sky - Script Codes
Home Page Home
Developer Assaf Gelber
Username agelber
Uploaded January 03, 2023
Rating 4
Size 3,266 Kb
Views 4,048
Do you need developer help for Simple Night Sky?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Assaf Gelber (agelber) Script Codes
Name
Posting Animation
Origin Demo
Translate Demo
Perspective Demo
Form Placeholder Labels
Social Link Handle Animation
Blurring Menu
Pure CSS Image Gallery
Animation Demo
ScaleZ Demo
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!