How do I loop and move a transparent gif on second play?

[Edrol97]

Hi all. This is the link to a new website page of mine for a whack a mole game. I want the hole background to have worms moving along it and for it not to effect the game's location on the page. How do I do this?

 

[tomliv]

Hi all. This is the link to a new website page of mine for a whack a mole game. I want the hole background to have worms moving along it and for it not to effect the game's location on the page. How do I do this?

Are you referring to the worms on the page background, or the actual background of the little holes?

 

[simong1993]

Hey Edrol97!

That sounds like a fun effect! To make a moving worm background without messing with your game layout, you could use a CSS animation on a background div. Here’s a simple way to get started:

1. Create a div that’ll be the "background" for your worms.
2. Use CSS animations to make the worms move across that div.

Here’s a rough idea:

<!-- HTML -->
<div class="background">
</div><div class="game">
 <!-- Your game code here --> 
</div>

<!-- CSS -->
<style> 
 .background {    position: fixed;    top: 0;    left: 0;    width: 100vw;    height: 100vh;    z-index: -1;    overflow: hidden;  }   
 .worm {    position: absolute;    width: 50px;    height: 10px;    background-color: brown;    border-radius: 5px;    animation: moveWorms 10s linear infinite;  }  
/* Worm animation */  
@keyframes moveWorms {    0% { transform: translateX(-100%); }    100% { transform: translateX(100%); }  }</style>

You could add more <div class="worm"> elements within the .background div and randomize their start positions to make it look more dynamic.

Let me know if you want help tweaking it!

 

[tomliv]

It is also possible to use multiple background-images for an element, such as a div.

div{
    background-image:
        url('img/worm.gif'),
        url('img/worm.gif'),
        url('img/worm.gif'),
        url('img/worm.gif');
    background-position:
        left top,
        center top,
        right top,
        center;
    background-repeat: no-repeat; /* or repeat for all if needed */
}

Adjust all as necessary for your needs.

 

[Edrol97]

It is also possible to use multiple background-images for an element, such as a div.

div{
    background-image:
        url('img/worm.gif'),
        url('img/worm.gif'),
        url('img/worm.gif'),
        url('img/worm.gif');
    background-position:
        left top,
        center top,
        right top,
        center;
    background-repeat: no-repeat; /* or repeat for all if needed */
}

Adjust all as necessary for your needs.

Managed to do it as so:

link

 

[tomliv]

Managed to do it as so:

link

Nice. You might want to put overflow:hidden on the gif's wrappers to avoid the unwanted horizontal scrollbars

 

[Edrol97]

Nice. You might want to put overflow:hidden on the gif's wrappers to avoid the unwanted horizontal scrollbars

Odd, there are no horizontal scrollbars on my live or local version. Can you show me what you see?

 

[tomliv]

Odd, there are no horizontal scrollbars on my live or local version. Can you show me what you see?

CleanShot 2024-11-08 at 16.05.37

Screenshot uploaded to CleanShot Cloud

cln.sh

 

[tomliv]

Actually, looks like you can solve the scrolling by putting box-sizing: border-box; on .game-container.

I use box-sizing: border-box; on all pages as part of my reset.css like this:

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

If you aren't doing this now, adding it will impact quite a bit - either subtly or greatly.

Read up here:

box-sizing - CSS: Cascading Style Sheets | MDN

The box-sizing CSS property sets how the total width and height of an element is calculated.

developer.mozilla.org

 

[tomliv]

I'd suggest looking into a css reset as it makes life easier:

My Modern CSS Reset | jakelazaroff.com

A CSS reset I've been using for new projects.

jakelazaroff.com

A Modern CSS Reset • Josh W. Comeau

I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!

www.joshwcomeau.com