<div class="container">
<div class="logo">STARRY<br>NIGHT</div>
<div class="right" data-animation="to-bottom">
<a data-text="ABOUT US" href="#" style="transition-delay: 250ms;">BOOKS</a>
<a data-text="EQUIPMENT" href="#" style="transition-delay: 500ms;">MOVIES</a>
<a data-text="TOURS" href="#" style="transition-delay: 750ms;">VIDEO GAMES</a>
<a data-text="CONTACT" href="#" style="transition-delay: 1000ms;">CONTACT</a>
<div id="snow"></div>
<div id="snow2"></div>
<div id="snow3"></div>
</div>
<div id="menuBtn">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
<div id="moon">
<ul>
<li>
<li>
<li>
<li>
<li>
</ul>
</div>
<div class="bat-cont">
<div class="bat">
<div class="wing-left"></div>
<div class="wing-right"></div>
<div class="head">
<div class="ears"></div>
<div class="eyes"></div>
<div class="mouth"></div>
</div>
</div>
</div>
<div class="bat-cont bat2">
<div class="bat">
<div class="wing-left"></div>
<div class="wing-right"></div>
<div class="head">
<div class="ears"></div>
<div class="eyes"></div>
<div class="mouth"></div>
</div>
</div>
</div>
</div>
//******************************************************
// Like it if you like it :) Thank you
// Best viewed in fullscreen
// https://codepen.io/nocni_sovac/full/qBZNZBz
//******************************************************
* {
padding:0;
margin:0;
}
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Skranji:wght@700&display=swap');
body{
background: #3d3d3d;
font-family: 'Mountains of Christmas', cursive;
overflow: hidden;
}
.container {
display: flex;
flex-direction: row;
overflow: hidden;
justify-content: center;
align-items: center;
.bat-cont {
position: absolute;
left: 58px;
top: 99px;
transition: all 1.5s linear;
.bat {
animation: bat 1.5s infinite, bat-updown .4s infinite, bat-forthback 10s infinite;
position: absolute;
top: 35px;
@-webkit-keyframes bat {
0% {
transform: rotate(-7deg);
}
50% {
transform: rotate(7deg);
}
100%{
transform: rotate(-7deg);
}
}
@-webkit-keyframes bat-updown {
0% {
top:-35;
}
50% {
top:0;
}
100%{
top:35;
}
}
@-webkit-keyframes bat-forthback {
0% {
transform:scale(1);
}
20% {
transform:scale(1.2);
}
40% {
transform:scale(2);
}
60% {
transform:scale(0.5);
}
80% {
transform:scale(0.9);
}
100% {
transform:scale(1);
}
}
.wing-left {
width: 0;
height: 0;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
border-left: 44px solid black;
position: absolute;
top: 27px;
left: -28px;
animation: wing1 .3s infinite;
}
@-webkit-keyframes wing1 {
0% {
transform: rotate(7deg);
}
50% {
transform: rotate(-7deg);
}
100%{
transform: rotate(7deg);
}
}
.wing-right {
width: 0;
height: 0;
border-top: 24px solid transparent;
border-bottom: 24px solid transparent;
border-right: 44px solid black;
position: absolute;
top: 27px;
left: 26px;
animation: wing2 .3s infinite;
}
@-webkit-keyframes wing2 {
0% {
transform: rotate(-7deg);
}
50% {
transform: rotate(7deg);
}
100%{
transform: rotate(-7deg);
}
}
.head {
height: 96px;
width: 44px;
background: radial-gradient(circle, rgba(23,23,33,1) 0%, rgba(20,20,23,1) 35%, rgba(0,0,0,1) 100%);
/* border-radius: 42px 64px 68px 46px; */
-moz-transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
border-radius: 50%;
position: relative;
.ears {
&::before {
content: '';
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 14px solid transparent;
border-bottom: 37px solid black;
position: absolute;
top: -11px;
transform: rotate(-14deg);
}
&::after {
content: '';
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 7px solid transparent;
border-bottom: 36px solid black;
position: absolute;
top: -20px;
left: 28px;
transform: rotate(10deg);
}
}
.eyes {
height: 16px;
width: 7px;
background: silver;
border-radius: 100%;
position: absolute;
top: 28px;
position: absolute;
left: 10px;
&::after {
content:'';
height: 16px;
width: 7px;
background: silver;
border-radius: 100%;
position: absolute;
top: 1px;
position: absolute;
left: 13px;
}
}
.mouth {
width: 18px;
height: 4px;
background: silver;
top: 67px;
position: absolute;
left: 13px;
border-radius: 100%;
&::before {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 16px solid silver;
position: absolute;
}
&::after {
content: '';
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 16px solid silver;
position: absolute;
left: 12px;
}
}
}
}
&.bat2{
top: 258px !important;
right: 59px !important;
position: absolute;
}
}
.logo {
position: absolute;
top: 14px;
left: 30px;
text-align: center;
font-family: 'Poppins', sans-serif;
font-size: 30px;
line-height: 21px;
z-index: 99;
color: white;
font-family: 'Mountains of Christmas', cursive;
&::after {
content: "Gift Shop";
position: absolute;
font-family: initial;
font-size: 17px;
width: 100%;
bottom: -26px;
left: 1px;
}
}
#menuBtn {
position: absolute;
top:15px;
right:25px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
z-index: 99;
height: auto;
input {
display: block;
cursor: pointer;
position: absolute;
height: 100%;
width: 100%;
opacity:0;
z-index:9;
&:checked ~ span {
&:nth-child(2){
opacity:0;
transform: scale(0)
}
&:nth-child(3){
transform: rotate(45deg)
}
&:nth-child(4){
display: block;
transform: rotate(135deg);
opacity:1;
margin-top: -3px;
}
&:nth-child(5){
opacity:0;
transform: scale(0)
}
}
}
span {
width:35px;
height:3px;
background: white;
position:relative;
display:block;
margin: 4px 0;
border-radius: 2px;
transition: all .2s linear;
&:nth-child(3) {
width:25px;
margin-bottom: auto;
}
&:nth-child(4) {
width:25px;
opacity:0;
margin:0;
}
}
}
.right {
height: 100vh;
width:100vw;
position: relative;
transition: all .4s linear;
// transform: translateY(-100vh);
opacity: 0;
background: RGBA(0,0,0,1);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 9;
a {
text-decoration: none;
display:block;
font-weight: 900;
font-size: 70px;
color: white;
-webkit-text-stroke: 2px white;
text-stroke: 2px white;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
position: relative;
transition: all .5s linear;
opacity:0;
@media only screen and (max-width: 768px) {
font-size: 40px;
}
&:hover {
opacity:1;
animation: shake 0.5s;
}
@keyframes shake {
0%{
transform: scale(0.8) translate3d(0,0,0);
}
50%{
transform: scale(1.1);
}
80%{
transform: scale(0.89);
}
100%{
transform: scale(1) translate3d(0,0,0);
}
}
}
@function multiple-box-shadow ($n) {
$value: '#{random(2000)}px #{random(4000)}px #FFFAFA';
@for $i from 2 through $n{
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFFAFA';
}
@return unquote($value)
}
$shadows-small: multiple-box-shadow(700);
$shadows-medium: multiple-box-shadow(400);
$shadows-big: multiple-box-shadow(200);
#snow {
width: 2px;
height: 2px;
background: transparent;
box-shadow: $shadows-small;
animation : animStar linear infinite;
animation-duration: 20s;
border-radius:100%;
position: absolute;
left:0;
&:after {
content: " ";
position: absolute;
top: -2000px;
width: 2px;
height: 2px;
background: transparent;
box-shadow: $shadows-small;
border-radius:100%;
}
}
#snow2 {
width: 4px;
height: 4px;
background: transparent;
box-shadow: $shadows-medium;
animation : animStar linear infinite;
animation-duration: 20s;
border-radius:100%;
position: absolute;
left:0;
&:after {
content: " ";
position: absolute;
top: 2000px;
width: 4px;
height: 4px;
background: transparent;
box-shadow: $shadows-medium;
border-radius:100%;
}
}
#snow3{
width: 6px;
height: 6px;
background: transparent;
box-shadow: $shadows-big;
animation: animStar linear infinite;
animation-duration: 20s;
border-radius:100%;
position: absolute;
left:0;
&:after{
content: " ";
position: absolute;
top: -2000px;
width: 6px;
height: 6px;
background: transparent;
box-shadow: $shadows-big;
border-radius:100%;
}
}
@keyframes animStar {
from {
transform: translateY(0px);
}
to {
transform: translateY(2000px);
}
}
}
#moon {
height: 105px;
width: 105px;
background-color: #eee;
border-radius: 139px 131px 141px 131px;
top: 30%;
left: 50%;
transform: translateX(-50%) scale(2.1);
box-shadow: inset 0px 0px 0px 0px rgba(54, 50, 50, 0.75), 0px 0px 56px rgba(255, 255, 255, 0.75);
position: absolute;
display: inline-block;
li{
position: absolute;
list-style: none;
background: #B9DAD7;
border-radius: 50%;
}
li:nth-child(1) {
top:1.15em;
left:1.25em;
height:.75em;
width:.75em;
}
li:nth-child(2) {
top:1.05em;
left:3.5em;
height:1.25em;
width:1.25em;
}
li:nth-child(3) {
top:2.95em;
left:1.1em;
height:1.75em;
width:1.75em;
}
li:nth-child(4) {
top:3em;
left:3.25em;
height:.5em;
width:.5em;
}
}
.main-cont {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
bottom: 12%;
left: 50%;
transform: translateX(-50%);
}
// Stars
@function generateStart ($n) {
$value: '#{random(2000)}px #{random(2000)}px rgba(165,190,195,#{random(10)/10})';
@for $i from 0 through $n{
$value: '#{$value} , #{random(2000)}px #{random(2000)}px rgba(165,190,195,#{random(10)/10})';
}
@return unquote($value)
}
$shadows-small: generateStart(400);
$shadows-medium: generateStart(300);
$shadows-big: generateStart(200);
#stars {
width: 2px;
height: 2px;
box-shadow: $shadows-small;
background: transparent;
border-radius:100%;
animation: blink 5s infinite;
position: absolute;
left: 0;
top: 0;
}
#stars2 {
width: 3px;
height: 3px;
box-shadow: $shadows-medium;
background: transparent;
border-radius:100%;
animation: blink 10s infinite;
position: absolute;
left: 0;
top: 0;
}
#stars3 {
width: 4px;
height: 4px;
box-shadow: $shadows-big;
background: transparent;
border-radius:100%;
animation: blink 5s infinite;
position: absolute;
left: 0;
top: 0;
}
@keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0.2;
}
100% {
opacity: 1;
}
}
}
View Compiled
let btn = document.getElementById('menuBtn');
let left = document.querySelector('.left');
let right = document.querySelector('.right');
let links = document.querySelectorAll('.right a');
let bat1 = document.querySelector('.bat-cont');
let bat2 = document.querySelector('.bat2');
let flag = true;
btn.addEventListener("click", ()=>{
flag = !flag;
if(!flag){
right.style.opacity = "1";
for(let i = 0; i < links.length; i++){
links[i].style.opacity = "0.7";
}
} else {
right.style.opacity = "0";
for(let i = 0; i < links.length; i++){
links[i].style.opacity = "0";
}
}
})
let width = window.innerWidth < 768 ? 400 : 1800;
let h = setInterval(function () {
bat1.style.top = Math.floor((Math.random() * 800) + 1)+"px";
bat1.style.left = Math.floor((Math.random() * width) + 1)+"px";
bat2.style.top = Math.floor((Math.random() * 800) + 1)+"px";
bat2.style.left = Math.floor((Math.random() * width) + 1)+"px";
}, 1500)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.