articles on

Shine - Javascript Library for Pretty Shadows

Shine - Javascript Library for Pretty Shadows

There are so many amazing things that can be done with Javascript, pretty every day there's a new library or script to create effects, animations and improve design in general. Shine is a great example, it's as their slogan says a library for pretty shadows. The cool thing is that the shadows are dynamic and the position can be trigger by mouse location or the motion sensors in your mobile devices. Here are some features Dynamic light positions Customizable shadows Uses text or box shadows based on content Works in browsers that support textShadow or boxShadow and auto-prefixes if necessary Here's an example For more information and visit http://bigspaceship.github.io/shine.js/

Basic Animations in CSS and Javascript for Prototypes

Basic Animations in CSS and Javascript for Prototypes

Motion design is getting more important everyday when it comes to design interfaces that engage with the user both functionally and emotionally. Because of this, I started practicing with Javascript and jQuery to create basic animations for my prototypes. One of the most common animations comes into play when you want to build a list or animate items in a chain. To illustrate that today I share a simple technique I use for my prototypes. For this little tutorial we will play with some HTML, CSS and Javascript. The whole process won't take more than 30 minutes. Step 1 Start a new HTML document and add some elements, one "Section" and then a list "UL" with a few objects "LI" <!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> </ul> </section> </body> </html> Step 2 Now lets import jQuery and jQuery Transit plugin to help us animate the list. <!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" ></script> <style> body{ padding: 0; margin: 0; background: #000; } section{ max-width: 1024px; min-height: 960px; background: url(http://wpuploads.appadvice.com/wp-content/uploads/2013/10/24.png) center center; background-size: cover; margin: 0 auto; } ul, ul li{ margin:0; padding: 0; list-style-type: none; } ul { padding-top: 40px; } ul li{ background: #fff; margin: 0 11px 1px 11px; padding: 15px; } </style> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> </ul> </section> </body> </html> Step 3 - Animating the list To animate the list is pretty simple, the first and most important thing to do is to have a little script of what you want to animate. In this first case we will animate one LI at the time fading in and sliding down from the top. <script> $(function(){ $("ul li").each(function(i){ $(this).css({y:"-30px", opacity:0}).transition({y:"0", opacity:1, delay:200 * i},600,"ease"); }) }) </script> So what we are doing in that function is to find each "LI"strong> and then for each one we will set with CSS to move them "-30px"strong> in the Y axis (top) and change the opacity to 0. After that with jQuery Transition we will move it back to the original position. To make sure each one move at different time we will set a delay to 200 and multiply that by "i" (each element have their unique "i"). Step 4 - some 3D rotations <script> $(function(){ $("ul li").css({opacity:0}).each(function(i){ $(this).css({y:"150px", rotateX: "90deg", transformOrigin: 'center top'}).transition({perspective: '400px',y:"0", opacity:1, rotateX:"0deg", delay:200 * i},300, "ease"); }) }) </script> The only thing we added here was the rotateX and transformOrigin for the CSS and perspective and rotateX for the transition. You can play with these values to change the animation as well. Conclusion Below you can see a basic example of what you can do with simple Javascript. The best thing about these animations is that they use the GPU, that means they run very smooth in mobile devices and are perfect for mobile prototypes.   See the Pen uqnjH by Fabio Sasso (@abduzeedo) on CodePen  

Introduction to Mobile Prototyping with HTML, CSS and JavaScript

Introduction to Mobile Prototyping with HTML, CSS and JavaScript

