Jump to content

Banner com efeito zoom


JVNA
 Share

Go to solution Solved by tuga74,

Recommended Posts

Boa tarde,

alguém me poderá indicar fonte HTML e/ou CSS para integrar num banner de site o efeito slideshow em que as imagens fazem um zoom ligeiro automático, à semelhança do exemplo do template da wix que abaixo apresento:

http://pt.wix.com/website-template/view/html/1392?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fmusic%2F3&bookName=&galleryDocIndex=8&category=music

muito obrigado

Cumprimentos

Link to comment
Share on other sites

  • Solution

Tipo isto? https://jsfiddle.net/q0rgL8ws/

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://www.wallpaper77.com/upload/DesktopWallpapers/cache/Cloudy-Scenery-landscape-1024x768.jpg" alt="img1" />
        </div>
        <div class="item">
            <img src="http://www.deshow.net/d/file/travel/2009-09/beautiful-autumn-scenery-723-24.jpg" alt="img2" />
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>
.item {
    transition: display 1500ms linear 0s;
    overflow:hidden;
}
.item.active {
}
.item.active img {
    transition: transform 5000ms linear 0s;
    /* This should be based on your carousel setting. For bs, it should be 5second*/
    transform: scale(1.05, 1.05);
}
 
  • Vote 1

http://www.nova.news

Nova aprende automaticamente o que gostas de ler e mostra os conteúdos que te interessam.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.