Dev Faq
3
votes

Carousel Bootstrap 4 plein écran Ken Burns and Fade

Mon objectif est de créer un effet de zoom "Ken Burns" et une transition de fondu enchaîné entre les diapositives à l'aide du carrousel Bootstrap 4. L'effet de zoom devrait prendre 6 secondes et la transition de fondu 1 seconde. Le carrousel doit également boucler sans être remarqué lorsque la transition est effectuée entre la dernière et la première diapositive.

L'effet de zoom fonctionne plutôt bien mais il a un "saut" dans ma démo et la transition de fondu ne fonctionne pas correctement et. J'apprécierais de l'aide. Merci!

Démo

http://jsfiddle.net/beuL5dcp/

HTML

.carousel-inner>.carousel-item
{
  margin:auto;
  height: 100vh;
  width:100%;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
  -webkit-animation:kenburns 6000ms linear 0s infinite;
  animation:kenburns 6000ms linear 0s infinite
}
@-webkit-keyframes kenburns
{
  0%
  {
    -webkit-transform:scale(1);
    -webkit-transition:-webkit-transform 6000ms linear 0s
  }
  100%
  {
    -webkit-transform:scale(1.1);
    -webkit-transition:-webkit-transform 6000ms linear 0s
  }

}
@-moz-keyframes kenburns
{
  0%
  {
    -moz-transform:scale(1);
    -moz-transition:-moz-transform 6000ms linear 0s
  }
  100%
  {
    -moz-transform:scale(1.1);
    -moz-transition:-moz-transform 7000ms linear 0s
  }

}
@-ms-keyframes kenburns
{
  0%
  {
    -ms-transform:scale(1);
    -ms-transition:-ms-transform 6000ms linear 0s
  }
  100%
  {
    -ms-transform:scale(1.1);
    -ms-transition:-ms-transform 6000ms linear 0s
  }

}
@-o-keyframes kenburns
{
  0%
  {
    -o-transform:scale(1);
    -o-transition:-o-transform 6000ms linear 0s
  }
  100%
  {
    -o-transform:scale(1.1);
    -o-transition:-o-transform 6000ms linear 0s
  }

}
@keyframes kenburns
{
  0%
  {
    transform:scale(1);
    transition:transform 6000ms linear 0s
  }
  100%
  {
    transform:scale(1.1);
    transition:transform 6000ms linear 0s
  }

}

CSS

<div class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">

    <!--======= Wrapper for Slides =======-->
    <div class="carousel-inner">

            <!--========= First Slide =========-->
            <div class="carousel-item active" style="background-image: url('https://i.picsum.photos/id/878/1920/1680.jpg?hmac=_FQShv6E5HdjI6OKgjozFJQz8SXlT1OwmqijW5jHGQo')">
            </div>

            <!--========= Second Slide =========-->
            <div class="carousel-item" style="background-image: url('https://i.picsum.photos/id/874/1920/1680.jpg?hmac=KDczwg-ejraLUmoflMNUBCkt1LyLxNreJptc7RQajFY')">
            </div>

            <!--========= Third Slide =========-->
            <div class="carousel-item" style="background-image: url('https://i.picsum.photos/id/870/1920/1680.jpg?hmac=IAkVJX2zYS6BuaMLixYh5xoyOpeDH5WkcGTacBUPPXM')">
            </div>

     </div>

 </div>

1 commentaires

vous souhaitez récompenser une réponse existante ou vous n'êtes satisfait d'aucune des réponses actuelles?

3 Réponses :

0
votes

L'effet de zoom dans l'exemple ci-dessous est réalisé par l'animation CSS @keyframes -que je ne voulais pas- et pour @keyframes j'ai utilisé background-size avec transition , je voulais le faire sans @keyframes juste simple background-size avec transition car c'est bien mieux que @keyframes , eh bien, je vais vous en dire plus, voyez d'abord l'exemple si cela vous convient -

Carousel Bootstrap 4 plein écran Ken Burns and Fade 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

