Skip to content

Commit

Permalink
Hide particles when user prefers reduced motion (#16)
Browse files Browse the repository at this point in the history
Just a thought based on #15. 

What if rather than fully remove the particles, we just hide the
particles if the user prefers reduced motion.

I don't have a personal preference regarding the floaty particles. But I
know some people strongly dislike them, and I can see a very valid
accessibility argument.
This is just 'one way' to meet people in the middle, and provide a way
to get rid of the particles.

### Description of Change
a sprinkle of javascript added to the default page template. 
- Determine if user prefers reduced motion. 
- Toggle the particles based on preference. 


#### A Preview
![Screen Recording 2023-09-28 at 10 10 46
PM](https://github.com/rubycentral/rubycentral-theme/assets/71521423/44e72196-4411-42fe-8da4-e079e3ed9c1c)
  • Loading branch information
codyjamesbrooks authored Sep 29, 2023
1 parent 7c57eb9 commit 716a425
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 0 deletions.
14 changes: 14 additions & 0 deletions assets/particles/hideParticles.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
const reducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');

function displayParticlesBasedOnMotionPreferences() {
if (reducedMotionMediaQuery.matches) {
particles.style.display = "none";
} else {
particles.style.display = "block";
}
}

displayParticlesBasedOnMotionPreferences(); // run on page ready
reducedMotionMediaQuery.addEventListener( // run on change
'change', displayParticlesBasedOnMotionPreferences
);
1 change: 1 addition & 0 deletions default.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
</script>
<div id="particles" style="position: fixed; top: 0; z-index: -10"></div>
<script src="{{ asset "particles/hadron.d57b1908.js"}}"></script>
<script src="{{ asset "particles/hideParticles.js" }}"></script>
{{!-- Outputs important scripts - should always be included before closing body tag --}}
{{ghost_foot}}
</body>
Expand Down

0 comments on commit 716a425

Please sign in to comment.