CSS3とJQueryを使用してカルーセル背景にズーム効果を実現する方法

Question

this websiteカルーセルと同じ背景ズームアウト効果を追加したいと思います。

これは私がその効果を適用したいのdivのコードです：

MARKUP：

<div class="banner"> 
     <div class="content block1 animated"> 
      <h1>Ceramic Directory</h1> 
      <span>World's largest Ceramic hub, all the ceramic traders reside here!</span> 
      <a href="#">Register now</a> 
      <span class="handler">&rarr;</span> 
     </div> 
</div> 

CSS：

 .banner{ 
    margin-bottom: 10px; 
    background-image: url("../images/png.jpg"); 
    background-repeat: no-repeat; 
    height: 700px; 
    background-size: cover; 
    width: 100%; 
    } 
    .banner .block1{ 
    background-color: rgba(256,256,256,0.7); 
    margin-top: 10%; 
    height: 300px; 
    position: absolute; 
    width: 90%; 
    padding-top: 7%; 
    animation-name: fadein; 
    -webkit-animation-name: fadein; 
    } 
    .banner .block1 h1{ 
    text-align: center; 
    font-family: LatoWebLight; 
    font-size: 40px; 
    margin-bottom: 5px; 
    } 
    .banner .block1 span{ 
    text-align: center; 
    font-family: LatoWebHairline; 
    font-size: 25px; 
    margin-bottom: 30px; 
    display: block; 
    } 
    .banner .block1 a{ 
    text-align: center; 
    border-radius: 5px; 
    border: 1px solid black; 
    font-family: LatoWebMedium; 
    font-size: 18px; 
    margin-left: 45%; 
    margin-top: 5%; 
    padding: 10px; 
    text-decoration: none; 
    color: black; 
    } 

    .banner .block1 .handler{ 
    text-align: center; 
    border-radius: 5px; 
    border: 1px solid black; 
    cursor: pointer; 
    font-size: 18px; 
    margin-left: 105%; 
    margin-top: -5%; 
    padding: 10px; 
    color: black; 
    width: 20px; 
    transition: color 0.2s; 
    -webkit-transition: color 0.2s; 
    transition: background 0.2s; 
    -webkit-transition: background 0.2s; 
    } 
    .banner .block1 .handler:hover{ 
    font-weight: 900; 
    background: rgba(34,34,34,0.5); 
    color: white; 
    } 

彼らはそれを作りましたか？ヘルプ

Answer 1

あなたが言及したウェブサイトは、ヘッダー画像をアニメーション化するjQueryプラグインを使用するための

感謝。プラグインのページhereと詳細なドキュメントhere

プラグインを使用する予定がない場合は、CSS3を使用してイメージのスケーリング効果を達成できます。以下同じ例：

.test { 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
    left: 30px; 
 
    top: 30px; 
 
    transition: all 1s; 
 
} 
 

 
.test:hover { 
 
    -webkit-transform: scale(1.05, 1.05); 
 
    transform: scale(1.05, 1.05); 
 
} 
 

 
.test:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    background: url("http://lorempixel.com/600/400"); 
 
    background-size: cover; 
 
}

<div class="test"> 
 
    </div>