スクロールダウンの画像の表示

Question

画像ギャラリーをスクロールダウンする際に問題が発生しました。ユーザーがページのポートフォリオセクションにスクロールダウンしたときに表示するようにします。

私はすでにいくつかのjavascriptとエフェクトを組み合わせようとしています。これは、イメージを順番にロードします。その例は私のcodepenです。

$(document).ready(function(){ 
 
    window.onload = function() {$('#title').hide().fadeIn(1000);}; 
 
}); 
 

 
document.addEventListener('DOMContentLoaded', function(){ 
 
    let wrapper = document.getElementById('wrapper'); 
 
    let topLayer = wrapper.querySelector('.top'); 
 
    let handle = wrapper.querySelector('.handle'); 
 
    let skew = 0; 
 
    let delta = 0; 
 
    
 
    if(wrapper.className.indexOf('skewed') != -1){ 
 
    skew = 1000; 
 
    } 
 

 
wrapper.addEventListener('mousemove', function(e){ 
 
    delta = (e.clientX - window.innerWidth/2) * 0.5; 
 
    
 
    handle.style.left = e.clientX + delta + 'px'; 
 
    
 
    topLayer.style.width= e.clientX + skew + delta + 'px'; 
 
    }); 
 
}); 
 

 
// $(document).ready(function() { 
 
    
 
//  /* Every time the window is scrolled ... */ 
 
//  $(window).scroll(function(){ 
 
    
 
//   /* Check the location of each desired element */ 
 
//   $('.column').each(function(i){ 
 
      
 
//    var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
 
//    var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 
      
 
//    /* If the object is completely visible in the window, fade it it */ 
 
//    if(bottom_of_window > bottom_of_object){ 
 
       
 
//     $(this).animate({'opacity':'1'},500); 
 
        
 
//    } 
 
      
 
//   }); 
 
    
 
//  }); 
 
    
 
