background preloader

Perspective Page View Navigation

Perspective Page View Navigation
Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects. View demo Download source Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are shown with animations. Please note that this is highly experimental, so let us know if you find any bugs or problems. For the general effect to work, we need to wrap our page into a perspective wrapper. When we trigger the effect, we’ll need to change the position and overflow of the divisions to just show the current view. Depending on which effect we have set as a class to the perspective wrapper, we’ll animate the container and the menu items once we click the trigger button. There are two styles for the menus which is a horizontal and a vertical one. Airbnb Effect: Related:  HTML5 - CSS3CodropsEffetti menu

Animated Border Menus A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps. View demo Download source The other day I saw a really nice concept of a menu on the UI8 site. In this tutorial we will be going through demo 2 where the menu icon is in the top left corner and the border is thickest on the left side. Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. So, let’s get started! The Markup The HTML structure for our menu will consist of a nav element that will contain a trigger anchor and an unordered list with the menu items which will consist of icons: Let’s style this. The CSS Note that the CSS will not contain any vendor prefixes, but you will find them in the files. And let’s set some styles for the body and the main container: Now we have to use a little trick. When we open the menu, this element will have full height: The JavaScript

"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”.

Making a CSS3 Animated Menu Martin Angelov In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements. The HTML The first step is to define the HTML backbone of the website. index.html <! You can notice that we are including a stylesheet from Google APIs. In the body of the document, we have the header, nav and footer HTML5 tags, which divide the page into three sections with semantic value. The unordered list has a fancyNav class applied to it, which we will be using to limit the effect of the CSS styles that we will be writing in a moment. So lets move on to the CSS styles. CSS3 Animated Navigation Menu The CSS You might find it surprising that the navigation menu we are building does not use any images (except for the home icon – a transparent png). The Menu Explained To Wrap Up

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.