Comment concevoir un portfolio avec un effet de slide en jquery ?
Voici un codePen d’un exemple possible de portfolio pour montrer des images, des vidéos ou tout autre type de contenu. Les images sont disposées en colonne grâce aux propriétés flex. Au clic sur une image, ici une vidéo et un texte associé apparaissent en slideDown sous la vignette, tout en repoussant les images de la rangée inférieure.
Le principe est de calculer la hauteur souhaitée du bloc en jquery, d’y ajouter un margin-bottom, le tout de manière dynamique, de façon à rendre le tout responsive. Pour un meilleur aperçu, ouvrez le CodePen en grand ! Le code jQuery qui peut largement être amélioré reste simple. J’utilise aussi la fonction scrollTop pour toujours garder la fenêtre visible dans le viewport.
See the Pen
Html Videos Elements (Slide css ) by blogob (@yuyazz)
on CodePen.