Collective #138

Inspirational Website of the Week: Impossible Bureau Wonderfully smooth animations with excellent typography make this agency’s website our pick of the week. Get inspired Hotjar Insights Hotjar Insights is a new and easy way to understand your web and mobile site visitors. You can request free early access for the platform. Check it out Palettab Palletab is a Chrome extension which uses Google fonts and ColourLovers palettes to create inspirational combinations whenever you open a new tab. Made by Tim Holman and Claudio Guglieri. Check it out Advertisement A Guide to SVG Animations (SMIL) A fantastic compendium of everything you need to know about SVG animations in SMIL. By Sara Soueidan. Read it ProgressBar.js Beautiful and responsive progress bars with animated SVG paths. You can use built-in shapes or create your own paths. Made by Kimmo Brunfeldt. Check it out Lazysizes Lazysizes is a fast and jank-free lazy loader for images (including responsive images), iframes and scripts/widgets without any dependency. Made by Alexander Farkas. Check it out Free Font: Curely Konstantine Studio’s cute and playful handmade decorative typeface. Get it Tools Tools Tools Designer tools on acid? An epic audio-visual instrument of animated loops for designer tool actions. Check it out Touristic Icons (100 Icons, PNG, SVG) A beautiful icon set related to tourism by Freepik on Smashing Magazine. Get it Aerial Bold: Kickstart the Planetary Search for Letterforms! A very creative project on Kickstarter by Benedikt Groß and Joey Lee: Aerial Bold is the first map and typeface of the earth which will be composed of the earth’s alphabet shapes. Check it out CSS-Only Solution For UI Tracking...

Collective #135

Inspirational Website of the Week: Dropbox – Guide The guide to Dropbox for users and admins has a very interesting layout and a lovely color scheme. Our pick for this week’s Collective. Get inspired Don’t use <picture> (most of the time) Jason Grigsby from Cloud Four explains why you won’t need the <picture> element for most responsive images. Read it Awesome SVG A huge collection of useful articles and resources all around SVG. Collected by Willian Justen. Check it out Ready to use SVG icons for the web Baptiste Briel’s project makes using SVG icons as easy as copy and paste. Get it Advertisement melchior.js A Chainable Module Definition (CMD) dependency loader for JavaScript made by Dmitri Voronianski. Check it out Sci-Fi, Frustrations, Flash And Forms: The Typeform Story Founder of Typeform, David Okuniev, shares his interesting story of re-imagining the form. Check it out A Scalable CSS Reading List A list of things to read or watch that address these two questions: What is scalable CSS? and How do we create scalable CSS? Collected by David Clark. Check it out Creating a Collection of CSS3 Animated Pre-loaders A great tutorial on how to create CSS animated preloaders by Aaron Lumsden. Check it out Advanced Debugging Techniques with Chrome Learn some really useful tips on how to debug with the Chome DevTools. Paul’s slides are also available here. Watch it Creating Your First Node.js Command-line Application Martin Angelov shows how to create a Node.js command-line utility that users can start on their machine and make any folder available on the local network. Check it out Neural Network A very...

Collective #133

Inspirational Website of the Week: I Will What I Want An absolutely glorious use case of Three.js. We love the creative concept behind this campaign. Definitely our pick this week. Get inspired Using SVG to shrink your PNGs Get the compression of a JPEG and keep the transparency of a PNG? Peter Hrynkow shares this brilliant technique that uses SVG awesomeness. Check it out Accessible HTML5 Video Player A lightweight HTML5 video player which includes support for captions and screen reader accessibility. Made by the PayPal Accessibility Team. Check it out Advertisement Computing CSS matrix3d transforms Franklin Ta explains how to compute CSS transforms to fit an object into 3D perspective. Check it out Jenga A fantastic use case of Physijs, the Physics plugin for Three.js. By Chandler Prall. Check it out Free Font: Voga Voga is a condensed modern Didone typeface designed by Charles Daoud. The regular weight is for free. Get it Improving Smashing Magazine’s Performance: A Case Study A very insightful article on Smashing Magazine’s performance challenge by Vitaly Friedman. Read it Shout Shout is a self-hosted web IRC client made by Mattias Erming. Check it out Bézier Clock Jack Frigaard’s first experiment with Processing.js. Check it out Built-in Browser Support for Responsive Images Pearl Chen explains the <picture> element and how it will work as a true responsive image solution. Read it Performance Tooling Today Stefan Judis’ collection of development performance tools. Check it out An Intro to SVG Animation with SMIL Noah Blon’s introduction to SVG SMIL animations with demos. Check it out Why Google is Hurrying the Web to Kill SHA-1 Read how...

Collective #132

Inspirational Website of the Week: Invictus Award Season 2 Elegance and modernity paired with smart effects made Invictus Award Season 2 our favorite this week. Get inspired Introducing AM – Attribute Modules for CSS Glen Maddern introduces this interesting new concept of Attribute Modules (or AM) for CSS. Read it Ideal Image Slider A modern “no-bloat” image slider that is extensible. Made by Gilbert Pellegrom. Check it out Advertisement Tethr A wonderful and free iOS design kit for mobile prototyping crafted by UI8 for InVision. Get it Testing Mobile: Emulators, Simulators And Remote Debugging Jon Raasch explores some emulators, simulators and remote debugging tools for quick mobile site testing. Read it CommonMark CommonMark is a great proposal for a standard, unambiguous syntax specification for Markdown. Check it out Nice Portfolio A collection of the best design portfolios on the web. Curated by Kim Walker. Check it out React Components If you are working with the React library, you’ll find this searchable database of components very helpful. Check it out Regular Regular is a “string-based living template engine” aiming to help you create interactive components. Built by NetEase. Check it out Add Rules to Stylesheets with JavaScript David Walsh shows how to dynamically add and remove styles directly to a stylesheet with JavaScript. Check it out JavaScript Memory Management Masterclass In our last Collective we mentioned Addy Osmani’s slides on memory management. Now you can see the video from his great talk about finding and fixing memory leaks in JavaScript. Watch it Instacam With Instacam you can create Canvas videos with CSS filters through the WebRTC API. Made by Xavier...

Page Preloading Effect

View demo Download source Today we want to show you how to create a very simple page preloading effect with CSS animations, SVG and JavaScript. For websites, where it’s crucial to load all or part of the assets, these kind of preloader screens can be a creative way to make waiting a bit less boring for the visitor. The idea for this tutorial is based on the beautiful preloading effect seen on the website of Fontface Ninja. Initially, the logo and a circular progress element slide up and when the loader finishes its progress animation, i.e. the page assets are loaded, the whole “header” moves up while the page elements are revealed with yet another animation. The sliding logo with its color change makes the icing on the cake. In this tutorial we will re-create the effect seen on Fontface Ninja with some adjustments and a second demo with slightly different effects. For the logo and the circular progress element we will use inline SVGs, so that we can style their paths in our CSS. We’ll create a little script for the stroke animation of the SVG loading element and then we’ll control the page animations with classes that we add to the main container. Please note that we’ll be using CSS animations and CSS 3D transforms, so this will only work as intended in browsers that support them. So, let’s get started! The Markup Let’s wrap a header and the main content division into a container. We have to keep in mind that we want to control anything that happens to the initial view and the content with...