<div id="zoomer" class="carousel slide carousel-fade" data-ride="carousel">

  <div class="carousel-inner">

    <div class="carousel-item active" id="activeOnLoad"> <!-- get the ID -->
      <div class="item-inner" style="background-image: url('https://i.picsum.photos/id/874/1920/1680.jpg?hmac=KDczwg-ejraLUmoflMNUBCkt1LyLxNreJptc7RQajFY')"></div>
    </div>

    <div class="carousel-item">
      <div class="item-inner" style="background-image: url('https://i.picsum.photos/id/878/1920/1680.jpg?hmac=_FQShv6E5HdjI6OKgjozFJQz8SXlT1OwmqijW5jHGQo')"></div>
    </div>

    <div class="carousel-item">
      <div class="item-inner" style="background-image: url('https://i.picsum.photos/id/870/1920/1680.jpg?hmac=IAkVJX2zYS6BuaMLixYh5xoyOpeDH5WkcGTacBUPPXM')"></div>
    </div>

  </div>
  <a class="carousel-control-prev" href="#zoomer" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </a>
  <a class="carousel-control-next" href="#zoomer" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </a>
</div>
.item-inner {
    height: 100vh;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 6.2s linear;
    overflow: hidden;
}

.carousel-item.active .item-inner {
    transition: all 6.2s linear;
    background-size: 110% auto;
}
$('#zoomer').carousel({
  interval: 6000,
  pause: false,
  ride: "carousel"
})

Donc, comme je le disais, je voulais le faire sans @keyframes , et pour ce faire, j'ai besoin que la classe .active soit ajoutée après quelques instants, ce qui .active classe .active ne sera pas codée en dur, sera ajoutée après quelques instants pour que la transition j'ai appliquée à .carousel-item fonctionnera pour toutes les classes .carousel-item lorsque la classe .active leur sera ajoutée, mais maintenant la transition dans le premier .carousel-item qui a déjà l' active classe dedans, ne fonctionne pas pour la raison évidente, la transition fonctionne à partir de la deuxième classe .carousel-item .

Donc, si vous pouvez ajouter la classe active après quelques instants, j'espère que ce serait bien mieux que la version @keyframes . J'ai également joint cette version et ajouté un id si vous voulez essayer ceci, voyez si vous pouvez le faire et faites-le nous savoir.

Une meilleure façon sans @keyframes , (mais en travaillant à partir du deuxième élément) 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

<div id="zoomer" class="carousel slide carousel-fade" data-ride="carousel">

  <!--======= Wrapper for Slides =======-->
  <div class="carousel-inner">

    <!--========= First Slide =========-->
    <div class="carousel-item active">
      <div class="item-inner" style="background-image: url('https://i.picsum.photos/id/874/1920/1680.jpg?hmac=KDczwg-ejraLUmoflMNUBCkt1LyLxNreJptc7RQajFY')"></div>
    </div>

    <!--========= Second Slide =========-->
    <div class="carousel-item">
      <div class="item-inner" style="background-image: url('https://i.picsum.photos/id/878/1920/1680.jpg?hmac=_FQShv6E5HdjI6OKgjozFJQz8SXlT1OwmqijW5jHGQo')"></div>
    </div>

    <!--========= Third Slide =========-->
    <div class="carousel-item">
      <div class="item-inner" style="background-image: url('https://i.picsum.photos/id/870/1920/1680.jpg?hmac=IAkVJX2zYS6BuaMLixYh5xoyOpeDH5WkcGTacBUPPXM')"></div>
    </div>
  </div>
  
  <!--========= Carousel Navigation =========-->
  <a class="carousel-control-prev" href="#zoomer" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </a>
  <a class="carousel-control-next" href="#zoomer" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </a>
</div>
.carousel-item {transition-duration: 1s !important}

.item-inner {
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  -webkit-animation:kenburns 7000ms linear 0s infinite;
  animation:kenburns 7000ms linear 0s infinite;
}

@keyframes kenburns {
  0%
  {
    background-size: 100% auto;
    transition: all 7s linear;
  }
  100%
  {
    background-size: 110% auto;
    transition: all 7s linear;
  }

}
$('#zoomer').carousel({
  interval: 6000,
  pause: false,
  ride: "carousel"
})

3 commentaires

cela fonctionne comme je le souhaite dans certains navigateurs: Edge, Firefox (Windows) et Chrome (MacOS) mais l'effet de zoom ne fonctionne pas dans Safari et dans Firefox (MacOs) et Chrome (Windows 10) cela fonctionne mais l'image "saute" après s'estompe comme ma démo.

