Glisser des images vers l'intérieur de différentes directions

Question

Je voudrais avoir la première diapositive d'image de gauche à droite. La deuxième image glisse de gauche à droite et la troisième image va du bas vers le haut. J'ai réussi à faire glisser la première image de gauche à droite avec les réponses que j'ai trouvées ici sur stackoverflow. Mais quand j'ai modifié le script & pour les autres images, elles ne glissent pas. Je ne suis pas si bien informé en javascript.

$(document).ready(function() { 
 
    function animateImgs() { 
 
    $('ul.slide1 li:not(.visible)').first().animate({ 
 
     'margin-right': '500px' 
 
    }, 2000, function() { 
 
     $(this).addClass('visible'); 
 
     animateImgs(); 
 
    }); 
 
    } 
 
    animateImgs(); 
 
});

.content { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    top: 0; 
 
    left: 0; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid #000; 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
} 
 

 
.img1 { 
 
    max-width: 300px; 
 
    max-height: 300px; 
 
    z-index: 2; 
 
} 
 

 
.img2 { 
 
    max-width: 260px; 
 
    max-height: 260px; 
 
    z-index: 3; 
 
    left: 200px; 
 
    top: 100px; 
 
} 
 

 
.img3 { 
 
    max-width: 200px; 
 
    max-height: 200px; 
 
    z-index: 4; 
 
    left: 65px; 
 
    top: 235px; 
 
} 
 

 

 
/* -------------------------------------------------------------------- */ 
 

 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
ul.slide1 li { 
 
    float: right; 
 
    margin: 0 10px 0 0; 
 
    margin-right: 9999px; 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <ul class="slide1"> 
 
    <li> 
 
     <img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" class="img1 slideLeft" /> 
 
    </li> 
 
    </ul> 
 
    <img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" class="img2 slideRight" /> 
 
    <ul class="slide3"> 
 
    <li> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" class="img3 slideUp" /> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

Étapes:

• définir un élément de conteneur avec la classe slideContent
• l'intérieur du récipient définissent des éléments de glissement avec la classe slide
• Spécifier direction de glissement pour faire glisser les éléments avec soit slideUp, slideDown, slideLeft ou slideRight
• Spécifier data-margin pour placer l'élément dans le récipient en la glissant

ne définissent pas suivant dans CSS (utiliser à la place data-margin attribut dans l'élément coulissant):

margin-bottom pour l'élément slideUp

margin-top pour slideDown élément

margin-right pour slideLeft élément

margin-left pour slideRight élément

$(document).ready(function() { 
 

 
    function animateImgs() { 
 
    // Animation duration 
 
    var duration = 200; 
 

 
    // Get element reference needs to be shown 
 
    var el = $('.slideContent .slide:not(.visible)').first(); 
 

 
    if (el.length === 0) { 
 
     console.log('No more elements found'); 
 
     return; 
 
    } 
 

 
    // Read the margin value 
 
    var marginValue = el.attr('data-margin'); 
 

 
    // Direction 
 
    var marginDirection, 
 
     animationProp = {}; 
 

 
    // Animate now 
 
    if (el.hasClass('slideLeft')) { 
 
     marginDirection = 'margin-right'; 
 
    } else if (el.hasClass('slideRight')) { 
 
     marginDirection = 'margin-left'; 
 
    } else if (el.hasClass('slideUp')) { 
 
     marginDirection = 'margin-bottom' 
 
    } else if (el.hasClass('slideDown')) { 
 
     marginDirection = 'margin-top' 
 
    } 
 

 
    if (typeof marginDirection === 'undefined') { 
 
     // No valid animation direction defined 
 
     console.log('Invalid animation direction'); 
 
     return; 
 
    } 
 

 
    animationProp[marginDirection] = marginValue; 
 
    el.animate(animationProp, duration, function() { 
 
     $(this).addClass('visible'); 
 
     animateImgs(); 
 
    }); 
 
    } 
 

 
    animateImgs(); 
 

 
});

.slideContent { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    top: 0; 
 
    left: 0; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid #000; 
 
    overflow: hidden; 
 
} 
 

 
.slideContent .slide { 
 
    position: absolute; 
 
} 
 

 
.slideContent .slideLeft { 
 
    right: -100% 
 
} 
 

 
.slideContent .slideRight { 
 
    left: -100% 
 
} 
 

 
.slideContent .slideUp { 
 
    bottom: -100% 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
} 
 

 
.img1 { 
 
    max-width: 300px; 
 
    max-height: 300px; 
 
} 
 

 
.img2 { 
 
    max-width: 260px; 
 
    max-height: 260px; 
 
    top: 100px; 
 
} 
 

 
.img3 { 
 
    max-width: 200px; 
 
    max-height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="slideContent"> 
 
    <img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" data-margin="500px" class="img1 slide slideLeft" /> 
 
    <img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" data-margin="600px" class="img2 slide slideRight" /> 
 
    <img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" data-margin="600px" class="img3 slide slideUp" /> 
 
</div>