1

I have a magento theme installed which comes with a banner. But I'm trying to add more functionality to the banner to make it catchy for customers. I want the banners to zoom in or out when any image slides in.

I have a sample code which I added to the banner static page but the issue here is that if the page loads and a banner is slides in, my zoom in/out function doesn't work on each the banners separately. Instead, it continues zooming in or out from where another banner stops.

What I'm trying to achieve is for each banner to either zoom in or out when it loads and if another banner slides in, it starts the zoom function afresh without continuing from where another banner stops.

I'll be really grateful for any support or if there is a better way I can get this done. Below is my code;

            <style type="text/css">
                        .zoomClass {
                           animation : 30s linear 1s normal none infinite zoominout
                        }


                    @keyframes zoominout{
                          0%{
                               transform:scale(1)
                            }
                          25%{
                               transform:scale(1.5)
                            }
                          50%{
                               transform:scale(2)
                            }
                          75%{
                               transform:scale(1.5)
                            }
                          100%{
                               transform:scale(1)
                            }
                        }
            .container{
                         overflow:hidden;
            width:820px;
                        }
            </style>
            <div style="padding: 29px 0 36px; background-color: #f4f4f4;">
            <div class="container">
            <div class="slider-with-side">
            <div class="slider-area">
            <div id="banner-slider-demo-8" class="owl-carousel owl-theme owl-bottom-narrow owl-banner-carousel">
            <div class="item zoomClass"><img alt="" src="{{media url="wysiwyg/wearegifts.jpg"}}" /></div>
            <div class="item zoomClass"><img alt="" src="{{media url="wysiwyg/packaging.jpg"}}" /></div>
            <div class="item zoomClass"><img alt="" src="{{media url="wysiwyg/exp.jpg"}}" /></div>
            </div>
            </div>
            </div>
            </div>
            </div>
0

Is it the Ken Burns effect you're looking for? A gradual zoom in/out for each slide. If not, are any of these other example slideshows what you're looking for? https://www.magictoolbox.com/magicslideshow/examples/

If you find a Magento extension that does what you're looking for, installing that on your site is probably the fastest way to get the effect you need.

To use the Ken Burns slideshow effect in Magic Slideshow:

  1. Download and install the Magic Slideshow for Magento extension.
  2. Click "Magic Slideshow settings" in your Magento admin top menu.
  3. Click "Edit Magic Slideshow default settings".
  4. Click "Homepage or custom block" in the left nav.
  5. Upload the images for your slideshow.
  6. In the Autoplay section, set "Use Ken Burns effect" to "Yes".
  7. Save the settings and view your page to see the fading / zooming slideshow.

Email the Magic Toolbox developers if you need help.

  • Yes, exactly what I need. Do you have any code? Pls thanks – Jahswey Nov 9 '15 at 7:56
  • No code is needed - the code is automatically inserted by the Magento extension. Instructions have now been added to the answer above. If you don't see the slideshow after following these instructions, it probably means your theme isn't supported by default, so you should ask the developers to configure it for your Magento theme. – Stacked Nov 11 '15 at 2:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.