tompetor123
Forum Replies Created
-
Forum: Everything else WordPress
In reply to: Add video or CSS animation (home page banner)
Certainly! Adding a video or CSS animation to a home page banner can enhance the visual appeal and engagement of your website. Below, I’ll provide you with examples of how to implement both options:1. Video Background:HTML:htmlCopy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Your Website</title> </head> <body> <div class="banner-container"> <video autoplay muted loop id="banner-video"> <source src="your-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div class="content"> <!-- Your other content goes here --> </div> </div> </body> </html>CSS (styles.css):cssCopy code
body, html { margin: 0; padding: 0; height: 100%; } .banner-container { position: relative; height: 100vh; overflow: hidden; } #banner-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; /* Adjust text color based on your design */ /* Add other styles for your content */ }2. CSS Animation:HTML:htmlCopy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Your Website</title> </head> <body> <div class="banner-container"> <div class="animated-banner"> <!-- Your other content goes here --> </div> </div> </body> </html>CSS (styles.css):cssCopy code
body, html { margin: 0; padding: 0; height: 100%; } .banner-container { position: relative; height: 100vh; overflow: hidden; } .animated-banner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; animation: fadeIn 2s ease-in-out; /* Example animation, create your own keyframes */ } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Add other styles for your content */Feel free to customize the HTML and CSS code based on your specific design and content requirements.