how to add a pause gif Button?

[EdgyRabbit]

So i LOVE GIFS, they are my favourite thing ever, so i have many gifs on the main page of my webpage..

You can see this by my sites home page

https://edgyrabbid.neocities.org/

Now i have seen other websites have a "pause gif" on their website to make it more acessible.. but i havent been able to find the code snippet.. anyone have it? Would be very appreciated!

[cult_status18]

ohh I could use help with that too! I have a big gif on the front of my page that needs to stay paused so that could help a lot espicaly since my website is not very friendly to epileptic people

I have a pop up rn that I need to fix since I have no idea how it works and it looks like garbage mabey you could tie the pause to a pop up like the prompt would be "Would you like to disable gifs" "yes or no" 

I said I would learn java script but Ive been so busy I will definitely fix it after that and if I figure out a way to pause gifs ill make sure to tell you

[EdgyRabbit]

Youre A LIFE SAVER!!

However, it wont work!! Could you maybe make a copyable version? So i dont have to re type the whole text? Since i make lot of typos... cuz i have dsyleixa...

[cult_status18]

Youre A LIFE SAVER!!

However, it wont work!! Could you maybe make a copyable version? So i dont have to re type the whole text? Since i make lot of typos... cuz i have dsyleixa...

please pay attention this does not pause any gifs it simply displays a pop up that you can display over your website

some of the users were disappointed in me for using the google AI overview to make this so mabey consider figuring out how it works and then edit it accordingly I need to myself Im just waiting until I make the right graphics and figure out how JavaScript works

oh and make sure that this line of code is in your head, and not just in the body

Code

<title>Pop-up Example</title>
    <style>
        #popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 1px solid black;
            z-index: 1000;
        }
    </style>

This one is the one that stays in the body Make sure your using the <script> tag

Code

  
        <script>
        <div id="popup" style="display: none;">
        <p>insert text here</p>
        <button onclick="closePopup()">Close</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var popup = document.getElementById('popup');
            popup.style.display = 'block';
        });

        function closePopup() {
            var popup = document.getElementById('popup');
            popup.style.display = 'none';
        }
    </script>

[xwindows]

Now i have seen other websites have a "pause gif" on their website to make it more acessible.. but i havent been able to find the code snippet.. anyone have it? Would be very appreciated!

I don't like gratuitous animations on web pages, so I configure my browser to not play any animated images in my browsing session, and design my sites without them; so I don't really have personal experience in this specific matter. I can only advice mainly in the "Let me DuckDuckGo it for you" style...

It seems that there is no browser API to "pause" the GIF/APNG/WebP animation; so any script which claim to "freeze" such animated image would have to do it by hacks. One common hack is creating HTML 5.0 canvas, programmatically draw that GIF image on it (which basically draw only the first frame), and replace the original `<img>` element with that canvas, like:

• Stop GIF animaton when user presses Esc.
• Extracted from above link: stop GIF animation unconditionally.
• Add video-like corner play/stop button on GIFs.
• Brief comparison between multiple JavaScript libraries/scripts to stop the GIF animations.

A completely different hack is preparing both animated and still-frame (GIF or otherwise) version of each image beforehand; then include one version in your HTML markup, and then using script to replace them with another version (and vice-versa) when user wished to burn all GIFs. (1) This is easier to write in JavaScript and can easily be made support retro browsers, but the downside is you have to prepare the still-frame version yourself and host them on the server.

If you would like to use this approach and don't know how, I can cook something up for you.

This is an example of people doing this approach (not the simplest way, but the same concept):

• Stopping a GIF with details/summary.

Some also did it with CSS rather than JavaScript:

• CSS-only "click to animate gif" solution, mainly for toggling individual image
  
  • This link also mentions `prefers-reduced-motion` CSS media query which can alternatively be used for applying this wholesale, according to user's browser settings too.

There is also other even more bizarre hack, like loading and parsing GIF in JavaScript, then play that on HTML 5.0 canvas; which allows for actual pausing (rather than stopping at first frame), frame-stepping, fast-forward and rewind. I do not recommend this overkill approach though (especially on pages with a lot of GIFs), as it is memory and computing intensive...

• jsGIF bookmarklet which replaces existing GIF with JavaScript-played one (seems wonky)
• GIF-player which uses custom tag and JavaScript to play GIF
• <x-gif> which advertised itself as "The GIF tag the internet deserves", also uses custom tag

Latter two will not display the image at all if JavaScript is not enabled.


(1) Pun intended, as a reference to a history tangent: before mid-2000s, compression used in GIF format was patent-encumbered in countries which allow software patents (this infamously includes USA), and required licensing fee there; so libre software advocates campaigned people to "burn all GIFs" and use PNG instead (at least in the cases of still images).