// }); 
 

 
$(".column").each(function(i) { 
 
    $(this).delay(i * 1000).fadeIn(1000); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body{ 
 
    margin: 0; 
 
    padding:0; 
 
    font-size: 100%; 
 
/* line-height: 1.6; */ 
 
/* font-family: Arial, Helvetica, sans-serif; */ 
 
} 
 

 
.header{ 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    background-color: #333; 
 
    padding: 30px 0 0 0; 
 
} 
 

 
.header h1{ 
 
    margin: 0; 
 
    text-align: center; 
 
    color: white; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
/* padding: 0; */ 
 
    overflow: hidden; 
 
    padding: 20px 0px 30px 0; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    display: block; 
 
    display: inline-block; 
 
/* border-right: 1px solid #bbb; */ 
 
    border-right: 1px solid #bbb; 
 
    height: 25px; 
 
} 
 

 
li:last-child{ 
 
    border-right: none; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 0px 40px; 
 
    font-size: 1em; 
 
} 
 

 
li a:hover{ 
 
    color: #7bbe9a; 
 
/* color: #80b198; */ 
 
} 
 

 
#wrapper{ 
 
    position: relative; 
 
    width: 100%; 
 
    min-height:55vw; 
 
    overflow: hidden; 
 
} 
 

 
.layer{ 
 
    position:absolute; 
 
    width:100vw; 
 
    min-height: 55vw; 
 
    overflow: hidden; 
 
} 
 

 
.layer .content-wrap{ 
 
    position: absolute; 
 
    width:100vw; 
 
    min-height: 55vw; 
 
} 
 

 
.layer .content-body{ 
 
    width: 25%; 
 
    position:absolute; 
 
/* top:50%; */ 
 
    top: 25%; 
 
    text-align: center; 
 
    transform:translateY(-50%); 
 
    color:#fff; 
 
} 
 

 
.layer img{ 
 
    position:absolute; 
 
    width:65%; 
 
/*width: 35% */ 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%, -50%); 
 
} 
 

 
.layer h1 { 
 
    font-size:2em; 
 
} 
 

 
.bottom{ 
 
    background:#686965; 
 
    z-index:1; 
 
} 
 

 
.bottom .content-body{ 
 
    right:5%; 
 
} 
 

 
.bottom h1{ 
 
    color:#7bbe9a; 
 
} 
 

 
.top{ 
 
    background:#eff0ec; 
 
    color:#222; 
 
    z-index:2; 
 
    width:50vw; 
 
} 
 

 
.top .content-body{ 
 
    left:5%; 
 
    color:#333; 
 
} 
 

 
.handle{ 
 
    position: absolute; 
 
    height: 100%; 
 
    display: block; 
 
    background-color: #7bbe9a; 
 
    width: 5px; 
 
    top:0; 
 
    left: 50%; 
 
    z-index:3; 
 
} 
 

 
.skewed .handle{ 
 
    top:50%; 
 
    transform:rotate(30deg) translateY(-50%); 
 
    height:200%; 
 
    transform-origin:top; 
 
} 
 

 
.skewed .top{ 
 
    transform: skew(-30deg); 
 
    margin-left:-1000px; 
 
    width: calc(50vw + 1000px); 
 
} 
 

 
.skewed .top .content-wrap{ 
 
    transform: skew(30deg); 
 
    margin-left:1000px; 
 
} 
 

 
@media(max-width:768px){ 
 
    body{ 
 
    font-size:75%; 
 
    } 
 
} 
 

 
.gallery{ 
 
    width: 100%; 
 
    display: inline-block; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
/* padding-top: 15%; */ 
 
    padding-top: 7.5%; 
 
    padding-bottom: 15%; 
 
    background-color: #333; 
 
} 
 

 
h2 { 
 
    padding-bottom: 7.5%; 
 
    color: #7bbe9a; 
 
    text-align: center; 
 
    font-size: 1.875em; 
 
} 
 

 
.column { 
 
    width: 33.33%; 
 
    float: left; 
 
    display: block; 
 
    background: #7bbe9a; 
 
    display:none; 
 
} 
 

 
.column img{ 
 
    display: block; 
 
    width: 100%; 
 
/* position: relative; 
 
    overflow: hidden; */ 
 
    height: auto; 
 
    opacity: 1; 
 
    border: none; 
 
} 
 

 
.column img:hover { 
 
/* background-color: rgb(123, 190, 154); */ 
 
    opacity: 0.2; 
 
    transition: .5s ease; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href=""> 
 
    </head> 
 
    <body> 
 
    <div class="header"> 
 
     <div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div> 
 
     <nav id="menu"> 
 
     <ul> 
 
      <li><a href="index.html">Home</a></li> 
 
      <li><a href="#portfolio">Portfolio</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
    <section id="wrapper" class="skewed"> 
 
     <div class="layer bottom"> 
 
     <div class="content-wrap"> 
 
      <div class="content-body"> 
 
      <h1>Designer</h1> 
 
<!--    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> --> 
 
      </div> 
 
      
 
      <img src="http://3d.ford.com/assets/ford_gt-min.png" alt=""> 
 
     </div> 
 
     </div> 
 
     
 
     <div class="layer top"> 
 
     <div class="content-wrap"> 
 
      <div class="content-body"> 
 
      <h1>Developer</h1> 
 
<!--    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> --> 
 
      </div> 
 
      
 
      <img src="http://3d.ford.com/assets/ford_gt_print.png" alt=""> 
 
     </div> 
 
     </div> 
 
     
 
     <div class="handle"></div> 
 
    </section> 
 
    
 
    <a class="anchor" name="portfolio"> 
 
    <div class="gallery"> 
 
     <h2>Portfolio</h2> 
 
     </a> 
 
     <div class="column box"> 
 
     <a href=""> 
 
     <img src="https://img1.cgtrader.com/items/4716/33d9798412/large/wicker-laundry-basket-3d-model-obj-3ds-c4d.jpg" alt=""></a> 
 
     </div> 
 
     <div class="column box"> 
 
     <a href=""> 
 
     <img src="https://cdn.shopify.com/s/files/1/0225/1115/products/buildings-rts-orc-smithy-low-poly-3d-model-2_400x.jpeg?v=1456744435" alt=""></a> 
 
     </div> 
 
     <div class="column box"> 
 
     <a href=""> 
 
     <img src="http://www.pycomall.com/images/P1/Bed_Room_Interior_3D_Model_in_Max_format_7.jpg" alt=""></a> 
 
     </div> 
 
     <div class="column box"> 
 
     <a href=""> 
 
     <img src="http://mycreativedaddy.com/wp-content/uploads/chair-capitone-3d-model.jpg" alt=""></a> 
 
     </div> 
 
     <div class="column box"> 
 
     <a href=""> 
 
     <img src="http://www.pycomall.com/images/P1/Restaurant_Interior_3D_Model_in_Max_format_4.jpg" alt=""></a> 
 
     </div> 
 
     <div class="column box"> 
 
     <a href=""> 
 
     <img src="https://3dexport.com/items/2008/07/29/11820/9454/wedding_ring._3d_model_c4d_max_obj_fbx_ma_lwo_3ds_3dm_stl_66996.jpg" alt=""></a> 
 
     </div> 
 
     <div class="column box"> 
 
     <a href=""> 
 
     <img src="http://www.madsonline.net/wp-content/uploads/2017/07/living-room-interior-3d-model-in-max-format-3-3d-models-in-3d-living-room-model.jpg" alt=""></a> 
 
     </div> 
 
     <div class="column box"> 
 
     <a href=""> 
 
     <img src="https://d1a9v60rjx2a4v.cloudfront.net/2013/10/03/00_54_27_730_00_1.jpg" alt=""></a> 
 
     </div> 
 
     <div class="column box"> 
 
     <a href=""> 
 
     <img src="https://img1.cgtrader.com/items/5185/bb5b9f2fde/large/bailarina-3d-model-obj-3ds-fbx-ma-mb.jpg" alt=""></a> 
 
     </div> 
 
    </div> 
 
    
 
    <script src=""></script> 
 
    </body> 
 
</html>

Answer 1

あなたは）（フェードインする必要はありません。あなたはcodepenでscrollrevealを含めているので、私はあなたのJS更新：

window.sr = ScrollReveal({ duration: 2000 }); 
sr.reveal('.column', 500); 


document.addEventListener('DOMContentLoaded', function(){ 
    let wrapper = document.getElementById('wrapper'); 
    let topLayer = wrapper.querySelector('.top'); 
    let handle = wrapper.querySelector('.handle'); 
    let skew = 0; 
    let delta = 0; 

    if(wrapper.className.indexOf('skewed') != -1){ 
    skew = 1000; 
    } 

wrapper.addEventListener('mousemove', function(e){ 
    delta = (e.clientX - window.innerWidth/2) * 0.5; 

    handle.style.left = e.clientX + delta + 'px'; 

    topLayer.style.width= e.clientX + skew + delta + 'px'; 
    }); 
}); 

// $(document).ready(function() { 

//  /* Every time the window is scrolled ... */ 
//  $(window).scroll(function(){ 

//   /* Check the location of each desired element */ 
//   $('.column').each(function(i){ 

//    var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
//    var bottom_of_window = $(window).scrollTop() + $(window).height(); 

//    /* If the object is completely visible in the window, fade it it */ 
//    if(bottom_of_window > bottom_of_object){ 

//     $(this).animate({'opacity':'1'},500); 

//    } 

//   }); 

//  }); 

// }); 

それはこのスニペットを追加して

を、それは簡単です：

window.sr = ScrollReveal({ duration: 2000 }); 
sr.reveal('.column', 500); 

あなたの財産の表示を削除することを確認してください：このクラス.column内でなしCSS。

私はあなたのcodepenをフォークして、おそらくあなたが望む解決策です。

https://github.com/jlmakes/scrollreveal

：あなたはこのアニメーション効果を変更したい場合は、このドキュメントを確認してください

https://codepen.io/joannesalfa/pen/JrXrRX

Answer 2

あなたは.column全体の要素が消え、スクロールが開始したとき、それは突然バナナを行くDOMや計算に現れる上display: noneを使用しています。私は基本的にちょうど列クラスのCSSを変更しましたので、あなたが望むように動作するかどうかを以下のコードを試してみてください。私はまた、列クラスの遅延を削除しました。

$(document).ready(function() { 
 
    window.onload = function() { 
 
    $('#title').hide().fadeIn(1000); 
 
    }; 
 
}); 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
    let wrapper = document.getElementById('wrapper'); 
 
    let topLayer = wrapper.querySelector('.top'); 
 
    let handle = wrapper.querySelector('.handle'); 
 
    let skew = 0; 
 
    let delta = 0; 
 

 
    if (wrapper.className.indexOf('skewed') != -1) { 
 
    skew = 1000; 
 
    } 
 

 
    wrapper.addEventListener('mousemove', function(e) { 
 
    delta = (e.clientX - window.innerWidth/2) * 0.5; 
 

 
    handle.style.left = e.clientX + delta + 'px'; 
 

 
    topLayer.style.width = e.clientX + skew + delta + 'px'; 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 

 
    /* Every time the window is scrolled ... */ 
 
    $(window).scroll(function() { 
 

 
    /* Check the location of each desired element */ 
 
    $('.column').each(function(i) { 
 
     var bottom_of_object = $(this).offset().top + $(this).innerHeight(); 
 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 

 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (bottom_of_window > bottom_of_object) { 
 

 
     $(this).animate({ 
 
      "opacity": "1" 
 
     }, 500); 
 
     } 
 

 
    }); 
 

 
    }); 
 

 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 100%; 
 
    /* line-height: 1.6; */ 
 
    /* font-family: Arial, Helvetica, sans-serif; */ 
 
} 
 

 
.header { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    background-color: #333; 
 
    padding: 30px 0 0 0; 
 
} 
 

 
.header h1 { 
 
    margin: 0; 
 
    text-align: center; 
 
    color: white; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    /* padding: 0; */ 
 
    overflow: hidden; 
 
    padding: 20px 0px 30px 0; 
 
    text-align: center; 
 
} 
 

 
li { 
 
    display: block; 
 
    display: inline-block; 
 
    /* border-right: 1px solid #bbb; */ 
 
    border-right: 1px solid #bbb; 
 
    height: 25px; 
 
} 
 

 
li:last-child { 
 
    border-right: none; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 0px 40px; 
 
    font-size: 1em; 
 
} 
 

 
li a:hover { 
 
    color: #7bbe9a; 
 
    /* color: #80b198; */ 
 
} 
 

 
#wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    min-height: 55vw; 
 
    overflow: hidden; 
 
} 
 

 
.layer { 
 
    position: absolute; 
 
    width: 100vw; 
 
    min-height: 55vw; 
 
    overflow: hidden; 
 
} 
 

 
.layer .content-wrap { 
 
    position: absolute; 
 
    width: 100vw; 
 
    min-height: 55vw; 
 
} 
 

 
.layer .content-body { 
 
    width: 25%; 
 
    position: absolute; 
 
    /* top:50%; */ 
 
    top: 25%; 
 
    text-align: center; 
 
    transform: translateY(-50%); 
 
    color: #fff; 
 
} 
 

 
.layer img { 
 
    position: absolute; 
 
    width: 65%; 
 
    /*width: 35% */ 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.layer h1 { 
 
    font-size: 2em; 
 
} 
 

 
.bottom { 
 
    background: #686965; 
 
    z-index: 0; 
 
} 
 

 
.bottom .content-body { 
 
    right: 5%; 
 
} 
 

 
.bottom h1 { 
 
    color: #7bbe9a; 
 
} 
 

 
.top { 
 
    background: #eff0ec; 
 
    color: #222; 
 
    z-index: 2; 
 
    width: 50vw; 
 
} 
 

 
.top .content-body { 
 
    left: 5%; 
 
    color: #333; 
 
} 
 

 
.handle { 
 
    position: absolute; 
 
    height: 100%; 
 
    display: block; 
 
    background-color: #7bbe9a; 
 
    width: 5px; 
 
    top: 0; 
 
    left: 50%; 
 
    z-index: 3; 
 
} 
 

 
.skewed .handle { 
 
    top: 50%; 
 
    transform: rotate(30deg) translateY(-50%); 
 
    height: 200%; 
 
    transform-origin: top; 
 
} 
 

 
.skewed .top { 
 
    transform: skew(-30deg); 
 
    margin-left: -1000px; 
 
    width: calc(50vw + 1000px); 
 
} 
 

 
.skewed .top .content-wrap { 
 
    transform: skew(30deg); 
 
    margin-left: 1000px; 
 
} 
 

 
@media(max-width:768px) { 
 
    body { 
 
    font-size: 75%; 
 
    } 
 
} 
 

 
.gallery { 
 
    width: 100%; 
 
    display: inline-block; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    /* padding-top: 15%; */ 
 
    padding-top: 7.5%; 
 
    padding-bottom: 15%; 
 
    background-color: #333; 
 
} 
 

 
h2 { 
 
    padding-bottom: 7.5%; 
 
    color: #7bbe9a; 
 
    text-align: center; 
 
    font-size: 1.875em; 
 
} 
 

 
.column { 
 
    width: 33.33%; 
 
    float: left; 
 
    display: block; 
 
    background: #7bbe9a; 
 
    opacity: 0; 
 
} 
 

 
.column img { 
 
    display: block; 
 
    width: 100%; 
 
    /* position: relative; 
 
    overflow: hidden; */ 
 
    height: auto; 
 
    opacity: 1; 
 
    border: none; 
 
} 
 

 
.column img:hover { 
 
    /* background-color: rgb(123, 190, 154); */ 
 
    opacity: 0.2; 
 
    transition: .5s ease; 
 
    border: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href=""> 
 
</head> 
 

 
<body> 
 
    <div class="header"> 
 
    <div id="title"> 
 
     <h1>Lorem Ipsum 3D Online Portfolio</h1> 
 
    </div> 
 
    <nav id="menu"> 
 
     <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    <section id="wrapper" class="skewed"> 
 
    <div class="layer bottom"> 
 
     <div class="content-wrap"> 
 
     <div class="content-body"> 
 
      <h1>Designer</h1> 
 
      <!--    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> --> 
 
     </div> 
 

 
     <img src="http://3d.ford.com/assets/ford_gt-min.png" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="layer top"> 
 
     <div class="content-wrap"> 
 
     <div class="content-body"> 
 
      <h1>Developer</h1> 
 
      <!--    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> --> 
 
     </div> 
 

 
     <img src="http://3d.ford.com/assets/ford_gt_print.png" alt=""> 
 
     </div> 
 
    </div> 
 

 
    <div class="handle"></div> 
 
    </section> 
 

 
    <a class="anchor" name="portfolio"> 
 
    <div class="gallery"> 
 
     <h2>Portfolio</h2> 
 
    </a> 
 
    <div class="column box"> 
 
    <a href=""> 
 
     <img src="https://img1.cgtrader.com/items/4716/33d9798412/large/wicker-laundry-basket-3d-model-obj-3ds-c4d.jpg" alt=""></a> 
 
    </div> 
 
    <div class="column box"> 
 
    <a href=""> 
 
     <img src="https://cdn.shopify.com/s/files/1/0225/1115/products/buildings-rts-orc-smithy-low-poly-3d-model-2_400x.jpeg?v=1456744435" alt=""></a> 
 
    </div> 
 
    <div class="column box"> 
 
    <a href=""> 
 
     <img src="http://www.pycomall.com/images/P1/Bed_Room_Interior_3D_Model_in_Max_format_7.jpg" alt=""></a> 
 
    </div> 
 
    <div class="column box"> 
 
    <a href=""> 
 
     <img src="http://mycreativedaddy.com/wp-content/uploads/chair-capitone-3d-model.jpg" alt=""></a> 
 
    </div> 
 
    <div class="column box"> 
 
    <a href=""> 
 
     <img src="http://www.pycomall.com/images/P1/Restaurant_Interior_3D_Model_in_Max_format_4.jpg" alt=""></a> 
 
    </div> 
 
    <div class="column box"> 
 
    <a href=""> 
 
     <img src="https://3dexport.com/items/2008/07/29/11820/9454/wedding_ring._3d_model_c4d_max_obj_fbx_ma_lwo_3ds_3dm_stl_66996.jpg" alt=""></a> 
 
    </div> 
 
    <div class="column box"> 
 
    <a href=""> 
 
     <img src="http://www.madsonline.net/wp-content/uploads/2017/07/living-room-interior-3d-model-in-max-format-3-3d-models-in-3d-living-room-model.jpg" alt=""></a> 
 
    </div> 
 
    <div class="column box"> 
 
    <a href=""> 
 
     <img src="https://d1a9v60rjx2a4v.cloudfront.net/2013/10/03/00_54_27_730_00_1.jpg" alt=""></a> 
 
    </div> 
 
    <div class="column box"> 
 
    <a href=""> 
 
     <img src="https://img1.cgtrader.com/items/5185/bb5b9f2fde/large/bailarina-3d-model-obj-3ds-fbx-ma-mb.jpg" alt=""></a> 
 
    </div> 
 
    </div> 
 

 
    <script src=""></script> 
 
</body> 
 

 
</html>