Image enthüllen auf Scrollen nach unten Javascript

Question

Ich habe ein Problem beim Versuch, eine Bildgalerie zu erhalten, um auf Scrollen nach unten zu offenbaren. Ich möchte, dass es angezeigt wird, wenn der Benutzer zum Portfolioabschnitt der Seite scrollt.

Ich versuche, den Effekt mit einigen Javascript zu kombinieren, die bereits die Bilder in sequenzieller Reihenfolge lädt. Das Beispiel ist auf meinem 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

Sie brauchen nicht fadeIn(); da Sie scrollreveal in codepen enthalten, ich Ihre JS aktualisiert:

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

//    } 

//   }); 

//  }); 

// }); 

Es dieses Snippet hinzugefügt wurde, dann ist es einfach:

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

Stellen Sie sicher, Ihre Immobilie Anzeige zu entfernen: keine in dieser Klasse .Column in css.

Ich verzweigte Ihren Codepen und vielleicht ist es die Lösung, die Sie wollen.

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

Wenn Sie diese Animationseffekt ändern möchten, überprüfen Sie bitte diese Dokumentation:

https://github.com/jlmakes/scrollreveal

Answer 2

Wenn Sie display: none auf den .column das gesamte Element verschwindet und wenn starten Scrollen geht es erscheint plötzlich in dem DOM und Berechnungen Bananen. Ich habe im Grunde nur die CSS der Spalte Klasse geändert, also versuchen Sie es und führen Sie den Code unten aus, um zu sehen, ob es wie gewünscht funktioniert. I Die Verzögerung für die Spaltenklasse wurde ebenfalls entfernt.

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