[EdgyRabbit]

please pay attention this does not pause any gifs it simply displays a pop up that you can display over your website

Thanks for this! however it doesnt seem to work on my end? Is it because im on fire fox or something?

[arcus]

The best method is to convert all your GIFs into video files with autoplay disabled, avoid bright colours, and patterns with high contrast (such as black and white checkerboard patterns.) If you're serious about making your site safe Mozilla's guide goes into depth. This personal blog by someone that's photosensitive is helpful for understanding what to avoid.

Of course, this is a lot of work and no one will judge you if you don't want to do all that.

The second best method is to make a simple splash page (no Javascript, basic CSS) with warnings that your site contains a lot of moving images and bright colours. Optionally, you can follow xwindows' tips in addition.

please pay attention this does not pause any gifs it simply displays a pop up that you can display over your website

This isn't ideal. Many people on the indie web block Javascript and will not see it. Javascript can be used to trigger photosensitivity, so that's another reason someone may block it. A CSS modal would be better than a Javascript popup, but a simple splash page is really the best option.

[EdgyRabbit]

Ah! I didnt really want to make a splash page, since my home page is already the index. Is there a way to make a pop up with out JS? Or something easier?

Also i would like feedback on if my homepage should even have a warning since i try to avoid flashing lights.. but my gifs could be overwhelming? but i dont know, does anyone have any feedback on my website?

Edit: I THINK I FIGURED IT OUT!!

I put some text on top of my page warning about the gifs.. and i think that was a good idea! but thoughts?

[cult_status18]

I put some text on top of my page warning about the gifs.. and i think that was a good idea! but thoughts?

I got a good idea for improving it just use and I frame that spans the entire width of the top of the screen when they scroll down they can get to everything else but if they are sensitive they can just click off and not have to see anything

if your confused on how I frames work then this video should help

[cult_status18]

This isn't ideal. Many people on the indie web block Javascript and will not see it. Javascript can be used to trigger photosensitivity, so that's another reason someone may block it. A CSS modal would be better than a Javascript popup, but a simple splash page is really the best option.

I understand that but JavaScript is important for a lot of different things when it comes to programming and if I really want cool functionalities on my website, like a local clock or a 3D render of something, then JavaScript will help immensely and its really useful for pictures too I know lyte box and lite box both use javascript and they are some of the best ways to display pictures on websites without javascript I am unable to do a lot of fun things that I plan on doing with my website so theirs no way I'm not going to use it

That being said, switching my pop-up to CSS is a great Idea but I have had troubles doing it which was why I took a shortcut Hopefully the sources you linked will help me this time

splash page? I think if I stretch out my warning to fit the whole page, then that might look nice, so long as I can style it nicely

[arcus]

Ah! I didnt really want to make a splash page, since my home page is already the index.

It shouldn't be hard to make one if you used relative paths. Is there a reason you don't want to move the home page to another directory?

Also i would like feedback on if my homepage should even have a warning since i try to avoid flashing lights.. but my gifs could be overwhelming? but i dont know, does anyone have any feedback on my website?

The links I posted include examples of what could be overwhelming, and tools to test GIFs. Alternatively, you can word the warning along the lines of "my site contains lots of moving images" and that should be helpful as well. I'm currently sick, so I can't give you my personal opinion on your site.

I put some text on top of my page warning about the gifs.. and i think that was a good idea! but thoughts?

The GIFs will still show if someone has a big monitor or are zoomed out.

I understand that but JavaScript is important

Nowhere in my post I said to not use Javascript completely. I said to not use it for anything you want everyone to see. Your notice does not show at all in my browser. This can be bad if someone has Javascript disabled with animations enabled.

splash page?

A splash page is the front page of a site. It contains important info about the site such as content warnings and browser compatability.


Edit: I misunderstood why you wanted to pause GIFs. For accessibility with sensory overload, and not with photosensitivity.

If you specifically want to use what other sites on Neocities are using, follow this guide. But again note (lurkers especially,) to make a site accessible photosensitivity wise, the pause GIFs buttons popular on Neocities are not a proper solution, and a plain splash screen with warnings should be used bare minimum. 

[EdgyRabbit]

It shouldn't be hard to make one if you used relative paths. Is there a reason you don't want to move the home page to another directory?

I dont know? I guess i didnt want to make a slash page because my webrings would probably break, or that it was too much effort? My webpage is old web, but even back then there was spalsh pages... i just.. dont know? Theres not many bright colours or anything, so im not enrietly if the gifs are over whelming or not? The reason i want feedback is because as a disabled person, i want my webpage to be acessible to other disabled people.

Edit: i just added a splash page, seemed like the best thing. Its just i might have to re code the buttons to my homepage,,,