Xargon/RetroDECK-Website
1
0
Fork 0
mirror of https://github.com/RetroDECK/RetroDECK-Website.git synced 2024-11-21 14:35:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

- Add reduce motion

Browse source 
- Randomize gradient motion
This commit is contained in:
Adam Iannazzone 2024-04-18 14:39:22 -04:00
parent 8972fbd3c9
commit bd943af564
4 changed files with 39 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/style.css
View file

@ -40,7 +40,7 @@ footer {
}
.my-gradient {
background: linear-gradient(45deg, #1a9fff, #946beb);
background: linear-gradient(0deg, #1a9fff, #946beb);
}
.jumbotron h1 {

10
features.html
View file

@ -223,11 +223,17 @@
<!-- Footer -->
<footer class="container-fluid p-2">
<div class="row text-center">
<div class="col">
<div class="row justify-content-betweetn">
<div class="col-md">
Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
Iannazzone</a> and the RetroDECK team.
</div>
<div class="col-md">
<div class="form-check form-switch float-end">
<input class="form-check-input" id="reduce-motion-switch" type="checkbox" role="switch" id="reduceMotionSwitch" onchange="reduceMotion()">
<label class="form-check-label" for="reduceMotionSwitch">Reduce motion</label>
</div>
</div>
</div>
</footer>
<!-- End Footer -->

10
index.html
View file

@ -182,11 +182,17 @@
<!-- Footer -->
<footer class="container-fluid p-2">
<div class="row text-center">
<div class="col">
<div class="row justify-content-betweetn">
<div class="col-md">
Created by <a target="_blank" rel="noopener noreferrer" href="https://github.com/jiannazzone">Adam
Iannazzone</a> and the RetroDECK team.
</div>
<div class="col-md">
<div class="form-check form-switch float-end">
<input class="form-check-input" id="reduce-motion-switch" type="checkbox" role="switch" id="reduceMotionSwitch" onchange="reduceMotion()">
<label class="form-check-label" for="reduceMotionSwitch">Reduce motion</label>
</div>
</div>
</div>
</footer>
<!-- End Footer -->

32
scripts/gradient.js
View file

@ -1,16 +1,28 @@
let gradientAngle = 45;
let gradientSpinElems = document.getElementsByClassName('gradient-spin');
const gradientInterval = setInterval(function() {
updateGradientAngle();
}, 50);
let gradientAngles = Array.from({ length: gradientSpinElems.length }, () => Math.floor(Math.random() * 361) + 1);
let gradientInterval;
reduceMotion();
function updateGradientAngle() {
gradientAngle += 1
if (gradientAngle > 360) {
gradientAngle = 0;
for (let i = 0; i < gradientSpinElems.length; i++) {
gradientAngles[i] += Math.floor(Math.random() * 5) - 5;
if (gradientAngles[i] > 360) {
gradientAngles[i] = 0;
}
gradientSpinElems[i].style.background = `linear-gradient(${gradientAngles[i]}deg, #1a9fff, #946beb)`;
}
for (let i=0; i<gradientSpinElems.length; i++) {
gradientSpinElems[i].style.background = `linear-gradient(${gradientAngle}deg, #1a9fff, #946beb)`;
}
function reduceMotion() {
let reduceMotionState = document.getElementById('reduce-motion-switch').checked;
console.log(reduceMotionState);
if (reduceMotionState) {
clearInterval(gradientInterval);
console.log('stopped');
} else {
gradientInterval = setInterval(function () {
updateGradientAngle();
}, 100);
}
}