Je n'ai ajouté aucun préfixe pour les @keyframes les @keyframes -vous ajoutés avant de tester dans ces navigateurs? c'est la première démo qui est faite par @keyframes et c'est la deuxième qui a quelques problèmes que j'ai expliqué ci-dessus. Les liens proviennent de codepen, testez-les dans vos navigateurs, mieux si vous déplacez tous les extraits vers votre local et ajoutez correctement les préfixes, puis testez-les. Bonne chance

@Tanim, les préfixes ne sont plus nécessaires pour l'animation!

0
votes

J'ai mis à jour votre Fiddle. Si cela vous convient, faites durer longtemps l'effet ken burns et faites une transition entre la diapositive avant qu'elle n'atteigne la fin et les boucles. Dans cette mise à jour, j'ai exécuté la base de connaissances pendant 7s au lieu de 6. De plus, une transition: all 1s ease-in-out; supplémentaire était nécessaire transition: all 1s ease-in-out; à l'élément du carrousel car le fondu était contourné par l'échelle.

http://jsfiddle.net/m1xrsw56/2/ 

<div class="carousel slide carousel-fade animate_text kb_wrapper" data-ride="carousel" data-interval="6000">

    <!--======= Wrapper for Slides =======-->
    <div class="carousel-inner">

        <!--========= First Slide =========-->
        <div class="carousel-item active" style="background-image: url('https://i.picsum.photos/id/878/1920/1680.jpg?hmac=_FQShv6E5HdjI6OKgjozFJQz8SXlT1OwmqijW5jHGQo')">

        </div>

        <!--========= Second Slide =========-->
        <div class="carousel-item" style="background-image: url('https://i.picsum.photos/id/874/1920/1680.jpg?hmac=KDczwg-ejraLUmoflMNUBCkt1LyLxNreJptc7RQajFY')">
        </div>

        <!--========= Third Slide =========-->
        <div class="carousel-item" style="background-image: url('https://i.picsum.photos/id/870/1920/1680.jpg?hmac=IAkVJX2zYS6BuaMLixYh5xoyOpeDH5WkcGTacBUPPXM')">

        </div>
.carousel-inner>.carousel-item
{
  margin:auto;
  height: 100vh;
  width:100%;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
  -webkit-animation:kenburns 7000ms linear 0s infinite;
  animation:kenburns 7000ms linear 0s infinite;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}
@-webkit-keyframes kenburns
{
  0%
  {
    -webkit-transform:scale(1);
    -webkit-transition:-webkit-transform 7000ms linear 0s
  }
  100%
  {
    -webkit-transform:scale(1.1);
    -webkit-transition:-webkit-transform 7000ms linear 0s
  }

}
@-moz-keyframes kenburns
{
  0%
  {
    -moz-transform:scale(1);
    -moz-transition:-moz-transform 7000ms linear 0s
  }
  100%
  {
    -moz-transform:scale(1.1);
    -moz-transition:-moz-transform 7000ms linear 0s
  }

}
@-ms-keyframes kenburns
{
  0%
  {
    -ms-transform:scale(1);
    -ms-transition:-ms-transform 7000ms linear 0s
  }
  100%
  {
    -ms-transform:scale(1.1);
    -ms-transition:-ms-transform 7000ms linear 0s
  }

}
@-o-keyframes kenburns
{
  0%
  {
    -o-transform:scale(1);
    -o-transition:-o-transform 7000ms linear 0s
  }
  100%
  {
    -o-transform:scale(1.1);
    -o-transition:-o-transform 7000ms linear 0s
  }

}
@keyframes kenburns
{
  0%
  {
    transform:scale(1);
    transition:transform 7000ms linear 0s
  }
  100%
  {
    transform:scale(1.1);
    transition:transform 7000ms linear 0s
  }

}

0 commentaires
0
votes

Le problème avec le «saut» n'est pas à cause des préfixes @keyframes mais à cause d'un mauvais timing. Pour une raison quelconque, l'animation de zoom est plus rapide que le carrousel et recommence donc trop tôt. Il provoque l'effet de «saut» car il renvoie l'image dans l' scale(1) état précédente scale(1) .

Vous devriez juste jouer un peu avec la longueur des animations CSS. Par exemple, si vous modifiez toutes les animations de 6000 ms à 7000 ms, cela devrait faire le travail.

0 commentaires

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier