Matilda the Musical Site

Developer
Matt Cowley
Size
7,066 Kb
Views
145,728
  1. Matilda the Musical Site Previews
  2. Matilda the Musical Site HTML Codes
  3. Matilda the Musical Site CSS Codes
  4. Matilda the Musical Site JS Codes

How do I make an matilda the musical site?

A site created for Matilda the Musical.Update: Music seems to be broken, I'm unsure why, but don't have time to fix.. What is a matilda the musical site? How do you make a matilda the musical site? This script and codes were developed by Matt Cowley on 12 June 2022, Sunday.

Matilda the Musical Site Previews
IQ Test

Matilda the Musical Site - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Matilda the Musical Site</title> <link rel="shortcut icon" href="http://uk.matildathemusical.com/content/uploads/2015/05/fav.png"> <!-- Current UK Matilda Favicon (25/4/16) --> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Copyright Matt Cowley 2016 -->
<!-- Landing Section -->
<section id="matilda-landing">
<!-- Flying Letters -->
<canvas id="letters"></canvas>
<!-- Main Title -->
<div class="title siteLink"> <h3>Roald Dahl's</h3> <h1>Mat<span>i</span>lda</h1> <h2>the Musical</h2>
</div>
<!-- Tag -->
<h4 class="siteLink">Genius</h4>
<!-- Matilda Img -->
<img class="matilda siteLink" src="http://uk.matildathemusical.com/content/themes/matilda-2015/build/images/tabs/01-mat.png" />
<!-- RSC Img -->
<img class="rsc" src="https://cdn2.rsc.org.uk/sitefinity/images/rsc/rsc_logo.tmb-logo-200.png?v=2" />
<!-- Playlist (Hidden) -->
<iframe id="sc-widget" src="https://w.soundcloud.com/player/?url=//api.soundcloud.com/playlists/3313487"></iframe>
</section>
<!-- Main Section -->
<section id="matilda-main"> <a class="country" href="http://uk.matildathemusical.com/"> <h1>United Kingdom</h1> <h2>Matilda</h2> <h3>Performing at: <span>Cambridge Theatre</span></h3> </a> <a class="country" href="http://us.matildathemusical.com/"> <h1>United States</h1> <h2>Matilda</h2> <h3>Performing at: <span>Shubert Theatre</span></h3> </a> <a class="country" href="http://au.matildathemusical.com/"> <h1>Australia</h1> <h2>Matilda</h2> <h3>Performing at: <span>Princess Theatre</span></h3> </a> <a class="country" href="http://www.mirvish.com/matilda/"> <h1>Canada</h1> <h2>Matilda</h2> <h3>Performing at: <span>Ed Mirvish Theatre</span></h3> </a>
</section> <script src='http://w.soundcloud.com/player/api.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Matilda the Musical Site - Script Codes CSS Codes

