Introduction

I had been working on a new scroll menu to implement it on my website search page, and therefore used javascript multidimensional arrays...


Tags

Share

How to make a scroll menu with random star background in HTML?

Advertisement:


read_later

Read Later



read_later

Read Later

Introduction

I had been working on a new scroll menu to implement it on my website search page, and therefore used javascript multidimensional arrays...

Tags

Share





Advertisement

Advertisement




Introduction

I had been working on a new scroll menu to implement it on my website search page, and therefore used javascript multidimensional arrays that give me the opportunity to change menu list order and size without altering the source code. I thought that it would be cool and exhilarating to make the scroll menu background intricate and automatically changing, hence the random star background. After that, I decided to turn my work into a tutorial project to show it step-by-step.

For more information about the code files, please visit Source Code section below.

Random Star Background

I used body height and width as canvas height and width to utilize whole screen as much as possible. Nevertheless, you can adjust them in css files as whatever value you want.

project-image
Figure - 9.1

I created four different types of stars in different sizes to make it more space-like.

project-image
Figure - 9.2


project-image
Figure - 9.3

To randomize stars position, I used javascript Math.random() function and document.createElement("div").

project-image
Figure - 9.4

Please inspect the scroll menu to get more information by clicking Preview button above.

Scroll Menu

To create the disappearing effect in space, I decreased opacity values from 1.0 to 0.2 for making it look like getting further from the center point.

project-image
Figure - 9.5

I defined three class to assign content header, image and url ⚊ scroll-header, scroll-img and link.

project-image
Figure - 9.6

To switch among the data packets given by ScrollData, I programmed ScrollMenu() and ScrollPlus() functions in javascript.

project-image
Figure - 9.7

I assigned the data packets given by ScrollData, as multidimensional arrays, to the scroll menu divs defined in preview.html file.

project-image
Figure - 9.8

ScrollData variable includes all data packets as arrays consists of three variables ⚊ contentName, contentImg, contentUrl.

project-image
Figure - 9.9

Source Code

Please sign in to download source code files below as zip folder, including preview.html.

Zip Folder

Download


Random Star Background CSS

Download



.scroll-menu-div{position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:black;overflow:hidden;}
.star{position:absolute;width:4px;height:4px;background-color:white;border-radius:50%;}
.star-m{position:absolute;width:2px;height:2px;background-color:white;border-radius:50%;}
.star-s{position:absolute;width:1px;height:1px;background-color:white;border-radius:50%;}
.star-xs{position:absolute;width:0.5px;height:0.5px;background-color:white;border-radius:50%;}

Random Star Background JS

Download



