はてなブックマーク

Image Mask Effect An immersive transition effect powered by image masks and CSS transforms. We’ve been publishing in our library some nice mask effects powered by SVG properties. This time we took advantage of the PNG transparencies to zoom through the mask layer, into a project background image. If you want to change the color of the .png masks, you can easily do it in Photoshop (or any other gra

Schedule Template A simple template that lets you display events on a timeline, as well as organize them in groups (week days, conference rooms etc…) We’ve come across this web component many times: when we check the schedule of a conference, or the timetable of the classes of our gym. From a web designer perspective, it is handy to have a simple, responsive template to use if you ever need to cre

Stripe.Com Navigation A morphing dropdown that animates according to the size of its content. A few weeks ago stripe.com launched a new website design. It looks awesome. One thing we dig in particular is the morphing navigation dropdown: instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to mak

Clipped SVG Slider A simple slider, with morphing preview images animated using SVG properties. Here on CodyHouse we’ve published a lot of SVG experiments! What’s really powerful with SVG is the possibility to combine path animations with the clipPath element. Add a touch of CSS transformations and you got a spicy recipe! Inspiration: Music player animation by Veronika Lykova. Tool used: Snap.svg

Auto-Hiding Navigation A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up. Auto-hiding navigations have been around for quite some time now, in particular on mobile devices. The idea behind this UX pattern is simple yet efficient: we want the navigation to be easy to reach all the time, so we stick it on top. However, we auto-hide it when t

Radial SVG Slider A simple, responsive slider, with a radial transition effect powered by SVG clipPath and mask elements. While browsing Dribbble in search of inspiration, we came across this interesting animation created by Tokito. The main idea is to show a little preview of the following slide, then scale it up when the user interacts with it. In order to create this effect, SVG clipping and ma

Animated Transition Effects A library of animated transition effects, powered by CSS Animations. A few weeks ago we published a tutorial about how to create an Ink Transition effect using a PNG sprite and the steps() CSS timing function. That resource has since become one of the most popular here on CodyHouse, therefore we decided to team up with talented motion designer Gabriele Mellera to create

360 Degrees Product Viewer A simple, interactive resource that can be used to provide a virtual tour of your product. In e-commerce design, one of the main goals is to fill the gap between product and user. This is particularly relevant for high-priced goods. Hence, the importance to integrate interactive tools, to provide the user a way to “virtually experience” the product. Today’s resource is a

Ink Transition Effect An ink bleed transition effect, powered by CSS animations. I recently came across a couple of websites using ink bleeds as transition effects. A great example is the Sevenhills website. At first I thought they were using a HTML canvas powered technique (for allowing transparency), then I checked the source code and found out they weren’t using a video, but a PNG image sprite.

Products Comparison Table A responsive table to compare and filter through multiple products. If you’re developing an online store with plenty of products, in all likelihood you’ve been asked to work on this feature: the comparison table. The standard approach, that works in most cases, is to use a simple HTML table element. If you have 6+ products to compare, though, things can get tricky, partic

Sliding Panels Template A simple portfolio template, with project preview images that slide out to reveal the selected project. We’re not new to experimenting with portfolio templates. This time, we’ve been playing around with the idea of moving blocks of content as a way to transition from the main/gallery page to the project page. All panels move along the y-axis (x-axis on smaller devices), and

Advanced Search Form A search form with advanced filtering options and quick link suggestions. Getting the search experience right is never an easy task. The starting point is always the search form, which, in most cases, consists only of an input field plus a submit button. The search results page can be tricky to design, in particular if you have different content categories. For big websites an

Vertical Fixed Navigation #2 A smart vertical navigation, with round indicators that turn into labelled icons when the user interacts with them. Our first concept of vertical fixed navigation is one of our most popular resources. This time, we tried to push this concept a little further. The basic idea behind putting round indicators on the side of a web page, is to give a hint to the user about t

Presentation Slideshow A simple presentation template in CSS and jQuery. Although presentations are usually created using native apps, we decided to challenge ourselves and design a presentation template for the browser. It wasn’t an easy task, for the way you interact with a presentation slideshow is different compared to how you scroll through a website: each unit/slide must be isolated, so that

Horizontal Timeline An easy to customize, horizontal timeline powered by CSS and JavaScript. Our vertical timeline is so far one of the most popular resources on CodyHouse. Many of you asked us to include a horizontal timeline as well. Here it is! Building a horizontal timeline was a bit tricky, because you can’t rely on the vertical (more intuitive) scrolling behaviour. We decided to separate tim

Stretchy Navigation A rounded navigation trigger that stretches on click/tap to reveal the navigation items. While surfing some Dribbble shots, we came across this nice shopping list concept by Hila Peleg, which inspired today’s resource. We decided to apply a similar idea to a stretching navigation, and create 3 different user cases where this snippet would be useful: 1) fixed navigation, 2) add

Animated Intro Section A collection of fancy text effects, to animate the tagline and action buttons of your website intro section. Animations in web design are often used to drive the user’s focus to a specific section. One section  you want to make sure to highlight is the main tagline, with the action buttons. A good use of typography and a wise choice of colors should do the trick. However we

Project Cards Template A portfolio template with expandable projects and a full-page navigation inspired by Primer app. Today’s resource is inspired by the Primer app, which makes a great use of cards and motion throughout its design. We applied similar effects to a portfolio template, with expandable items and a bold, full-page navigation. Images: Unsplash Creating the structure The HTML structur

Multi-Level Accordion Menu A simple CSS accordion menu with support for sub level items. Today's resource is a handy accordion menu with support for groups/subitems. It works with CSS only, using the :checked pseudo-class selector on the checkboxes input elements. However we included a version with JavaScript as well, in case you prefer a subtle animation compared to the instant default effect. Yo

Responsive Sidebar Navigation An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas. Building responsive navigations for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today's snippet! Our Sidebar navigation can make you

Animated SVG Image Slider A simple, responsive carousel with animated SVG paths used as transition effects. Last week we’ve been experimenting with SVG paths to animate the content of a full-page hero slider. Today we use the same technique to create a responsive carousel. This time, though, we used SVG paths to directly clip the slide images, with no need to show an intermediate layer. Images: Un