/* Copyright Matt Cowley 2016 */
@import url(//fonts.googleapis.com/css?family=PT+Sans+Narrow|Gochi+Hand|Lora:700|Poiret+One|Pacifico);
* { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
html,
body { max-height: 100vH; min-height: 100vH; height: 100vH; margin: 0; overflow: hidden; background: #031125;
}
section { position: absolute; top: 0; left: 0; min-height: 100vH; height: 100vH; min-width: 100vW; max-width: 100vW; width: 100vW; margin: 0; overflow: hidden;
}
body { margin: 0; padding: 0;
}
#matilda-landing #letters { position: absolute; width: 100%; height: 100%;
}
#matilda-landing .title { position: absolute; top: 25%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; padding: 5vW;
}
#matilda-landing .title h1 { font-size: 12vW; margin: 0; color: #eef6fe; font-family: 'Lora', serif; font-weight: 700; text-shadow: 0 1px 0px rgba(17, 142, 226, 0.8), 1px 0 0px rgba(125, 211, 247, 0.8), 1px 2px 1px rgba(17, 142, 226, 0.8), 2px 1px 1px rgba(125, 211, 247, 0.8), 2px 3px 2px rgba(17, 142, 226, 0.8), 3px 2px 2px rgba(125, 211, 247, 0.8), 3px 4px 2px rgba(17, 142, 226, 0.8), 4px 3px 3px rgba(125, 211, 247, 0.8), 4px 5px 3px rgba(17, 142, 226, 0.8), 5px 4px 2px rgba(125, 211, 247, 0.8), 5px 6px 2px rgba(17, 142, 226, 0.8), 6px 5px 2px rgba(125, 211, 247, 0.8), 6px 7px 1px rgba(17, 142, 226, 0.8), 7px 6px 1px rgba(125, 211, 247, 0.8), 7px 8px 0px rgba(17, 142, 226, 0.8), 8px 7px 0px rgba(125, 211, 247, 0.8);
}
#matilda-landing .title h1 span { font-family: 'Pacifico', cursive; padding-right: 2vW; padding-left: 0.5vW; font-size: 11.5vW;
}
#matilda-landing .title h2 { font-size: 3vW; color: #7dd3f7; margin: -4.5vW 0 0 0; font-family: 'PT Sans Narrow', sans-serif; font-weight: 400; text-transform: uppercase;
}
#matilda-landing .title h3 { font-size: 1.5vW; color: rgba(125, 211, 247, 0.9); /* U R D L */ margin: 0 0 -7.5vW -8.5vW; font-family: 'Gochi Hand', cursive; font-weight: 400; text-transform: uppercase;
}
#matilda-landing h4 { font-size: 10vW; color: #fff; margin: 0; font-family: 'Poiret One', cursive; font-weight: 400; text-transform: uppercase; text-shadow: 2px 2px 10px #5dabcd; position: absolute; bottom: 10%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; z-index: 50;
}
#matilda-landing img.matilda { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); text-align: center; height: 50vH; z-index: 10;
}
#matilda-landing img.rsc { position: absolute; top: 0; left: 0; width: 10vW; z-index: 10;
}
#matilda-landing iframe { display: none;
}
#matilda-landing .siteLink { cursor: pointer;
}
#matilda-landing .siteLink:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.3em; background: -webkit-radial-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 65%); background: radial-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 65%); -webkit-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; opacity: 0; z-index: -1;
}
#matilda-landing .siteLink:hover:after { opacity: 1;
}
#matilda-main .country { display: block; width: 45vW; height: 45vH; margin-top: 2.5vH; margin-bottom: 2.5vH; margin-left: 2.5vW; margin-right: 2.5vW; float: left; text-align: center; background: rgba(8, 51, 108, 0.75); box-shadow: 0px 0px 2vW #fff; text-decoration: none; border-radius: 0.5vW; -webkit-transition: all 0.2s; transition: all 0.2s;
}
#matilda-main .country:hover { background: #08336c; box-shadow: 0px 0px 3vW #fff;
}
#matilda-main .country h1 { background: -webkit-linear-gradient(315deg, #59a5dc 0%, #0075c9 100%); background: linear-gradient(135deg, #59a5dc 0%, #0075c9 100%); border-top-left-radius: 0.5vW; border-top-right-radius: 0.5vW; padding: 18px 20px; width: calc(100% - 40px); margin: 0; color: #FFF; text-transform: uppercase; font-family: 'PT Sans Narrow', sans-serif; font-weight: 700; text-align: left; font-size: 2vW;
}
#matilda-main .country h1:after { content: ""; display: inline-block; width: calc(4vW + 18px); height: calc(4vW + 18px); background: url("http://uk.matildathemusical.com/content/uploads/2012/12/posemap-icon.png"); background-size: contain; background-repeat: no-repeat; background-position: center center; float: right;
}
#matilda-main .country h2 { font-size: 3vW; margin: 10px; color: #eef6fe; font-family: 'Lora', serif; font-weight: 700; text-shadow: 0 1px 0px rgba(17, 142, 226, 0.8), 1px 0 0px rgba(125, 211, 247, 0.8), 1px 2px 1px rgba(17, 142, 226, 0.8), 2px 1px 1px rgba(125, 211, 247, 0.8), 2px 3px 2px rgba(17, 142, 226, 0.8), 3px 2px 2px rgba(125, 211, 247, 0.8), 3px 4px 2px rgba(17, 142, 226, 0.8), 4px 3px 3px rgba(125, 211, 247, 0.8), 4px 5px 3px rgba(17, 142, 226, 0.8), 5px 4px 2px rgba(125, 211, 247, 0.8), 5px 6px 2px rgba(17, 142, 226, 0.8), 6px 5px 2px rgba(125, 211, 247, 0.8), 6px 7px 1px rgba(17, 142, 226, 0.8), 7px 6px 1px rgba(125, 211, 247, 0.8), 7px 8px 0px rgba(17, 142, 226, 0.8), 8px 7px 0px rgba(125, 211, 247, 0.8);
}
#matilda-main .country h3 { margin: 0; color: #FFF; font-family: 'PT Sans Narrow', sans-serif; font-weight: 400; font-size: 1.5vW; display: block;
}
#matilda-main .country h3 span { text-transform: uppercase; display: block;
}

