Web Front-end
CSS Tutorial
How to achieve slide effect with css? How to implement slideshow (code example)
How to achieve slide effect with css? How to implement slideshow (code example)
The content of this article is to introduce how to achieve the slide effect with css? How to implement slideshow (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
Below we will use code to implement the effect of slide switching (fade in and out) step by step:
1. Create an html file and write demo
First we need to set the image list on the page, contained in a div box. Something like the following:
<div id="stage"> <a href="img/How to achieve slide effect with css? How to implement slideshow (code example)"><img src="/static/imghw/default1.png" data-src="img/2.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="How to achieve slide effect with css? How to implement slideshow (code example)" ></a> <a href="img/2.jpg"><img src="/static/imghw/default1.png" data-src="img/2.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="How to achieve slide effect with css? How to implement slideshow (code example)" ></a> <a href="img/3.jpg"><img src="/static/imghw/default1.png" data-src="img/3.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="How to achieve slide effect with css? How to implement slideshow (code example)" ></a> <a href="img/4.jpg"><img src="/static/imghw/default1.png" data-src="img/4.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="How to achieve slide effect with css? How to implement slideshow (code example)" ></a> <a href="img/5.jpg"><img src="/static/imghw/default1.png" data-src="img/5.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="How to achieve slide effect with css? How to implement slideshow (code example)" ></a> <a href="img/6.jpg"><img src="/static/imghw/default1.png" data-src="img/6.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="How to achieve slide effect with css? How to implement slideshow (code example)" ></a> <a href="img/7.jpg"><img src="/static/imghw/default1.png" data-src="img/7.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="How to achieve slide effect with css? How to implement slideshow (code example)" ></a> <a href="img/8.jpg"><img src="/static/imghw/default1.png" data-src="img/8.jpg" class="lazy" style="max-width:90%" style="max-width:90%" alt="How to achieve slide effect with css? How to implement slideshow (code example)" ></a> </div>
In this example, all images have links, but this is not required. If you remove the link, you just need to change some CSS and JavaScript to reference 'img' instead of 'a'.
2. Use CSS to overlay images
Here is the CSS code we used for the following demo:
#stage {
margin: 1em auto;
width: 382px;
height: 292px;
}
#stage a {
position: absolute;
}
#stage a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
}
#stage a:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#stage a:nth-of-type(2) {
z-index: 10;
}
#stage a:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}By setting the link For position:absolute, we take all images out of the document stream and stack them together. We then need to specify a width and height for the #stage to reserve space on the page for the slide show. This is equal to the image dimensions plus padding (10px each side) and borders (1px each side).
We then use some nth-of-type() selectors to put the first image on top of the stack, the second image at the back of the stack, and the rest of the images hidden from the display.
Finally, we assign an animation keyframe to the top image, telling it to wait 4 seconds before fading out, setting opacity:0. All that's missing now is a bit of JavaScript to move the facing image to the bottom of the stack so that the next image can appear and fade out in sequence.
3. Use JavaScript to trigger the effect
All you need here is to assign an event handler to the image that is triggered when the keyframe animation ends. It takes the most important photo and moves it to the back:
window.addEventListener("DOMContentLoaded", function(e) {
var stage = document.getElementById("stage");
var fadeComplete = function(e) { stage.appendChild(arr[0]); };
var arr = stage.getElementsByTagName("a");
for(var i=0; i < arr.length; i++) {
arr[i].addEventListener("animationend", fadeComplete, false);
}
}, false);The new image on top is now assumed to be the nth-of-type(1) attribute, including keyframe animation --fader, and so on Other images.
That's it! No bloated code, no plugins, no libraries, just a few lines of vanilla JavaScript that works in all modern browsers.
4. Rendering:
Run the above code to get a simple fade-in and fade-out slideshow:
Summary : The above is the fade-in and fade-out slide effect achieved in this article. You can try it yourself to deepen your understanding. I hope it will be helpful to your study.
The above is the detailed content of How to achieve slide effect with css? How to implement slideshow (code example). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1657
14
1415
52
1309
25
1257
29
1229
24
How to achieve wave effect with pure CSS3? (code example)
Jun 28, 2022 pm 01:39 PM
How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!
How to fix background slideshow not working in Windows 11, 10
May 05, 2023 pm 07:16 PM
On Windows 11/10 systems, some users claim that the slideshow on the desktop background has stopped working. Users are confused as to why photos on their laptop's background screen no longer slide. The reasons for this issue where slideshows are not working are described below. A third-party desktop customization application is installed. In power options, the desktop background slideshow setting is paused. The folder containing the background images is deleted. The screen may turn off after the slideshow is complete. After investigating the above reasons, we have created a list of fixes that will undoubtedly help users resolve the issue. Workaround – A deactivated window may be one of the causes of this issue. So, try activating Windows and check if the issue is resolved. Try to apply it via Settings
How to convert PowerPoint to Google Slides?
Apr 22, 2023 pm 03:19 PM
How to Convert PowerPoint to Google Slides One of the easiest ways to convert a complete PowerPoint presentation to Google Slides is to upload it. By uploading a PowerPoint (PPT or PPTX) file to Google Slides, the file will automatically be converted into a format suitable for Google Slides. To convert PowerPoint to Google Slides directly, follow these steps: Sign in to your Google account, go to the Google Slides page, and click on the blank space under the "Start a new presentation" section. In the new presentation page, click File&g
How to create a slideshow with background music on Windows 11?
Apr 21, 2023 am 10:07 AM
Slideshows are a great way to organize pictures on your Windows 11 computer. Sometimes, Windows users may face some kind of hardware limitation or system update and they need a way to store their files so that they are not accidentally deleted or lost. Additionally, it makes sorting and displaying photos much easier than having to manually show them to people by scrolling through them one by one. Slideshows are also a great way to bring together photos from different sources (camera, phone, USB drive) into an easy-to-enjoy format. Fortunately, you can use some useful third-party applications to create these slideshows without being forced to use tools like PowerPoint. The app is suitable for business presentations, but Pow
Introduction to the method of inserting heptagons into PPT slides
Mar 26, 2024 pm 07:46 PM
1. Open the PPT slide document, and in the [Outline, Slide] column on the left side of the PPT, click to select the slide where you want to insert the basic [shape]. 2. After selecting, select the [Insert] menu in the function menu bar above the PPT and click. 3. After clicking the [Insert] menu, the [Insert] submenu bar pops up below the function menu bar. Select the [Shape] menu in the [Insert] submenu bar. 4. Click the [Shape] menu to pop up the preset shape type selection page. 5. In the shape type selection page, select the [Heptagon] shape and click. 6. After clicking, move the mouse to the slide editing interface, press the mouse to draw, and release the mouse after the drawing is completed. Complete the insertion of the [heptagon] shape.
Why does the slideshow have black borders when playing in full screen?
Oct 20, 2023 pm 03:25 PM
There may be black borders in the full-screen slideshow due to screen resolution mismatch, image size mismatch, incorrect zoom mode settings, monitor settings issues, slide design issues, etc. Detailed introduction: 1. Screen resolution does not match. A common reason for black borders is that the screen resolution does not match the slide size. When the size of the slide is smaller than the screen resolution, black borders will appear during playback. The solution is to adjust Size the slide so that it matches the screen resolution. In PowerPoint, you can select the "Design" tab, then click "Slide Size" and so on.
Use CSS skillfully to realize various strange-shaped buttons (with code)
Jul 19, 2022 am 11:28 AM
This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!
How to hide text until clicked in Powerpoint
Apr 14, 2023 pm 04:40 PM
How to hide text before any click in PowerPoint If you want text to appear when you click anywhere on a PowerPoint slide, setting it up is quick and easy. To hide text before clicking any button in PowerPoint: Open your PowerPoint document and click the Insert menu. Click on New Slide. Choose Blank or one of the other presets. Still in the Insert menu, click Text Box. Drag a text box onto the slide. Click the text box and enter your
