Utilize various animations on multiple background images within a singular class

Question

Utilize various animations on multiple background images within a singular class

I have a unique situation where I am using a single class called slider, but I need different types of animations for various images. Can someone please assist me in implementing this? Currently, all my images are using the same animation style, but I would like to maintain the single class slider.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    

    <title>Document</title>
    <style>
       body{
           margin:0p;
           padding:0p;
          background: green;
          perspective: 800px;
          height: 100vh;
   width: 100wh;
       
       }
        .slider{
        /*    background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 800px 800px;
  width: 800px;
  height: 800px;
  border: 2px solid;
  color: pink;
         */
        width:100vw;
         height:100vh;
            background: url(b1.jpg);

  background-size: 100wh 100vh;   
 /* animation: slide 2s infinite;*/
  animation: slide 
   2s infinite;                                                   
  margin: 100px auto;
         
        }
    @keyframes slide{
        from{
           /* transform:rotateY(0deg);*/
          /* transform: rotate3d(1, 1, 1, 0deg);*/
           transform: rotate3d(0, 1, 0, 0deg);
  background-color: pink;
        }
        to{
           /* transform:rotateY(180deg); 
            transform: rotate3d(1, 1, 1, 360deg);*/
            transform: rotate3d(0, 1, 0, 360deg);
  background-color: pink;
        }  
      
            25%{
                background-image: url(b2.jpg);
               
 
                background-size: 100wh 100vh;   
 
            }
            50%{
                background-image: url(b3.jpg);
                

                background-size: 100wh 100vh;   
            }
            75%{
                background-image: url(b4.jpg);
                

                background-size: 100wh 100vh;     
            }
            100%{
                background-image: url(b5.jpg);
                

                background-size: 100wh 100vh;    
            }

        }
    </style>
</head>
<body>
   <div class="slider"></div>
</body>
</html>

Here is the fiddle

My fiddle

In addition, I have noticed that each image displays a repetition effect, making it appear as if the image is being reduced and added again. Is there a way to display each image without repetition at 100% view?

Any assistance on this matter would be greatly appreciated.

html css animation slider slideshow

Answer 1

Answer №1

Understanding the concept of a slider, it appears that the intention is to rotate a series of images sequentially within a single animation rather than employing distinct animations for each image. This can be accomplished as long as the desire is not to have completely different animations for each 'slide'.

Here are a few key points: It is reasonable to question why the image is repeated, which is due to the default background setting in CSS. To prevent these extra elements from appearing, adjust it to 'no-repeat'.

The images may possess varying aspect ratios compared to the viewport's dimensions (used by the containing element). To ensure visibility of the entire image or cover the entire viewport, utilize background-size: contain or cover, respectively. Depending on your preference and the images' aspect ratios, experiment with both options.

For better positioning, consider centering the background-position both horizontally and vertically instead of the default left and top alignment.

An adjusted code snippet has been provided below with transition effects between image changes, which can be fine-tuned based on preferences. Pay attention to the percentage settings in the keyframes section to ensure all images are showcased properly.

UPDATE In the revised snippet, individual animations are assigned to each image while adhering to the single slider class requirement. Each image is granted a segment of the overall animation time allocation. Custom animations like rotation, zooming, etc., are defined for each slide within their respective keyframe sections.

Four slides have been incorporated in this snippet, each receiving a specific animation treatment during one iteration of the sequence. The timings specified allow for dynamic movement paired with a static display phase for each image. Additional images and diverse animations can be added by adjusting the percentages in the keyframes section and inserting more background images accordingly.

Note: Opacity adjustments impact the entire element, including background colors, so modifications may be required to achieve the desired visual effect.

Experimentation with opacity and transform properties may be essential to avoid abrupt transitions between images. While duplicating transformation and opacity settings in every instance is not always mandatory, it serves as a helpful reminder that each transformation should include all necessary parameters.

Answer 2