Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.
Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.
Making a web design with contrasty colors will allow for a better focus on certain areas of a web site. With a minimal color scheme, more contrast can be achieved and with the right complementary color, a unique and impactful visual impression is given.
Today we want to share a fancy content rotator with you. It shows some image with a headline and sub-headline in each slide and allows navigating through the slides using the thumbnails that also contain a headline. Hiding the thumbnails will reveal a scrollable text container and the navigation arrows will move up so that one can navigate to the previous or next slides.
Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice will open on slide.
Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.
Today we want to share another jQuery menu with you. This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as size of the image, the hover effect and custom default states.
Today we want to share some neat grid navigation effects using jQuery. In our examples we will show you ten ways how to navigate through a set of thumbnails. We’ll take a look at some of the possibilities and how to apply the effect.
Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make […]
Today we have a neat little effect for you. We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. […]
In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each […]
Today we want to share a little website experiment with you. The theme for today’s template is a restaurant website which will include an image gallery for the menu and […]
Today we want to share a simple website template with you. The template will show some discography or music albums in a rounded fashion, rotating the albums when clicking on […]
Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and […]
In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content […]
Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information […]
The use of the parallax effect or parallax scrolling effect in websites can add a nice three dimensional depth illusion to the design and make the visit very interesting to […]
Image sliders and sideshows have become an essential element in web design. They are a great way to display information and visual content in an interesting way. From the classical […]
Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of certain elements in […]