CSS Keyframe Animation Screen Door Effect

Question

I have implemented the code from this demo https://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html on my Web page. As you can see in the demo, the background images have a screen door effect like you would see in a VR headset. It is a little worse on my Web page, probably because of the brightness of my images compared to the demo. I realize that this is probably to increase performance, but is there any way to set the resolution higher? I would like to minimize the pixilation as much as possible. I can't seem to find any posting that even discusses this issue.

The sky is clear in my photo but rendered in large dots on the page (see image).

You are required to post a minimal example of the markup that shows the problem here: [mcve] A link to some other site does no one any good if and when that site disappears or changes in the future. — Rob, Aug 17 '17 at 20:58
I get it, you don't know the answer. I linked to a detailed example of the code. Please don't comment on my question if you don't have anything useful to say. This is a simple question and anyone that knows the answer would have plenty of information from what I have already posted with or without the linked example. Also, the 'link' you referenced is a guideline, not a requirement. — tony95, Aug 18 '17 at 14:42
@tony95 It's not about whether we know the answer or not, it's a site rule. "My code isn't working" questions must have an MCVE *in the question itself*. — TylerH, Aug 18 '17 at 18:08
This was a general question about keyframes, I didn't think it was the code. Second, I don't know where the problem is so linking to the example was the clearest way to present the problem without reposting the entire example in my comment. Third, I have never seen a rule that says code is required in the question itself for every question about code, please link to that rule if it exists. — tony95, Aug 20 '17 at 20:26

im_benton · Accepted Answer · 2017-08-18T14:39:39.600

0

This is some of the code I saw on the link you posted that is responsible for the texture.

What it does is creates a div on top of the image with a transparent repeating image. This gives the texture on top of any image and is the ideal solution because you can easily swap out images and keep the texture.

.cb-slideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}

.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

edited Aug 18 '17 at 14:39

answered Aug 17 '17 at 21:00

im_benton

2,541
4
21
30

**From Review**: This answer was flagged as **low quality**. While answers are always appreciated, it really helps to provide some information about how your code solves the problem at hand. Not everyone may be familiar with your exact coding logic, but may understand your general *approach* or *concept*. To help improve your answer, please provide some [**context surrounding it**](https://meta.stackexchange.com/questions/114762), and see the help article on [**writing great answers**](http://stackoverflow.com/help/how-to-answer) for some tips on how to make your answers count :) – Obsidian Age Aug 17 '17 at 22:39
So, how does this increase the resolution or reduce the image pixilation of the keyframe background image? It doesn't. – tony95 Aug 18 '17 at 14:37
updated response with answer. it shouldn't effect the background image at all, just give a texture ont op of the image. – im_benton Aug 18 '17 at 14:40
Since it is from the example, it is already implemented in my code. you seem to be simply stating a basic function of the keyframe background animation, but not addressing the problem, which is specifically reducing the pixilation and/or increasing the image resolution. – tony95 Aug 18 '17 at 14:55
So the pattern isn't there for performance. If the resolution needs improvement, you probably needed a better image depending on what you are viewing it with. – im_benton Aug 18 '17 at 15:01
is the resolution is an issue with the pattern, you can try changing that pattern background image to be better or reduce the size of it with background-size in your css. – im_benton Aug 18 '17 at 15:02
No, the background-size is set to cover so that it fills the page. This has nothing to do with the pixilation. I just copied a piece of my image as rendered. The sky is clear in my photo but rendered in large dots on the page. – tony95 Aug 18 '17 at 17:47
Benton, you are right. I was misunderstanding your post. That code is what is creating the 'effect' of pixilation. I thought it was actually a reduction in quality. I removed the repeating pattern.png and it looks normal again. Sorry for not understanding earlier. Thanks. – tony95 Aug 20 '17 at 20:07

CSS Keyframe Animation Screen Door Effect

1 Answers1