Immerse Yourself with Ken Burns Effect and Crossfade in Bootstrap 4's

I am aiming to implement a zoom in "Ken Burns" effect and a crossfade transition between slides using Bootstrap 4 carousel. The zoom effect should last for 6 seconds, while the fading transition should be completed in 1 second. Additionally, I want the carousel to loop seamlessly from the last slide to the first one without any noticeable interruption.

While the zoom effect is working well, there seems to be a slight "jump" in my demo, and the fading transition is not functioning correctly. Any assistance with resolving these issues would be greatly appreciated. Thank you!

Demo

http://jsfiddle.net/beuL5dcp/

HTML

<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>

CSS

.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
  }

}
/* Remaining CSS code continues as is */
jquerycssbootstrap-4

Answer №1

The issue with the 'bounce' is not related to the @keyframes prefixes but rather to incorrect timing. The zoom animation progresses faster than the carousel, causing it to restart prematurely. This creates a 'bounce' effect as the image reverts to its original state scale(1).

Adjusting the duration of CSS animations may resolve this issue. For instance, modifying all animations from 6000ms to 7000ms could potentially solve the problem.

Answer №2

The example below demonstrates a zoom effect achieved using CSS properties such as background-size and transition, rather than relying on the @keyframes animation method. The goal was to create a simpler implementation by avoiding the use of @keyframes and leveraging background-size along with transition. Let's explore the example together:

Fullscreen Bootstrap 4 carousel Ken Burns and fade 

$('#zoomer').carousel({
  interval: 6000,
  pause: false,
  ride: "carousel"
})
.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;
  }

}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01636e6e75727573607141352f342f32">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303776d766d70">[email protected]</a>/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>

To achieve the desired effect without utilizing @keyframes, the addition of the .active class after a delay is suggested. This ensures that the transition specified for .carousel-items takes effect when the .active class is dynamically applied. Currently, the first .carousel-item does not animate as expected because it already has the active class hardcoded. Consider implementing this alternative approach and share your feedback.

An alternate method without @keyframes (starting from the second item)

$('#zoomer').carousel({
  interval: 6000,
  pause: false,
  ride: "carousel"
})
.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;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303776d766d70">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d8d8c3c4c3c5d6c7f78399829984">[email protected]</a>/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>

Answer №3

A modification has been made to your Fiddle. If you approve, the ken burns effect will run for a longer duration and transition to the next slide before reaching the end and looping. In this update, the KB was set to run for 7 seconds instead of 6. Additionally, transition: all 1s ease-in-out; was added to the carousel item as the fade effect was being overridden by the scale.

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

.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
  }

}
<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In Bootstrap 4, toasts are like mysterious entities that stubbornly refuse to be closed,

I am aiming to implement floating toasts over my content in the corner of the screen. I am using asp.net MVC core 2 with Bootstrap 4 already integrated. All my other Bootstrap features are functioning correctly. In order to achieve this, I have referred t ...

bootstrap-4asp.net-core-mvc

Move divs on top of each other while scrolling through a webpage

I am working on an HTML-page that contains multiple DIVs and a function called 'fullscreenCSS' that ensures the DIVs take up the entire screen. My goal is to create a scrolling effect where as I scroll using the scrollbar, the current DIV remain ...

javascriptjqueryhtml

Trigger video to play or pause with every click event

Looking to dynamically change the HTML5 video tag with each click of an li tag. Here is the current structure: <div class="flexslider"> <ul class="slides"> <li> <video> <source type="video/mp4" src="http://t ...

javascriptjqueryhtmlvideo

Adding new elements to a div container