If you are a designer in this day and age you are probably designing for handheld devices like smartphones and tablets. We live in a polarizing world where on one side we have native apps and on the other the web, with responsive sites and web apps. Designing in this environment requires understanding of the context you will be designing for, therefore, testing on devices. There are several ways to create prototypes, from paper to motion in After Effects. For me, basic HTML, CSS3 and JavaScript do the best job because they allow me to test on the phone with an incredible level of accuracy. In this post I will start sharing some tips on how to create basic HTML/CSS3/JS prototypes. The idea is to enable you to test your designs on phones, tablets or web. I will also assume that you know a little bit of HTML and CSS, but of course you can learn that online or doing the reverse engineer. So in this first post I will show you how to create a simple prototype with a few icons and basic transitions. You can then apply to your own designs. The coolest thing is that you can create a super smooth prototype with this simple technique. Introduction The first thing is to start an HTML document and make sure you have the structure done. For prototypes, the simplest way to create them is by having all screens you want to test in the same file, that way there won't be any lagging between screens. Remember, we are creating a prototype, not a web app. The way I organized my HTML is that every screen will use a "DIV" tag with an "ID" and a "CLASS='SC". That way I can use CSS to make them work the same way. For each screen I used the "HEADER" tag to create the header of the screen. Below is the full HTML file of the prototype. Prototype Back Screen 1 Back Screen 2 Back Screen 3 Back Screen 4 Back Screen 5 Back Screen 6 Back Screen 7 Step 2 For the icons, notice that I created a list using "UL" and "LI". Also notice that there are other classes like "LINK", "NONE", "slideup", "slideleft" and more. I will cover those in a few, but for now let's focus on the design of the screens and the icons. The first line you can see that I am reseting the CSS, that's an easy way to clear all properties and styles that browsers have. I am using the Eric Meyer's CSS Reset. You can find it at http://meyerweb.com/eric/tools/css/reset/ For the screens, this is the CSS: @import "reset.css"; html, body{ width: 100%; height: 100%; } body{ padding: 0; margin: 0; width: 100%; height: 100%; position: relative; } .sc{ width: 100%; height: 100%; position: absolute; display: none; z-index: 10; } .sc.selected{ display: block; z-index: 11; } Icons For the icons, we will use a basic "display:inline-block". We could have used the new and fancy flex model, however it doesn't work in Safari, so for now let's wait till iOS7. #home ul{ width: 100%; height: 100%; text-align: left; } #home ul li{ height: 72px; width: 72px; background: #fff; display: inline-block; margin: 22px 0 0 22px; border-radius: 6px;; } Screens Each screen will have a different color background. Below you can see the CSS. #home{ background: #333; } #screen1{ background: #2C3E50; } #screen2{ background: #E74C3C; } #screen3{ background: #3498DB; } #screen4{ background: #ECF0F1; } #screen5{ background: #2C3E50; } #screen6{ background: #E74C3C; } #screen7{ background: #3498DB; } jQuery Now it's time for the most important part, how to make things work. How to make the links open a different screen. To do that we will use Javascript with jQuery. We will use jQuery because it's easier for beginners to understand how Javascript work. To use jQuery we will have to make sure we are loading it in our HTML. To do that, use this code withing your "HEAD" tag. We are basically loading jQuery from its servers. Removing the 300ms lag Every time you click/tap something using a mobile phone, there will be a 300ms second if you use regular Javascript events like "onclick". To get rid of that there are some plugins online. The one we will use is based on Google Fast Button, but it's a jQuery version. You can read more about it at https://github.com/alexblack/google-fastbutton Download the ZIP file and copy the .js files to the folder of your HTML file. Then add these lines right after the previous "script" tags that you used load jQuery. Animations CSS animations are the best way to create silk smooth animations for mobile prototypes. You can create animations using the keyframe technique, however there's an amazing jQuery plugin that helps. The plugin is the jQuery Transit - CSS3 transitions and transformations by Ricard Cruz http://ricostacruz.com/. Same thing as before, let's load the plugin. Just add the code like the example below. Basic transition For the basic transition, that's hiding the current screen and showing the new one we will use CSS classes. Notice that theres a ".sc" and a ".sc.selected". For the basic ".sc" we have a "display:none", that means all screens will be hidden. Then for the one selected ".sc.selected" there's a "display:block". So basically, the idea is, the screen that's visible, it will have a class "selected". By removing the class and adding to another screen, we make a simple transition. Below you can see the code. $(document).ready(function() { $(".link").fastClick(function () { screen = "#" + $(this).attr("page-load"); if($(this).hasClass("none")){ $(".sc").removeClass("selected"); $(screen).addClass("selected"); } }) }) The code above is basically, when the user clicks on a tag with the class ".link" it will get the screen to show, that is in the "page-load" from the link. We will create a variable called "screen" to have this value, but we will add the "#" symbol, that is the one used to represent the "ID". If the link has a class "none" that is for different animations, we will basically remove the class "selected" to all ".sc" tags. Then we will add the class "selected" to the one we want to show. Slide from Right to Left To create a simple slide transition, we will pretty much follow the same idea, the only difference is that we will position the screen to load off the current viewport and then animate it in. Below you can see the code. if($(this).hasClass("slideleft")){ $(".selected").addClass("previous"); $(screen).css({x:$(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:"-" + $(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } So the code below will first add a class "previous" to the current screen, that's already selected. Then it will position the screen to show off the screen using "$(screen).css({x:$(window).width() + "px"})" that means, the screen will be position in the width of the window "$(window).width()" to get the value and move it in the X axis to that point. Example, if your screen is an iPhone, it will move the new screen at 640px. Then the class "selected" will be added in order to make it visible. At this point you will have 2 screens with the class "selected". The second part is the animation using jQuery Transit. So we will basically animate the screen that was on the right to the 0 position using "$(screen).transition({x:"0px"},300,"ease",function ()". The time of the animation will be 300ms and it will use "ease" to make the speed not linear. Once the animation ends, we call a function to remove the "selected" class from the "previous" tag. Then we remove the "previous" class too. At last we remove any "style" attribute to make sure that there won't be any issue in the other animations. More Animations Below you can see different transtions type. We have SlideUp, SlideDown, SlideLeft, SlideRight, BackDown, Backup. if($(this).hasClass("slideup")){ $(".selected").addClass("previous"); $(screen).css({y:$(window).height() + "px"}).addClass("selected"); $(screen).transition({y:"0px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slidedown")){ $(".selected").addClass("previous"); $(screen).addClass("selected"); $(screen).css({y:"-" + $(window).height() + "px"}); $(screen).transition({y:"0px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slideleft")){ $(".selected").addClass("previous"); $(screen).css({x:$(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:"-" + $(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slideright")){ $(".selected").addClass("previous"); $(screen).css({x:"-" + $(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:$(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("backdown")){ $(".selected").addClass("previous"); $(screen).show(); $(".previous").css("z-index","24").transition({y:$(window).height() + "px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(screen).addClass("selected"); $(".sc").removeAttr("style") }); } if($(this).hasClass("backup")){ $(".selected").addClass("previous"); $(screen).show(); $(".previous").css("z-index","24").transition({y: "-" + $(window).height() + "px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(screen).addClass("selected"); $(".sc").removeAttr("style"); }); } Using the animations With this basic code you can simply add a class "link" to any tag to make it clickable. Once it's clickable you can choose the transition by using another tag. In our case you can use: slideup - eg. slidedown - eg. slideleft - eg. slideright - eg. backdown - eg. backup - eg. Conclusion It might look confusing, but as any new thing we want to know there's a learning curve. The secret is to go little by little, with small little achievements in order to get easy and quick rewards, that way we keep ourselves motivated. Below you can see the code working on an iframe. You can also download the files and check on your phone (recommended) Download Files Demo on Phone Prototyping tools and Frameworks http://www.framerjs.com/ http://twitter.github.io/bootstrap/index.html https://github.com/donnfelker/android-bootstrap

