Add video or CSS animation (home page banner)

  • Hello,

    I’m searching a solution to add video or animation on my website but

    • I need to have a minimum file size
    • Not third party like youtube
    • Home page light size for SEO

    A plugin to add animation (for websites screenshots portfolio) for scrolling effect.

    Is it possible please?

    Best regards

    Sam

Viewing 2 replies - 1 through 2 (of 2 total)

  • Yes, your wish can definitely be realised. However, the way to achieve this depends heavily on how your project is structured. Can you show a link to this? Then we could probably give you better tips.

    Alternatively, you can also contact the support team for your theme. As you want an output in the frontend, they would probably be the best contact for this.


    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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add video or CSS animation (home page banner)’ is closed to new replies.