Fellowship of the Ring
How do I make an fellowship of the ring?
What is a fellowship of the ring? How do you make a fellowship of the ring? This script and codes were developed by Yang Li on 13 July 2022, Wednesday.
Fellowship of the Ring - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fellowship of the Ring</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="midEarth"> <div id="rivendell"> <p id="frodo">- Frodo & Sam</p> <p id="merry">- Merry & Pip</p> <p id="gandalf">- Gandalf the Grey</p> <p id="aragorn">- Aragorn</p> <p id="boromir">- Boromir</p> <p id="legolas">- Legolas & Gimli</p> </div> <div id="moria"></div> <div id="argonath"></div> <div id="orthanc"></div> <div id="fangorn"></div> <div id="marsh"></div>
</div>
<button>Start</button> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Fellowship of the Ring - Script Codes CSS Codes
#midEarth { width: 1025px; height: 770px; background-image: url("http://static.giantbomb.com/uploads/original/0/9566/404966-midearthmap.jpg"); position: relative;
}
p { color: white; margin: 0;
}
#rivendell { position: absolute; left: 500px; top: 250px
}
#moria { position: absolute; left: 510px; top: 330px
}
#argonath { position: absolute; left: 650px; top: 430px
}
#orthanc { position: absolute; left: 500px; top: 420px
}
#fangorn { position: absolute; left: 520px; top: 360px
}
#marsh { position: absolute; left: 700px; top: 420px
}
button { margin-left: 470px; font-size: 2em;
}
Fellowship of the Ring - Script Codes JS Codes
// All JS code in this project should be written by students - the starter code should only contain comments and function declarations begin(), broken().
// All the steps should be followed in this project one by one:
function begin() { // 1. Fellowship leaves Rivendell and arrive at Moria $("#moria").append($("#rivendell p")); // 2. Gandalf falls fighting the Balrog $("#gandalf").remove(); // 3. Fellowship passes the Argonath $("#argonath").append($("#moria p")); // 4. Boromir falls fighting Saruman's orcs $("#boromir").remove();
}
function broken() { // 5. Fellowship breaks - Merry and Pip are captured to Orthanc $("#orthanc").append($("#merry")); // 6. Aragorn & Legolas & Gimli go after Merry & Pip, going to Fangorn Forest $("#fangorn").append($("#aragorn")).append($("#legolas")); // 7. Gandalf is alive in Fangorn Forest and is now "the White" $("#fangorn").append("<p id='gandalf'>- Gandalf the White</p>"); // 8. Frodo and Sam go to the Dead Marshes $("#marsh").append($("#frodo")); // 9. They meet Gollum there $("#marsh").append("<p id='gollum'>- Gollum</p>");
}
// Queuing functions to run one after the other
// Interesting way to format functions in JS - relates to functional programming and JS callbacks
$("button").click(function(){ $( "#midEarth" ) .delay(3000) .queue(function( next ) { begin(); next(); } ) .delay(3000) .queue(function( next ) { broken(); next(); } )
})
Developer | Yang Li |
Username | aussieyang |
Uploaded | July 13, 2022 |
Rating | 3 |
Size | 2,639 Kb |
Views | 42,504 |
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!
Name | Size |
Fellowship of the Ring | 2,639 Kb |
Highlight Me Starter | 1,628 Kb |
Recreate Google | 1,853 Kb |
Hamburger Menu Starter | 1,682 Kb |
Progress Bar | 2,261 Kb |
Click Me, Name Me | 2,113 Kb |
Simple Hamburger Menu | 2,099 Kb |
Animated Clock | 1,743 Kb |
Responding Boxes Starter | 1,779 Kb |
Birthday Party Starter | 1,629 Kb |
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!
Name | Username | Size |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
Css or Czz.. | Judag | 4,111 Kb |
700 Synapses Per Second | Silentkrange | 2,138 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Box Shadow Effects | Retrofuturistic | 2,143 Kb |
Two column of responsive height | Fixie | 2,908 Kb |
Knob rotation | Alemesre | 2,122 Kb |
404 Page | Saransh | 2,666 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!