"Look Inside" Book Preview with BookBlock A "look inside" book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation. View demo Download source There is something really fascinating about (real) books. Although we live in times where everything is digitalized by now, there is really nothing like picking up a real book and browsing through the pages. Please note that this is just a proof-of-concept and might not work properly in older browsers. For the book grid we use figures and this is how it looks: When we click on “view details”, we rotate the book in 3D and move it to the left side, allowing for the details to slide in from the right: Once “look inside” is clicked we perform a series of animations on the book, its cover and the BookBlock. Credits I hope you find this interesting and inspiring!
SVG Drawing Animation A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them. View demo Download source SVG is finally becoming a more utilized and fun website component. It’s really powerful and there are many creative possibilities for fun effects on a website using SVG. Today we’d like to share two experimental concepts with you that make use of stroke animations, made popular by the animations on the PlayStation 4 and Xbox One review sites. So, what concepts did we explore? The beautiful illustrations of the devices are by Pixeden and you can find the PSD files here: The traced SVG line drawings of these illustrations were carefully crafted by talented Emanuel Serbanoiu. The first demo is the line drawing animation with the illustration fade-in: The second demo is the line drawing animation with the website fade in: We hope you like the effects and find them inspiring!
Fullscreen Overlay Effects Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays. View demo Download source Today we’d like to share some inspiration on fullscreen overlay styles and effects with you. Like with any UI component, there are new trends and styles emerging and we’d like to try out some subtle, as well as fancy effects for overlays. The special thing about these overlays is that they don’t have a fixed size like modals but they occupy all the screen, so when creating effects one has to take that into account and not overdo it. Note that these effects were created with modern browsers in mind so they might not show the desired effect in older ones. An example for a subtle, yet interesting effect is the first one which got inspired by the same effect on Huge. For some of the SVG examples we use Snap.svg to morph a path into another one.
Off-Canvas Menu Effects Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. View demo Download source Today we’d like to share a couple of styles and effects for off-canvas menus. The off-canvas sidebar is widely used and we have already created some effect inspiration before. We use CSS transitions, CSS animations created with bounce.js and animated SVGs with the help of Snap.svg. Please note that the effects serve as inspiration and will work (best) in modern browsers. Let’s take a look at some of the styles. This first demo is inspired by the Dribbble shot Old Designspiration Menu Concept One by Michael Martinho. The idea behind the corner box effect is to translate an off-canvas box into the viewport while moving the content to the opposite corner, too, creating a window-like effect. Following the simple corner box, we can think of another “layer” that will move on top of the previous box and that will make the content translate another “step”.
Vertical Timeline A responsive vertical timeline layout with icons and example media queries. View demo Download source This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list. The HTML <ul class="cbp_tmtimeline"><li><time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>4/10/13</span><span>18:30</span></time><div class="cbp_tmicon cbp_tmicon-phone"></div><div class="cbp_tmlabel"><h2>Ricebean black-eyed pea</h2><p>Winter purslane... The CSS
A Collection of Separator Styles A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind. View demo Download source Today we’d like to share some separator styles with you. SVG is used in the cases where we cannot simply use a pseudo-element that is nicely responsive, like the half circle shape. And now, dig in, scroll and get inspired! An example for a separator style using pseudo-elements is the following double diagonal representing a flat shadow: Another example is the inclined zig zag pattern (up and down) made with a linear gradient: …or the folded corner that uses diagonal gradients to simulate the triangles: For some styles we use SVG, like the big triangle: By setting preserveAspectRatio="none" and a width of 100%, we make the SVG graphic fluid to fit into the whole width without resizing its height.
UI Animation and UX: A Not-So-Secret Friendship Using the words “animation” and “the web” together tends to conjure up memories of frantic searches for the “skip intro” button to save ourselves from a terrible sensory assault. Animation on the web has hit some pretty sad lows, there’s no arguing that. But adding motion to our work can be meaningful and functional—when we find the right circumstances. Article Continues Below When used as more than just a subtle design detail, animation can provide cues, guide the eye, and soften the sometimes-hard edges of web interactions. It can improve the user experience. A CSS animation refresher#section1 This article uses CSS animations and transitions in the associated examples. CSS animations are what we most closely associate with traditional animation. CSS also has transitions—which, as it happens, can also be used to make things move. In practice, animations and transitions are often used together, so I’ll use the term animation in a general sense to indicate them both. 1. 2. 3.