Frame - Prototyping tool for desktop and mobile

Framer - Prototyping tool for desktop and mobile

Prototyping is a vital part in designing great products, from a simple poster to a car, it's extremely important to test designs in situations that resemble the real usage environment. My background is in Industrial Design and we used to prototype everything. Then I moved to graphic design and again I was always printing and checking to see how my designs felt. Now in the digital world, and with mobile taking over it's really important to be able to simulate the products in the handsets. There are quite a few frameworks out there but I would like to share one called Framer. Frame can help you to quickly build interactions and animations. Built for designers and integrates with Photoshop. Great alternative to Quartz Composer, Flash or Keynote. I started using it a few days ago, recommended by Noah Levin, a fellow Googler and the amazing designer behind the Google App for iOS with Google Now.? Framer is a prototyping tool for animation and interaction on desktop and mobile. Features Photoshop: Framer integrated with Photoshop to quickly export assets and set up a project. Animation: Animate any view in full 3D space with spring physics and bezier curves. Performance: Hardware accelerated for high frame rates. Based on CSS keyframes. Flexible: Works well for desktop, mobile and tablets. Plays well with the rest of the browser. Video preview Framer Photoshop from Koen Bok on Vimeo. For more information, to check out some demos visit http://www.framerjs.com/

Super Easy Parallax Effect with jQuery