//Enter height and width value.
var Height = window.innerHeight;
var Width = window.innerWidth;
//Define the number and specifications of star classes by entering new values.
function DefineStar(n, c, p, number){

 this.Name = n;
 this.className = c;
 this.positionName = p;
 this.NumbeR = number;
 
}
//When page loads, make a random star map on which stars(classes) occur.
function StarPosition(){
var Normal  = new DefineStar("star", "star", "position", 200);
var Medium  = new DefineStar("star_M", "star-m", "position_M", 400);
var Small  = new DefineStar("star_S", "star-s", "position_S", 500);
var XSmall  = new DefineStar("star_XS", "star-xs", "position_XS", 600);

  StarCreate(Normal.Name, Normal.className, Normal.positionName, Normal.NumbeR);
  StarCreate(Medium.Name, Medium.className, Medium.positionName, Medium.NumbeR);
  StarCreate(Small.Name, Small.className, Small.positionName, Small.NumbeR);
  StarCreate(XSmall.Name, XSmall.className, XSmall.positionName, XSmall.NumbeR);

}
//Get random values to locate each star to a specific point.
function Position(X, Y) {  
  var pX = Math.floor(Math.random() * X);
  var pY = Math.floor(Math.random() * Y);
  return [pX,pY];
}
//Create stars according to CSS stylesheet, and append them as child elements into scroll-menu.
function StarCreate(name, className, positionName, NumbeR){
 for(var i=0;i


Scroll Menu CSS

Download



button{outline:none;}
.menu-bar{position:relative;margin:auto;height:20%;width:80%;background-color:grey;z-index:5;overflow-y:hidden;}
.second{height:15%;width:70%;opacity:0.5;}
.third{height:10%;width:60%;opacity:0.2;}
.select{display:block;height:3em;width:3em;border-radius:50%;background-color:grey;border:2px solid grey;margin:auto;color:white;font-size:bold;cursor:pointer;}.select:hover{border-color:red;}
.scroll-img{position:releative;height:100%;width:20%;;background-color:grey;}
.Img{width:100%;height:100%;}
.scroll-header{position:absolute;top:-1em;left:20%;color:white;font-size:2em;font-weight:bold;}
.link:hover{text-decoration:none;}




Scroll Menu JS

Download



//Get document header, img and URL.
var Header = document.getElementsByClassName("scroll-header");
var Img = document.getElementsByClassName("Img");
var Link = document.getElementsByClassName("link");
//Initiate counting by defining Index.
var Index = 0;
//Switch the data packets given by ScrollData.
function ScrollPlus(n){
ScrollMenu(Index += n);
}
//Write the data packets to the scroll menu.
function ScrollMenu(scroll){
//Get the data packets from ScrollData multidimensional array.	

//Define maximum and minimum limit.
if((scroll + 4) >= ScrollData.length){Index = 0;}if(scroll < 0){Index = 0;}
//Assign the data packets given by ScrollData to the scroll menu divs defined in preview.html file.
Header[0].innerHTML = ScrollData[Index][0];
Img[0].src = ScrollData[Index][1];
Link[0].href = ScrollData[Index][2];
/////////////////////
Header[1].innerHTML = ScrollData[Index + 1][0];
Img[1].src = ScrollData[Index + 1][1];
Link[1].href = ScrollData[Index + 1][2];
/////////////////////
Header[2].innerHTML = ScrollData[Index + 2][0];
Img[2].src = ScrollData[Index + 2][1];
Link[2].href = ScrollData[Index + 2][2];
/////////////////////
Header[3].innerHTML = ScrollData[Index + 3][0];
Img[3].src = ScrollData[Index + 3][1];
Link[3].href = ScrollData[Index + 3][2];
/////////////////////
Header[4].innerHTML = ScrollData[Index + 4][0];
Img[4].src = ScrollData[Index + 4][1];
Link[4].href = ScrollData[Index + 4][2];
}

Scroll Menu List JS

Download



//Create a list to show it in the scroll menu by using multidimensional arrays.
var ScrollData = [
//Enter values as contentName, contentImg, contentUrl.
["About", "/images/about.jpg", "/about"],
["Projects", "/images/projects.jpg", "/projects"],
["TheAmplituhedron.com", "/images/homepage-icon-j.jpg", "/"],
["Articles", "/images/articles.jpg", "/articles"],
["Tools", "/images/tools.jpg", "/tools"],
["Search", "/images/example-img.jpg", "/search"],
["Sign In", "/images/example-img.jpg", "/SignIn"],
["Sign Up", "/images/example-img.jpg", "/SignUp"],
["Mobile App", "/images/icon.png", "https://play.google.com/store/apps/details?id=appinventor.ai_KutluhanAktar.TheAmplituhedron"],
["Twitter", "/images/twitter.jpg", "https://twitter.com/ThAmplituhedron"],
//Loop(If it is necessary.)
["About", "/images/about.jpg", "/about"],
["Projects", "/images/projects.jpg", "/projects"],
["TheAmplituhedron.com", "/images/homepage-icon-j.jpg", "/"],
["Articles", "/images/articles.jpg", "/articles"],
["Tools", "/images/tools.jpg", "/tools"],
["Search", "/images/example-img.jpg", "/search"],
["Sign In", "/images/example-img.jpg", "/SignIn"],
["Sign Up", "/images/example-img.jpg", "/SignUp"],
["Mobile App", "/images/icon.png", "https://play.google.com/store/apps/details?id=appinventor.ai_KutluhanAktar.TheAmplituhedron"],
["Twitter", "/images/twitter.jpg", "https://twitter.com/ThAmplituhedron"]
//...
];



1 ) The Principles of Beautiful Web Design: Designing Great Web Sites is Not Rocket Science!