Afficher l'image dans le défilement vers le bas javascript

J'ai un problème pour essayer de faire apparaître une galerie d'images sur le défilement. Je veux qu'il révèle quand l'utilisateur fait défiler la section portfolio de la page.Afficher l'image dans le défilement vers le bas javascript

J'essaie de combiner l'effet avec du javascript que j'ai déjà qui charge les images dans l'ordre séquentiel. L'exemple est sur mon 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>

Source

2017-09-20 user7311741

Vous n'avez pas besoin fadeIn(); puisque vous avez inclus scrollreveal dans codepen, je mis à jour votre 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); 

//    } 

//   }); 

//  }); 

// });

Il a été ajouté cet extrait, il est simple:

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

Assurez-vous de retirer votre écran de propriété: aucun dans cette .column de classe css.

J'ai forké votre codepen et c'est peut-être la solution que vous voulez.

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

Si vous souhaitez modifier cet effet d'animation, s'il vous plaît vérifier cette documentation:

https://github.com/jlmakes/scrollreveal

Source

2017-09-20 01:59:26 Ivan

Lorsque vous utilisez display: none sur le .column l'élément entier disparaît et quand le défilement commence il apparaît soudainement dans les DOM et les calculs va bananes. J'ai fondamentalement juste changé le CSS de la classe de colonne, alors essayez et exécutez le code ci-dessous pour voir si cela fonctionne comme vous le souhaitez. J'ai également supprimé le délai sur la classe de colonne.

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

Source

2017-09-20 01:18:31 LPL

Afficher l'image dans le défilement vers le bas javascript

Répondre

Questions connexes