![]() ![]() Height of the content when fillRegion is false.Ĭycles through the most recent daily wallpapers from NASA's Astronomy Picture of the Day (standard resolution).Ĭycles through the most recent daily wallpapers from NASA's Astronomy Picture of the Day (high resolution).Ĭycles through the most recent daily wallpapers from Bing.Ĭycles through random selections of the Chromecast wallpapers (thanks TheLukaBoss).Ĭycles through random selections of the FireTV wallpapers.Ĭycles through random selections of the specified flickr photos. Width of the content when fillRegion is false. When set to false, the width and height properties may be set to restrict the size of the module. Whether to fill the region where the module is positioned, or to add a div in the normal flow of the page. What action to take when a USER_PRESENCE notification is received. Choices are "cover," "contain," and "auto." Whether to randomly select images from those sources that support it, or cycle through the latest. Whether to allow 18+ images to be chosen (only supported for reddit sources). Maximum height of selected variant (only supported for reddit sources). Maximum width of selected variant (only supported for reddit sources). Whether to crossfade between images when loading a new wallpaper, or just replace the current image. Choices are "vertical," "horizontal," and "auto." Only used by the pexels and bing sources. The CSS filter to apply to the images, to improve readability of other modules' text The maximum number of images to load from the source. How often (in ms) to check the source for new wallpapers. Whether to fade the top and bottom 10% of the image. Whether to display the image caption/attribution when available. The following properties can be configured: Option Photographs by Marco Carmassi and Francesco Alamia, licensed under Creative Commons.Įnjoy this piece? I invite you to follow me at /dudleystorey to learn more.Modules: Configuration options The script could use some optimisation and improvements, including a fade-to-black option: I’ll put it up on Github for contributions presently.secs needs to be higher than the transition value (an even multiple works well).Firefox and Internet Explorer do not yet cross-fade the background images, simply substituting one for the other.each image should be the same aspect ratio for the cross-fade to work effectively otherwise you’ll see a slight transitioned “stretch” as each image submits to background-size: cover.There are a few conditions and improvements to be aware of: ![]() Next, the function to show the images in the background: To get around that issue, we can preload the images: secs is the amount of time in seconds each background should remain on the page: in production it’s value would usually be around 12 ~ 30.Ĭhrome does a very good job of caching the images before they are used, but other browsers do not, causing white flashes as each image is loaded and replaced. The empty value for the base variable in this example assumes that the images are right beside the page. It starts with an array of the image filenames you want to use, together with an indication of where they are, relative to the page itself: The animation is handled with a script placed at the bottom of the page. This sets up the basic background: note the transition, and the combination of universal and descendant selector and declaration, used to ensure that nothing inside the body will inherit the transition. Surprisingly, you don’t even need the blend mode, as Webkit will transition the images without it: I’ve left the property in place for the next article, which will use the feature to a greater extent.īackground: url("lone-tree.jpg") no-repeat center center fixed Technically you don’t need any HTML content to make this example work, as the background images are applied to the root element. You can also see a fullscreen version and inspect the code at CodePen. In the interests of that, I’ve presented the basic code here, with more detail to come in a future article. Quite by accident, I found that Webkit-derived browsers, such as Chrome, Safari and Opera, will actually cross-fade images in the background, given the right combination of CSS. Usually, these effects are “faked” using a background and cover layer, but I was interested in manipulating true background images with blend modes. I’ve been working on a method to fade a page background image sequence, like the current Twitter login page. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |