Skip to content

Instantly share code, notes, and snippets.

@AsaoluElijah

AsaoluElijah/Starry Background with Clouds -- A PEN BY Kelly Meyers

Created September 30, 2019 16:16
Show Gist options
  • Save AsaoluElijah/d79cf35a1a23eeabab8f847dc6bc8633 to your computer and use it in GitHub Desktop.
Save AsaoluElijah/d79cf35a1a23eeabab8f847dc6bc8633 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Starry Background with Clouds -- A PEN BY Kelly Meyers
<head>
<meta charset="utf-8">
<meta name="description" content="Example page for stars and clouds background">
<meta name="keywords" content="web design, web programming, web development, web animation, merexcursion, kelly meyers">
<meta name="author" content="Kelly Meyers">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Stars and Clouds Background</title>
<!-- styles -->
<style>
body {
margin: 0;
padding: 0;
position: relative;
overflow-x: hidden;
width: 100%;
height: 2000px;
background: -webkit-linear-gradient(#27384F, #24a29e, #fff);
background: -o-linear-gradient(#27384F, #24a29e, #fff);
background: -moz-linear-gradient(#27384F, #24a29e, #fff);
background: linear-gradient(#27384F, #24a29e, #fff);
}
#starryBG {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.stars {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top:0;
}
.stars figure img {
display: block;
max-width: 100%;
height:auto;
filter:Alpha(opacity=60);
opacity: 0.6;
}
.stars figure {
position:absolute;
display: block;
}
#stars2 figure img {
filter:Alpha(opacity=40);
opacity: 0.4;
}
#stars3 figure img {
filter:Alpha(opacity=20);
opacity: 0.2;
}
@keyframes shootingStar {
100% {top:5%; left:130%;width:5px;}
}
.shooting-star {
position: absolute;
left: -10%;
animation-name: shootingStar;
animation-duration: 3s;
}
#clouds {
position: absolute;
left: 0;
bottom: 50px;
height: 353px;
width: 100%;
overflow-x: hidden;
}
#clouds div {
position: absolute;
left: 0;
bottom: 0;
}
#cloud1 {
width: 3185px;
height: 353px;
background-image: url(https://merexcursion.com/stars-and-clouds-bg/images/cloud1.png);
background-position: center;
background-repeat: repeat-x;
filter:Alpha(opacity=30);
opacity: 0.3;
animation: animatedBackground 100s linear infinite;
}
#cloud2 {
width: 2950px;
height: 290px;
background-image: url(https://merexcursion.com/stars-and-clouds-bg/images/cloud2.png);
background-position: center;
background-repeat: repeat-x;
filter:Alpha(opacity=50);
opacity: 0.5;
animation: animatedBackground 85s linear infinite;
}
#cloud3 {
width: 3075px;
height: 207px;
background-image: url(https://merexcursion.com/stars-and-clouds-bg/images/cloud3.png);
background-position: center;
background-repeat: repeat-x;
filter:Alpha(opacity=70);
opacity: 0.7;
animation: animatedBackground 60s linear infinite;
}
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
</style>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<style>
body {
font-family: sans-serif;
font-size: 160%;
font-family: 'Pacifico', cursive;
}
h1 {
margin-top: 10%;
font-weight: 400;
}
h1, p {
color: #fff;
text-align: center;
margin-bottom: 10px;
text-shadow: 2px 2px 5px #27384F;
}
</style>
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="starryBG.js"></script>
</head>
<body>
<h1> Hello </h1>
<p>wait for shooting star...</p>
<p>Scroll Down</p>
<div id="clouds">
<div id="cloud3"></div>
<div id="cloud1"></div>
<div id="cloud2"></div>
</div>
<div>
<div id="starryBG">
<div id="stars1" class="stars parallax"></div>
<div id="stars2" class="stars parallax"></div>
<div id="stars3" class="stars parallax"></div>
</div>
<script>
(function(global, $){
$.fn.fill = function(howMany){
this.starNum = howMany;
var randomWidth, randomPlaceFromTop, randomPlaceFromLeft, addStar;
var imgHTMLStart = '<figure style="';
var imgHTMLEnd = '"><img src="http://merexcursion.com/stars-and-clouds-bg/images/star-trans.png" alt="star"></figure>';
while(this.starNum>0){
randomWidth = 'width:'+ ((Math.floor(Math.random() * (1 + 15))) + 2) + 'px;';
randomPlaceFromTop = 'top:'+ (Math.round(Math.random() * 100)) + '%;';
randomPlaceFromLeft = 'left:'+ (Math.round(Math.random() * 100)) + '%;';
addStar = imgHTMLStart + randomWidth + randomPlaceFromTop + randomPlaceFromLeft + imgHTMLEnd;
$(this).append(addStar);
this.starNum--;
}
return this;
}
$.fn.parallax = function(speed){ // speed is a percent of total distance -- .30 etc
this.speed = speed;
this.curScrollPos;
this.distance;
this.docHeight = $('body').height();
$(global).scroll(function(){
this.curScrollPos = $(window).scrollTop();
this.distance = this.curScrollPos*this.speed;
$(this).css('top', '-' + this.distance + 'px');
this.startScrollPos = this.curScrollPos;
}.bind(this));
return this;
}
$.fn.shootingStar = function(frequency){ // frequency = time in milliseconds
var self = this;
this.frequency = frequency;
this.shootStar = function(){ // new star each time
this.shootingStarId = 'star' + ((Math.round(Math.random() * 100))*(Math.round(Math.random() * 100)));
this.randomSsWidth = ((Math.floor(Math.random() * (15 + 25))) + 2) + 'px';
this.randomTop = (Math.round(Math.random() * 100)) + '%';
this.shootingStarHTML = '<figure style="width:' + this.randomSsWidth + ';top:' + this.randomTop + '" id="' + this.shootingStarId + '" class="shooting-star"><img src="http://merexcursion.com/stars-and-clouds-bg/images/star-trans.png" alt="star"></figure>';
$(this).append(this.shootingStarHTML);
self.starRemove = setTimeout(function(){
$('#'+ self.shootingStarId).remove();
}, this.frequency + 2000);
};
self.starInterval = setInterval(function(){
self.shootStar();
}, this.frequency);
return this;
}
}(window,jQuery));
$(document).ready(function(){
$('#stars1').fill(100).parallax(.7);
$('#stars2').fill(200).parallax(.4);
$('#stars3').fill(150).parallax(.1).shootingStar(8000);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment