I had been working on a new scroll menu to implement it on my website search page, and therefore used javascript multidimensional arrays...
Advertisement:
Read Later
I had been working on a new scroll menu to implement it on my website search page, and therefore used javascript multidimensional arrays...
Related Links :
Javascript ArraysI 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.
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.
I created four different types of stars in different sizes to make it more space-like.
To randomize stars position, I used javascript Math.random() function and document.createElement("div").
Please inspect the scroll menu to get more information by clicking Preview button above.
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.
I defined three class to assign content header, image and url ⚊ scroll-header, scroll-img and link.
To switch among the data packets given by ScrollData, I programmed ScrollMenu() and ScrollPlus() functions in javascript.
I assigned the data packets given by ScrollData, as multidimensional arrays, to the scroll menu divs defined in preview.html file.
ScrollData variable includes all data packets as arrays consists of three variables ⚊ contentName, contentImg, contentUrl.
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"]
//...
];