Super Easy Parallax Effect with jQuery

We have gotten quite a few emails from people asking how we did the parallax effect on the new design. We are not master of Javascript but we always like to learn and explore new things. That was the case of the parallax effect. This kind of effect brings us back memories from the 8 and 16 bit video-game eras and it was a really good exercise to improve our web design skills. So for this tutorial we will show you how we did the parallax effect you see in the blog. The first thing to do is try to get familiarize with HTML/CSS and Javascript. It's also important to understand the behavior of the objects you will try to animate. For the parallax the logic is that two or more elements move in a different speed to give a sense of depth. Step 1 Open your HTML editor or text editor. I am using Espresso for this tutorial, but that is not really important. After that create a new document and make sure you save it as .html. Let's write a basic HTML 5 file. Use the image below for reference. Step 2 Let's now make sure we add our jQuery library link within the <head> tag. You can simply link straight to the jQuery website or Google code. Step 3 Another nice thing to do is to use custom fonts that are not the limited websafe ones. I am using Google Web Fonts for that. The font I will use for this tutorial is Oxygen. Step 4 For this tutorial we will create a basic card with an image and some information. The idea is that the image will scroll slower than the content that will scroll on top of the image. Basically we will have: Create a <section> tag for the card; Add a <img> tag with the link to the image you want to use. Add a <div> after the <img>. This <div> will be the info about the image, in our case the movie Hobbit. Add some info about the video. We use IMDB to get that http://www.imdb.com/title/tt0903624/ Your HTML will look like the image below. Step 5 Save and preview it in the browser. As you can see, it's a raw html page. Step 6 Time to add some style. Starting with the "body" tag. Lets remove the padding and margin, let's also use the custon font and a background from Subtlepatterns. Step 7 Now let's work on the card. For the #box (the ID added to the <section>) add the width, height, margin, background and use relative for the position. To make the card scrollable use "overflow:scroll". For the image, use position:absolute. Another important thing to do is to set the background color for the <div> with the info. This <div> will scroll on top of the image. Step 8 Here is a preview of the HTML with styles. Step 9 Time to make the Parallax work. Let's use jQuery to get the scrolling event. To do that we just need to use $("element").scroll(callback), in our case $("#box").scroll(function(){}); Step 10 Now let's get the value of the scroll, use .scrollTop(). For more information about jQuery you can use http://visualjquery.com/ - so here will will get the value of the scroll of the card and assign it to a variable call "s" Step 11 To make the parallax work is pretty simple, we will divide the value of the scroll by 3 and use CSS to move the image. For this tutorial I used -webkit-transform: translateY. It only works on Webkit browsers. For full production you will have to create a version for each browser if you decide to use the transform. You could also use "top", but it wouldn't work really well on mobile. Conclusion & Demo Everytime you scroll the image will move a third of the distance of the rest of the content. That is what we used for the blog, however for mobile you will have to use other event handlers, especially for iOS that doesnt have the "scroll" event. You can see the demo below or clicking here.

swfIR, swf Image Replacement

Well, here I go again, I know it’s been a while, mainly because here in my country was the famous Carnival holidays and as everybody else down here I went to the beach and enjoyed life.Anyway, back to the web, I found a really interesting tool, if I can call that a tool. It’s the SWFIR, that stands for swf Image Replacement.swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. Through progressive enhancement, it looks through your page and can easily add some new flavor to standard image styling."What does it do? Basically it does the same as SIFR, however, instead of replacing texts the SWFIR replaces images for a flash movie. What are the advantages for using it? It makes possible to add shadow, rotations, add borders with different colors, and stuff like that. So check that out at http://www.swfir.com/ or some example of use at http://www.swfir.com/examples/elastic/.