Matilda the Musical Site - Script Codes JS Codes

/* Copyright Matt Cowley 2016 */
/* This is really badly written, but it works, make it cleaner and smaller if you do desire */
/* Setup */
var landingElm = $("#matilda-landing");
landingElm.show();
var mainElm = $("#matilda-main");
mainElm.hide();
/* Audio */
var widget = SC.Widget(document.getElementById('sc-widget'));
widget.bind(SC.Widget.Events.READY, function() { widget.bind(SC.Widget.Events.PLAY, function() { widget.getCurrentSound(function(currentSound) { console.log('Song Playing: ' + currentSound['title'] + ' from ' + currentSound['description']); }); widget.getVolume(function(volume) { console.log('Volume At: ' + volume); }); }); widget.play(); widget.setVolume(50 / 100);
});
/* Landing Animation */
function startAll() { var canvas = document.getElementById("letters"); var ctx = canvas.getContext("2d"); var grd, keys_down = [], letters = []; var symbols = [{ k: 81, s: "q", x: 5 }, { k: 87, s: "w", x: 15 }, { k: 69, s: "e", x: 25 }, { k: 82, s: "r", x: 35 }, { k: 84, s: "t", x: 45 }, { k: 89, s: "y", x: 55 }, { k: 85, s: "u", x: 65 }, { k: 73, s: "i", x: 75 }, { k: 79, s: "o", x: 85 }, { k: 80, s: "p", x: 95 }, { k: 65, s: "a", x: 10 }, { k: 83, s: "s", x: 20 }, { k: 68, s: "d", x: 30 }, { k: 70, s: "f", x: 40 }, { k: 71, s: "g", x: 50 }, { k: 72, s: "h", x: 60 }, { k: 74, s: "j", x: 70 }, { k: 75, s: "k", x: 80 }, { k: 76, s: "l", x: 90 }, { k: 90, s: "z", x: 20 }, { k: 88, s: "x", x: 30 }, { k: 67, s: "c", x: 40 }, { k: 86, s: "v", x: 50 }, { k: 66, s: "b", x: 60 }, { k: 78, s: "n", x: 70 }, { k: 77, s: "m", x: 80 }, { k: 48, s: "0", x: 90 }, { k: 49, s: "1", x: 0 }, { k: 50, s: "2", x: 10 }, { k: 51, s: "3", x: 20 }, { k: 52, s: "4", x: 30 }, { k: 53, s: "5", x: 40 }, { k: 54, s: "6", x: 50 }, { k: 55, s: "7", x: 60 }, { k: 56, s: "8", x: 70 }, { k: 57, s: "9", x: 80 }]; function Letter(key) { this.x = findX(key); this.symbol = findS(key); this.color = "rgba(255, 255, 255, " + Math.random() + ")"; this.size = Math.floor((Math.random() * 40) + 12); this.path = getRandomPath(this.x); this.rotate = Math.floor((Math.random() * Math.PI) + 1); this.percent = 0; } Letter.prototype.draw = function() { var percent = this.percent / 100; var xy = getQuadraticBezierXYatPercent(this.path[0], this.path[1], this.path[2], percent); ctx.save(); ctx.translate(xy.x, xy.y); ctx.rotate(this.rotate); ctx.font = this.size + "px Arial"; ctx.fillStyle = this.color; ctx.fillText(this.symbol, -15, -15); ctx.restore(); }; Letter.prototype.drawPath = function() { ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(this.path[0].x, this.path[0].y); ctx.quadraticCurveTo(this.path[1].x, this.path[1].y, this.path[2].x, this.path[2].y); ctx.stroke(); } function findX(key) { for (var i = 0; i < symbols.length; i++) { if (symbols[i].k == key) { return (symbols[i].x * canvas.width / 100); } }; return false; } function findS(key) { for (var i = 0; i < symbols.length; i++) { if (symbols[i].k == key) { return symbols[i].s; } }; return false; } function getRandomPath(x) { var x_start = x; var x_end = x_start + Math.floor((Math.random() * 400) - 199); var limitHeight = (canvas.height / 4) * 2.5; return [{ x: x_start, y: canvas.height }, { x: (x_start + x_end) / 2, y: Math.floor((Math.random() * limitHeight) - limitHeight) }, { x: x_end, y: canvas.height }]; } function drawBackground() { ctx.fillStyle = grd; ctx.fillRect(0, 0, canvas.width, canvas.height); } function getQuadraticBezierXYatPercent(startPt, controlPt, endPt, percent) { var x = Math.pow(1 - percent, 2) * startPt.x + 2 * (1 - percent) * percent * controlPt.x + Math.pow(percent, 2) * endPt.x; var y = Math.pow(1 - percent, 2) * startPt.y + 2 * (1 - percent) * percent * controlPt.y + Math.pow(percent, 2) * endPt.y; return ({ x: x, y: y }); } function resize() { var box = canvas.getBoundingClientRect(); canvas.width = box.width; canvas.height = box.height; grd = ctx.createRadialGradient( canvas.width / 2, canvas.height, 0, canvas.width / 2, canvas.height / 2, canvas.height ); grd.addColorStop( 0.00, "#D4E5FC" ); grd.addColorStop( 0.20, "#D4E5FC" ); grd.addColorStop( 0.40, "#1D77EF" ); grd.addColorStop( 0.70, "#041D3C" ); grd.addColorStop( 1.00, "#031125" ); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBackground(); for (var i = 0; i < letters.length; i++) { letters[i].percent += 1; letters[i].draw(); // letters[i].drawPath(); if (letters[i].percent > 100) { letters.splice(i, 1); } }; for (var i = 0; i < keys_down.length; i++) { if (keys_down[i]) { letters.push(new Letter(i)); } }; requestAnimationFrame(draw); } var start_keys = [81, 87, 69, 82, 84, 89, 85, 73, 79, 80]; function startAnimation() { setTimeout(function() { var key = start_keys.pop(); keys_down[key] = true; setTimeout(function() { keys_down[key] = false; }, 180); if (start_keys.length > 0) { startAnimation(); } }, 180); } resize(); draw(); startAnimation(); window.onresize = resize; window.requestAnimationFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })();
}
startAll();
setInterval(function() { startAll();
}, 4500);
var sitelinks = $(".siteLink");
for (var i = 0; i < sitelinks.length; i++) { var sitelink = sitelinks[i]; sitelink.onclick = function() { gotoSite() }
}
function gotoSite() { landingElm.fadeOut(); mainElm.fadeIn(); (function volLoop(i) { setTimeout(function() { console.log("Vol: " + i / 100); widget.setVolume(i / 100); if (i == 0) widget.pause(); if (--i >= 0) volLoop(i); }, 50) })(50);
}
Matilda the Musical Site - Script Codes
Matilda the Musical Site - Script Codes
Home Page Home
Developer Matt Cowley
Username MattCowley
Uploaded June 12, 2022
Rating 3
Size 7,066 Kb
Views 145,728
Do you need developer help for Matilda the Musical Site?

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!

Matt Cowley (MattCowley) Script Codes
Name
Sign
Unreal Designs Server Default Page
UD System - Domain Not Found
UD System - Site Not Ready
IT GCSE Testbed
NerdSports Landing Page
Personal Site v2000000
Windows 10 Install
Flash Player Install Update
Simple Landing Page
Create amazing blog posts with AI!

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!