How can I draw in gridlines in the background of a website after loading?

Question

I'm trying to animate the background of my website, which has a solid background, and then I want to "sketch" gridlines over it. Right now I have the background drawn as such:

background-color: #269;
background-image: linear-gradient(@light-grey 2px, transparent 2px),
    linear-gradient(90deg, @light-grey 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, .3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;

I want it to be like this, except I want the linear-gradients to load one-by-one and make them look sketched in if possible.

I tried looking at this code: Background color change on page load

And it seemed sort of along the tracks of what I'm trying to do, but I don't want the whole background to change, I only want to draw in the grid.

I also think I may need to use this to make it draw in after the page loads: JavaScript that executes after page load

Should I be assigning IDs to the linear-gradients and calling them in a Javascript function?

IronFlare · Accepted Answer · 2019-03-13T03:14:10.700

3

One way to accomplish this doesn't involve JavaScript at all.

Instead, it uses a CSS pseudo element containing only the grid line portion of the background, and animates it as it stretches from a size of 0px * 0px to 100% * 100%.

The basic gist of the code is shown below (updated to display behind div content):

div {
  /* Background color code is placed here */
  position: relative;
  z-index: 0;
}

div::before {
  /* Grid background code is placed here */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: " ";
  animation: gridWipe 1s linear;
}

@keyframes gridWipe {
  0% {
    width: 0px;
    height: 0px;
  }

  100% {
    width: 100%;
    height: 100%;
  }
}

To see this in action, take a look at this JSFiddle.

edited Mar 13 '19 at 03:14

answered Mar 13 '19 at 02:36

IronFlare

2,287
2
17
27

Thanks, that's helpful! But now it seems to be pushing the text out of the way as the grid wipes. How can I make the text above the animation stay in the same spot? For example if you add
"Test"
to the div in the JSFiddle you provided, it gets pushed out as the grid wipes. – Emma Jayne Mar 13 '19 at 02:59
Fixed. The `::before` pseudo element can be attached to the top left corner of the `div` by setting `position: relative;` on the div, `position: absolute;` on the pseudo element, and the using `top`, `left`, and `z-index` attributes to move and stack both elements. I've updated my answer and the JSFiddle to reflect this. – IronFlare Mar 13 '19 at 03:16
Thanks so much for your help! Works great! – Emma Jayne Mar 13 '19 at 03:24

Temani Afif · Answer 2 · 2019-03-13T10:44:05.143

You can create your background differently using repeating-linear-gradient then animate background-size like below:

div.box {
  background-image: 
    repeating-linear-gradient(to bottom,transparent,transparent 98px,lightGray 98px,lightGray 100px),
    repeating-linear-gradient(to right, transparent,transparent 98px,lightGray 98px,lightGray 100px),
    
    repeating-linear-gradient(to bottom,transparent ,transparent 19px,rgba(255, 255, 255, 0.3) 19px,rgba(255, 255, 255, 0.3) 20px),
    repeating-linear-gradient(to right, transparent ,transparent 19px,rgba(255, 255, 255, 0.3) 19px,rgba(255, 255, 255, 0.3) 20px);
  background-repeat:no-repeat;
  background-color: #269;
  width: 300px;
  height: 300px;
  animation:gridWipe 3s linear;
}

@keyframes gridWipe {
  0% {
    background-size:0 0;
  }
  100% {
    background-size:100% 100%;
  }

}

p {
  background: rgba(255,255,0,0.5);
}

<div class="box">
<p>Lorem ipsum</p>
</div>

You can also consider some CSS variable to optimize your code:

div.box {
  --l_b:2px; /*width of the big line*/
  --l_s:1px; /*width of the small line*/
  --d_b:100px; /*distance between big lines*/
  --d_s:20px; /*distance between small lines*/

  --c1:transparent,transparent calc(var(--d_b) - var(--l_b)),lightGray calc(var(--d_b) - var(--l_b)),lightGray var(--d_b);
  --c2:transparent,transparent calc(var(--d_s) - var(--l_s)),rgba(255, 255, 255, 0.3) calc(var(--d_s) - var(--l_s)),rgba(255, 255, 255, 0.3) var(--d_s);
  
  background-image: 
    repeating-linear-gradient(to bottom,var(--c1)),
    repeating-linear-gradient(to right, var(--c1)),
    
    repeating-linear-gradient(to bottom,var(--c2)),
    repeating-linear-gradient(to right, var(--c2));
  background-repeat:no-repeat;
  background-color: #269;
  width: 300px;
  height: 300px;
  animation:gridWipe 3s linear;
}

@keyframes gridWipe {
  0% {
    background-size:0 0;
  }
  100% {
    background-size:100% 100%;
  }

}

p {
  background: rgba(255,255,0,0.5);
}

<div class="box">
<p>Lorem ipsum</p>
</div>

How can I draw in gridlines in the background of a website after loading?

2 Answers2