Collective #123

Inspirational Website of the Week: Over the Hills Dive into this innovative digital experience that was made with the finest web technologies. Our pick this week. Get inspired Smarty Pins A fantastic Google Maps game that will test your geo knowledge. Check it out Structuring, Grouping, and Referencing in SVG Learn about the SVG <g>, <use>, <defs> and <symbol> elements in this great article by Sara Soueidan. Read it Intense Images A great JavaScript library for an undistracted fullscreen image view with smooth panning. Made by Tim Holman. Check it out Advertisement Google I/O 2014 – Videos All the Google I/O 2014 videos in one place. Check it out Mobile UI Design Patterns 2014 Learn about all the important mobile UI design patterns in this free e-book by Chris Banks. Check it out Star Wars – Long Shadow Flat Design Icons (PNG) Amazing flat-style Star Wars characters illustrated by Filipe Carvalho. Get it Free Font: Anders A creative geometric font by Tom Anders Watkins. Get it Web Components and concepts, ShadowDOM, imports, templates, custom elements Learn about Web Components and how to actually build them in this great article by Todd Motto. Read it Select or Die A jQuery plugin for customizing the style of the <select> element. Check it out Buddha Line Icons Complete (PSD, PNG) A fantastic set of 100 beautifully designed line icons by Pixel Buddha. Get it Inspecting Yosemite’s Icons Nick Keppol takes a closer look at those new Yosemite icons and provides a grid template to start designing your own. Read it 3D CSS Typography A beautiful 3D typography pen by Noah Blon. Check...

Collective #120

Inspirational Website of the Week: Sismo Design, studio de design et innovation A fantastic experience full of well-planned effects and a brilliant color scheme. Our pick this week. Get inspired Outdated Browser A really nice project by Büro that gives users an incentive to update their outdated browser. Check it out Odyssey.js A mind-blowing library to help journalists, bloggers, and other people on the web publish stories that combine narratives with maps and map interactions. Made by CartoDB. Check it out Everything You Need to Know About the CSS will-change Property An insightful article by Sara Soueidan on the new “will-change” property — a property that will help us write performance-optimized code. Read it Advertisement Type Sample A great tool for identifying and sampling web fonts. Check it out bounce.js A very useful tool for rapidly creating CSS3 powered animations for elements. Made by Joel Besada. Check it out Sable Kit Free (AI, EPS, PNG) A great freebie with some creative elements for your next design, by PixelBuddha. Get it Building a responsive SVG map An excellent article by BBC News developer Tian Yuan on how to create responsive SVG maps for data driven visual components as part of the 2014 local and european elections. Check it out 100 Free Icons (PSD, AI, Webfont) One hundred excellent vector based icons designed by Piotr Makarewicz. Get it Starnight HTML5/CSS3 Website Template A stunning website template coded by talented Peter Finlan and designed by Blaz Robar. Get it Emulators written in JavaScript A super-cool compilation of emulators written in JavaScript by Frederic Cambus. Check it out Boba.js Boba.js is a small...

How to Create a Tiled Background Slideshow

View demo Download source Today we’d like to show you how to recreate the background image slideshow seen on the stunning website of Serge Thoroval’s Atelier that was coded and designed by talented Jean-Christophe Suzanne and Jonathan Da Costa. If you haven’t seen the website, you should definitely go and check it out; it’s full of interesting and creative effects. The slideshow that we are recreating today, is made up of four tiles that move individually, making the image split while scaling up the new image. This combines into a really nice effect which we will re-implement today using 3D transforms, transitions and animations. In addition to that effect we’ll also add two more variations. The aim that we want to keep in mind, is to achieve a super-smooth effect experience. Note that we’ll be using very modern CSS properties, so the desired effect will only work in the newest browser versions. The images used in the demos are made with really great mobile phone PSD mockups from the team of Mockuuups.com. You can find the free iPhone 5S Mockups in this Dribbble post by Tomas Jasovsky. Let’s get started with the markup. The Markup For the slideshow we will need a special structure that will allow us to play with four different tiles, all containing the same image but with different positioning. We need to make sure that everything stretches over the full viewport since this is a “fullscreen” slideshow. We’ll define a simple initial structure that will allow us to specify which images will be visible in each panel (or slide) and then we’ll create our repeated...

Collective #113

Inspirational Website of the Week: Aquatilis Expedition The website of the Aquatilis Expedition is a beautifully designed experience that transmits the excitement and feel of this amazing scientific journey. Check out Tim Holman’s pen of the background particles. Get inspired CSS True Titles A very interesting CSS experiment by Tyler Gaw of a title sequence à la True Detective using CSS masking. Check it out Sorting An amazing project for visualizing and comparing sorting algorithms. This is simply fantastic for understanding the workings of sorting algorithms. Check it out Isomer Isomer by Jordan Scales is an easy-to-use graphics library for drawing isometric scenes. Check it out Advertisement Captain Icon (EPS, PSD, PNG, SVG, Web Font) Captain Icon is a huge set of thoughtfully designed vector icons by Mario del Valle. Get it Inline SVG vs Icon Fonts Chris Coyier compares using inline SVG to using icon fonts and concludes that SVG is a winner if older browsers don’t need to be supported. Check it out Everyone Deserves Great Design Ehsan Noursalehi writes about a new mindset for product designers and how to make products that matter. Read it Project Parfait Project Parfait is a new beta service by Adobe that allows you to extract everything you need from PSD comps for further coding. Check it out Politespace Politespace by Filament Group let’s you add spaces to numeric form values to increase readability, for example, when asking for credit card or phone numbers. Check it out Hutt Hutt is a dead-simple instant video chat in the browser. You just have to share the link and others can join. Check it...

Page Loading Effects

View demo Download source If you have visited the brilliantly designed websites of Nicolas Zezuka and Active Theory you might have noticed the slick loading animations that happen before new content is displayed. This kind of loading style is quite trendy lately and we wanted to give you some inspiration. The idea is to animate a shape into the viewport and show an activity indicator. When the new content is loaded, the shape will animate back to reveal the page. We’ll use animated SVGs with Snap.svg for the effects because this allows us to create complex shapes and interesting morphing transitions. Please also note that the examples only serve for your inspiration. We haven’t implemented any fallbacks and we “fake” the dynamic loading of new content. Also note that we are animating SVGs and pseudo-elements which might not work well in some browsers. The way we show the loading overlay is by defining an animation on a path that we define in the following SVG: <div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none"> <path d="M 0,70 80,60 80,80 0,80 0,70"/> </svg> </div><!-- /pageload-overlay --> We define an initial path that is not visible in the viewport inside of the SVG and a opening and closing path in data attributes on the pageload-overlay division. As you can see, we are using a small viewBox but we stretch the drawing to 100% of the window width and height while not preserving the aspect ratio. If we don’t have a closing path defined, we’ll animate back...