My goal is to populate a div element with items based on elements from an array. I need to duplicate an existing element on the page and append the new version to the div. Let me provide the code for better understanding: JavaScript: function apply(list ...

javascriptjqueryhtml

Issue with maintaining fixed space above navbar in HTML/CSS code

I'm struggling to make my navbar sticky on my website without any space above it. Can someone help me with this issue? Here is the URL to my site: My CSS looks like this: body { font-size: 12px; line-height: 22px; font-family: Arial, H ...

htmlcss

Show validation errors of a Django Form on submission by using jQuery's `.ajax()` function

Details My challenge involves incorporating a form within a modal window. The form's content is dynamically loaded using jQuery .load with the following code snippet: $('.modal-content').load('{% url 'edito' q.id %}');. ...

jqueryajaxdjangotwitter-bootstrap-3

Customizing HTML Select Elements

Can the HTML Select attribute be customized to have a flatter appearance? Although I can set the border to be 1px solid, the dropdown part still appears 3D and unattractive. ...

htmlcss

Utilizing AJAX within Django to remove a data entry in a database table defined by a model

I'm working on a project where I need to remove a row representing a model from the DB without having to reload the page. Currently, I have an X icon on the left side that hides the row using .hide('slow'). However, I am looking for a way to ...

jquerypythonajaxdjango

Dynamically create a button using jQuery and JSON based on specific conditions (either true or false)

Is there a way to generate buttons with specified parameters only if a condition is true? Currently, the buttons are generated without checking conditions. Any help with the correct syntax would be appreciated. Sample JSON code: { "Caption": "Module ...

jqueryhtmljsonbutton

Video posters can now feature a sleek black border to enhance the

How can I add a black border to a video poster? I've tried to work it out on my own, but I'm having trouble getting it to work. Thank you for any assistance... echo '<video id="video" width="300px" height="200px&q ...

css

Utilize CSS to position my image in the center on mobile devices with responsive design

I am having an issue with the responsiveness of my logo image on my website's showcase section. Currently, the image is only showing up in the left corner on mobile devices, and I want it to be centered. Below is my HTML code: <section id="showca ...

htmlcssbootstrap-4

What is the process for creating a sub-menu for a dropdown menu item in Bootstrap 5?

https://i.sstatic.net/o4FLn.pngthis is my code which i have created this navigation bar with bootstrap and all of its drop downs but i want to add another drop down to the services drop down section inside of webdevelopment but it can't any easy solut ...

javascripthtmljquerycssbootstrap-5

Adjust the position of an image to move it closer to the top using CSS

I have a fiddle where I am trying to adjust the position of an image (keyboard) to match a specific design. https://i.sstatic.net/flqCH.png In my fiddle, the keyboard image is slightly lower than the desired position shown in the design. I am looking for ...

javascripthtmlcsstwitter-bootstrap-4

Is it possible to apply a gradient to a table row in Internet Explorer?

Whenever I hover over a specific table row in my table, I want the background to transition to a linear gradient. The CSS code is pretty simple: tbody.row-links tr:hover { background: ...standard multi-browser linear gradient code... color: #333C3 ...

htmlinternet-explorerhovercss

I am experiencing an issue where the Angular md-sidenav is not opening within my CodePen environment

Despite my efforts, I am unable to get my md-sidenav to open when clicking the burger-icon. I have checked for log messages and even created a simple sayHi function that does not output anything to the console. There are no visible JS errors either. My c ...

javascriptcssangularjs

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

Whenever I reach the bottom of the page, the navigation bar suddenly enlarges. The navbar is located at the top of my code. I attempted moving the navigation to the bottom of the code... but it didn't fix the issue... Could someone please identify wha ...

jquerycsshtmltwitter-bootstrap

Looking for an Icon to accompany the navigation bar on Bootstrap

Can anyone assist me with adding an icon next to the navbar starting from the word "Dashboard" without any spacing using only Bootstrap? Please note that I have tried options like offset-5 and ms-5 but they did not achieve the desired result. <div id=& ...

htmlcssbootstrap-5

What is the best way to allow a container div to only show horizontal overflow, without relying on "display:inline-block" for its inner divs?

My coding challenge involves dynamically creating nested <div> elements within another <div> when a button is clicked. Upon clicking the button, a new inner <div> with a unique id is generated inside the outer <div>, each possessing ...

javascriptcsshtmloverflow

The Angular checked functionality is not working as expected due to the presence of ngModel

Just getting started with Angular here. I’m working on a checkbox table that compares to another table and automatically checks if it exists. The functionality is all good, but as soon as I add ngModel to save the changes, the initial check seems to be ...

htmlcsstypescriptwebangularjs-digest

The Kendo UI Combobox triggering the change event twice

After noticing some strange behavior in all the comboboxes within my application, I realized that the Kendo UI ComboBoxes were triggering the change event twice, resulting in two HTTP requests being made when the code inside only required one. Despite cond ...

c#jqueryangularjscomboboxkendo-ui