Skip to content

Commit 157b64d

Browse files
mborgersonmborgerson
committed
Implement an Xbox dashboard style jumbotron anim
1 parent 4792370 commit 157b64d

File tree

8 files changed

+256
-42
lines changed

8 files changed

+256
-42
lines changed

‎resources/gl_logo.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const int numParticles = 35;
4040
const int numSpotlights = 5;
4141
const vec2 texSize = vec2(128.0,128.0);
4242
const vec4 bgColor = vec4(0.);
43-
const vec4 fgColor = vec4(0.259, 0.890, 0.208, 1.);
43+
const vec4 fgColor = vec4(0.384, 0.792, 0.075, 1.);
4444
const vec4 particleColor = fgColor;
4545
const vec4 textPos = vec4(0.01, 0, 0.98, 0.125);
4646
@@ -321,6 +321,8 @@ function render(ts) {
321321
requestAnimationFrame(render);
322322
return;
323323
}
324+
if (!(gl = getRenderingContext()))
325+
return;
324326
if (pending_disable_fallback) {
325327
document.getElementById("logo-canvas").style.visibility = "visible";
326328
document.getElementById("logo-fallback").style.visibility = "hidden";
@@ -339,7 +341,7 @@ function render(ts) {
339341
}
340342

341343
function getRenderingContext() {
342-
var canvas = document.querySelector("canvas");
344+
var canvas = document.querySelector("#logo-canvas");
343345
canvas.width = 512;
344346
canvas.height = 512;
345347
var gl = canvas.getContext("webgl");

‎resources/logo-green-jumbotron.svg‎

Lines changed: 83 additions & 0 deletions
Loading

‎resources/mesh_pattern.svg‎

Lines changed: 52 additions & 0 deletions
Loading

‎resources/three.min.js‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/xbox_logo.png‎

19.7 KB
Loading

‎templates/template_base.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<title>{%block title %}{% endblock %}{% if self.title() %} | {% endif %}xemu: Original Xbox Emulator</title>
2626
{% block append_head %}{% endblock %}
2727

28+
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
29+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
30+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
31+
2832
<!-- Global site tag (gtag.js) - Google Analytics -->
2933
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-163809672-1"></script>
3034
<script>
@@ -38,7 +42,7 @@
3842
</head>
3943
<body>
4044

41-
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
45+
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark navbar-transparent">
4246
<a class="navbar-brand" href="{{ main_url_base }}/"><img alt="xemu logo" src="/logo-green.svg" style="height: 1em"></a>
4347
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
4448
<span class="navbar-toggler-icon"></span>
@@ -77,10 +81,6 @@
7781
</div>
7882
</main>
7983

80-
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
81-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
82-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
83-
8484
{% block append_foot %}{% endblock %}
8585
</body>
8686
</html>

‎templates/template_index.html‎

Lines changed: 94 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
margin-right: 0.75em;
6868
}
6969

70-
canvas {
70+
#logo-canvas {
7171
display: block;
7272
visibility: hidden;
7373
width: 256px;
@@ -78,22 +78,44 @@
7878
padding: 0;
7979
border: none;
8080
}
81+
82+
#bg-scene {
83+
height: 100%;
84+
width: 100%;
85+
position: absolute;
86+
left: 0;
87+
top: 0;
88+
}
89+
90+
.jumbotron {
91+
position: relative;
92+
}
93+
94+
@media only screen and (min-width: 768px)
95+
{
96+
.navbar-transparent
97+
{
98+
background-color: transparent !important;
99+
transition: background-color 200ms linear;
100+
}
101+
}
81102
</style>
82103
{% endblock %}
83104

84105
{% block jumbotron %}
85-
<div class="jumbotron">
106+
<div class="jumbotron d-flex align-items-center min-vh-100">
107+
<div id="bg-scene"></div>
86108
<div class="container">
87109
<div class="row mt-5">
88-
<div class="col-md-6 mt-4 text-center">
110+
<div class="col-md-6 mt-4 pb-5 pb-md-0 text-center">
89111
<img src="xbox_logo.png" class="img-fluid" width=450 />
90112
</div>
91113
<div class="col-md-6">
92114
<h1 class="display-3">
93115
<canvas id="logo-canvas" class="gl-logo"></canvas>
94-
<img id="logo-fallback" alt="xemu logo" src="/logo-green.svg" style="height: 1.03em;">
116+
<img id="logo-fallback" alt="xemu logo" src="/logo-green-jumbotron.svg" style="height: 1.03em;">
95117
</h1>
96-
<h4 class="card-subtitle mb-2 text-muted">Original Xbox Emulator</h4>
118+
<h4 class="card-subtitle mb-2">Original Xbox Emulator</h4>
97119
<p>
98120
A free and open-source application that emulates the original Microsoft
99121
Xbox game console, enabling people to play their original Xbox games on
@@ -103,21 +125,21 @@ <h4 class="card-subtitle mb-2 text-muted">Original Xbox Emulator</h4>
103125
<div class="container pl-2 p-0">
104126
<div class="row">
105127
<div class="column text-center text-md-left p-2">
106-
<a class="btn btn-secondary btn-lg" role="button" id="download-gen" href="/docs/download">
128+
<a class="btn btn-green btn-lg" role="button" id="download-gen" href="/docs/download">
107129
<i class="fa fa-laptop button-icon" aria-hidden="true"></i>View Download Options
108130
</a>
109-
<a class="btn btn-secondary btn-lg" role="button" id="download-win" style="display: none" href="https://github.com/mborgerson/xemu/releases/latest/download/xemu-win-release.zip">
131+
<a class="btn btn-green btn-lg" role="button" id="download-win" style="display: none" href="https://github.com/mborgerson/xemu/releases/latest/download/xemu-win-release.zip">
110132
<i class="fab fa-windows button-icon" aria-hidden="true"></i>Download for Windows
111133
</a>
112-
<a class="btn btn-secondary btn-lg" role="button" id="download-mac" style="display: none" href="https://github.com/mborgerson/xemu/releases/latest/download/xemu-macos-universal-release.zip">
134+
<a class="btn btn-green btn-lg" role="button" id="download-mac" style="display: none" href="https://github.com/mborgerson/xemu/releases/latest/download/xemu-macos-universal-release.zip">
113135
<i class="fab fa-apple button-icon" aria-hidden="true"></i>Download for macOS
114136
</a>
115-
<a class="btn btn-secondary btn-lg" role="button" id="download-linux" style="display: none" href="/docs/download/#download-for-linux">
137+
<a class="btn btn-green btn-lg" role="button" id="download-linux" style="display: none" href="/docs/download/#download-for-linux">
116138
<i class="fab fa-linux button-icon" aria-hidden="true"></i>Download for Linux
117139
</a>
118140
</div>
119141
<div class="column p-2">
120-
<strong>Latest Release:</strong> v{{xemu_build_version}} ({{xemu_build_date.strftime('%b %-d, %Y')}})
142+
<strong>Latest release:</strong> v{{xemu_build_version}} ({{xemu_build_date.strftime('%b %-d, %Y')}})
121143
<br />
122144
<a href="/docs/download" id="download-options" style="display: none">Alternative download options</a>
123145
</div>
@@ -126,18 +148,12 @@ <h4 class="card-subtitle mb-2 text-muted">Original Xbox Emulator</h4>
126148

127149
</div>
128150
</div>
151+
129152
</div>
130-
<div class="scroll"></div>
131153
</div>
132154
{% endblock %}
133155

134156
{% block content %}
135-
<div class="embed-responsive embed-responsive-16by9">
136-
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/?list=PLec5KNGR_nILyzdbQ8OyFpceyrTRUBNNU&autoplay=1&mute=1&modestbranding=1&loop=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
137-
</div>
138-
139-
<hr>
140-
141157
<h2 class="mb-4 text-center">Features</h2>
142158
<div class="row">
143159
<div class="col-md-4">
@@ -166,6 +182,10 @@ <h4><i class="fas fa-expand-alt feature-icon"></i> Render Scaling</h4>
166182
</div>
167183
</div>
168184

185+
<hr>
186+
<div class="embed-responsive embed-responsive-16by9">
187+
<iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/?list=PLec5KNGR_nILyzdbQ8OyFpceyrTRUBNNU&autoplay=1&mute=1&modestbranding=1&loop=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
188+
</div>
169189
<hr>
170190

171191
<div class="" id="compatibility">
@@ -201,8 +221,6 @@ <h2 class="mb-4 text-center">Compatibility</h2>
201221
{% endblock %}
202222

203223
{% block append_foot %}
204-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js"></script>
205-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.plugins.min.js"></script>
206224
<script type="text/javascript">
207225
// Show platform-specific download button
208226
var platform = undefined;
@@ -219,7 +237,63 @@ <h2 class="mb-4 text-center">Compatibility</h2>
219237
$('#download-options').show();
220238
}
221239
</script>
240+
241+
<script type="text/javascript" src="three.min.js"></script>
242+
<script type="text/javascript">
243+
var canvas = document.querySelector('#bg-scene');
244+
var scene = new THREE.Scene();
245+
var camera = new THREE.PerspectiveCamera( 50, canvas.offsetWidth/canvas.offsetHeight, 0.1, 1000 );
246+
scene.fog = new THREE.Fog('black', 0.5, 2.75);
247+
scene.background = new THREE.Color('black');
248+
249+
var renderer = new THREE.WebGLRenderer();
250+
renderer.setSize( canvas.offsetWidth, canvas.offsetHeight );
251+
renderer.setPixelRatio( window.devicePixelRatio );
252+
canvas.appendChild( renderer.domElement );
253+
254+
const texture = new THREE.TextureLoader().load("mesh_pattern.svg");
255+
texture.wrapS = THREE.RepeatWrapping;
256+
texture.wrapT = THREE.RepeatWrapping;
257+
texture.repeat.set( 50, -25 );
258+
259+
const geometry = new THREE.SphereGeometry( 1, 50, 25 );
260+
var material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.BackSide } );
261+
var sphere = new THREE.Mesh( geometry, material );
262+
scene.add( sphere );
263+
camera.position.z = 1;
264+
265+
var clock = new THREE.Clock();
266+
var render = function () {
267+
requestAnimationFrame( render );
268+
var delta = clock.getDelta();
269+
sphere.rotation.y += 0.01 * delta;
270+
renderer.render(scene, camera);
271+
};
272+
render();
273+
window.addEventListener('resize', function(){
274+
camera.aspect = canvas.offsetWidth/canvas.offsetHeight;
275+
camera.updateProjectionMatrix();
276+
renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
277+
}, false);
278+
</script>
279+
<script type="text/javascript" src="gl_logo.js"></script>
280+
<script type="text/javascript">
281+
function updateNavbarTransparency() {
282+
var nav = $(".navbar");
283+
var t = $(document).scrollTop() < ($(".jumbotron")[0].offsetHeight-nav.height());
284+
nav.toggleClass('navbar-transparent', t);
285+
}
286+
$(document).scroll(updateNavbarTransparency);
287+
$(function () {
288+
$(".navbar-toggle").click(updateNavbarTransparency);
289+
});
290+
updateNavbarTransparency();
291+
</script>
292+
222293
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
294+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.min.js"></script>
295+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.10/jquery.lazy.plugins.min.js"></script>
296+
223297
<script type="text/javascript">
224298
// Lazy-load images
225299
var lazyInstance = $('img.lazy').Lazy({
@@ -383,5 +457,5 @@ <h2 class="mb-4 text-center">Compatibility</h2>
383457
var chart = new ApexCharts(document.querySelector("#title_stats"), options);
384458
chart.render();
385459
</script>
386-
<script type="text/javascript" src="gl_logo.js"></script>
460+
387461
{% endblock %}

0 commit comments

Comments
 (0)