Portfolio jquery - portfolio grid. Une petite application assez simple mais qui peut se révéler bien utile pour présenter ses services ou réalisations dans un portfolio jquery (tutoriel original disponible sur le site codrop.com). Voir la démo Télécharger le fichier zip 1) Le code HTML 5 <ul id="og-grid"><li><a href="" data-largesrc="images/1.jpg" data-title="Ici un titre" data-description="Ici une description"><img src="images/1.jpg" width="250" alt=""/></a></li><li><a href="" data-largesrc="images/1.jpg" data-title="Ici un titre" data-description="Ici une description"><img src="images/1.jpg" width="250" alt=""/></a></li><li> -- etc -- </li></ul> Une liste ul li assez basique dans laquelle nous allons insérer 2 attributs.
Un ‘data-titre’ pour le titre et un ‘data-description’ pour la description que nous afficherons lorsque l’on cliquera sur la vignette. Le code généré par le javascript 2) Un aperçu côté CSS Nous ne mettons ici qu’une partie du code nécessaire (tout le code est disponible dans le fichier zip téléchargeable) Animations for Thumbnail Grids. There are many parts of a website where we can apply nice transitions to make things more interesting. Images are certainly great entities for playing with fancy effects and today we'd like to show you some inspiration for thumbnail effects using CSS animations.
View demo Download source Today we’d like to share some fancy animations for thumbnails in a grid with you. There are many possibilities when it comes to these kind of effects, but not all of them fit well when applied to multiple items, like a grid of images. There is not much space and we have to consider the stacking order of the items for the effects to look nice. An interesting thing is that we can play with delays, intensifying the viewing pleasure of the whole thing. The beautiful illustrations used in the demos are by talented Isaac Montemayor.
Please note that we’ve created a dummy script for navigating through the images. In the demos we use an unordered list with images wrapped in an anchor. Hover Effect Ideas. Calendario: A Flexible Calendar Plugin. Loading Effects for Grid Items with CSS Animations. Some inspiration for loading effects of grid items using CSS animations.
View demo Download source Today we’d like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we’d like to give you some inspiration. Since Masonry is a popular library for laying out grids, we thought it might be a good idea to use it in this demo.
Please note: this only works as intended in browsers that support the respective CSS properties. The beautiful illustrations featured in the demos are by Erika Mackley. So, we’ll use an unordered list for the grid and we’ll simply add the respective effect class: The idea is to add a class to the items already shown in the viewport when we load the page. There are a couple of things that we can set. Note that we had to remove the transitions for Masonry so that there’s no conflict with the animations. Inspiration for Inline Anchor Styles. Some inspiration for creative and modern inline anchor styles and hover effects using different techniques like pseudo-element transitions and SVGs. View demo Download source Today we have some more inspiration for you! This time we’ve thought about some creative and modern styles for inline anchors, i.e. links that are in the text flow. These anchors are somewhat restricted because they are surrounded by other text, and so we can’t just apply any kind of layout or effect to them due to their limited surrounding space.
Please note that this is for your inspiration, so make sure to view it with a state-of-the-art browsers. Sadly, Firefox does strange things to text when it’s transitioned (especially when using scale), so you might see some flickering there. For most of the styles, we just use a normal anchor and then we do something to its pseudo-elements ::before and ::after. For achieving the desired stacking of the anchors and their pseudo-elements, we need to set some general styles: Inspiration for Article Intro Effects. Some inspiration for effects applied to title headers of articles with a fullscreen image. The idea is to show some creative transition when continuing to the article body. View demo Download source Today we want to share some inspiration for article intro effects with you.
You have surely seen some interesting article headers, usually containing a fullscreen image, that have some sort of intro effect, i.e. where some creative transition happens when scrolling or when clicking on a button to continue. We wanted to explore the effect possibilities with fullscreen images and making something happen when continuing to the article body. There are many potentially cool effects and today we want to share just a couple of ideas with you. One really nice effect that we tried to imitate, is the one seen on Jam3 when choosing a project. The images in the demos are from amazing Unsplash, a fantastic place to find high-quality public domain photos.