I'm using reveal.js: I'd like to display a full-screen image as a background, and once I move to a different slide I'd like to blur or dim it. Looking at Changing the background-image style in Reveal.js, I've tried this in my css:
.html.blur .backgrounds {
-webkit-filter: blur(5px);
-moz-filter: blur(10px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
and then in my markdown document I do an html comment with
.slide: data-background="figs/background.svg" data-background-size="contain" data-state="blur"
which creates a <section>
tag with data-state="blur"
inside. However, the background doesn't get blurred -- what am I missing?
just a typo: no "." in front of html...
This will work and in addition to the blurring, do some dimming and saturation change, which will make the foreground text easier to read:
html.dim .backgrounds {
-webkit-filter: blur(4px) saturate(.5) brightness(.8);
-moz-filter: blur(4px) saturate(.7) brightness(.9);
-o-filter: blur(4px) saturate(.7) brightness(.9);
-ms-filter: blur(4px) saturate(.7) brightness(.9);
filter: blur(4px) saturate(.7) brightness(.9);
}
and if you want it to look extra snazzy, you can add an animation:
@-webkit-keyframes blur-animation {
0% {
-webkit-filter: blur(0px) ;
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px) saturate(.5) brightness(.8);
-moz-filter: blur(5px) saturate(.7) brightness(.9);
-o-filter: blur(5px) saturate(.7) brightness(.9);
-ms-filter: blur(5px)saturate(.7) brightness(.9);
filter: blur(5px) saturate(.7) brightness(.9);
}
}
html.background-blur-animation .backgrounds {
-webkit-animation-name: blur-animation;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-out;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0s;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With