Read the statement by Michael Teeuw here.
Animation Transition on MMM-Slideshow
-
@Ouaoua you would add css settings to
~/MagicMirror/css/custom.css
(if it doesn’t exist, create it
touch ~/MagicMirror/css/custom.cssthen it would be
.modulename .class { (// like .MMM-Slideshow
and whatever css operations are to be applied to that class
}see
https://stackoverflow.com/questions/11660710/css-transition-fade-inthe MM css design is a stack
custom.css at the top
module .css in the middle
main.css at the bottomthe layout searchs custom 1st, then module then main
1st found winshere is a post about how to use the browser dev window to locate content classes and styles and temporarliy mod them to get the effect , and learn what u need to put in custom.css
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1666112800952
-
this showed up in my news feed
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
-
@sdetweil Thanks a lot for your help!!! <3
-
@sdetweil Ok So I wrote the code in the custom.css file as you said but in the website you sent me it is written that I need to add a line in the js file of the module too.
The line:
<h1 class="fade-in">Fade Me Down Scotty</h1>
Obviously I need to change “Fade Me Down Scotty”
I tried to add it myself but can’t make it work as I don’t know where to put this in the js file of the module.
Could you help me one last time?
Thanks a lot :D
-
so the css starts
.MMM-SlideShow .fade-in {
… whatever
}now you need to replace fade-in w the class u find on the image already created by the module
if no unique cllass, the u can select the image tag element
.MMM-SlideShow img {
…whatever
} -
also make sure to increase the slide interval config, as the module will not know about the longer fade time