Creating Scroll-based Animations using jQuery and CSS3 Creating movement is great way to provide an interesting and interactive experience for your viewers. With modern sites providing a greater deal of interactivity, it’s becoming increasingly expected that even simple websites will offer some level of animation / movement to engage their visitors. Today I will be outlining a technique that you can adapt to your web projects – triggering animations when scrolling into a pre-defined region. These animations will be created using CSS transforms and CSS transitions. We will also use jQuery to detect when the elements are visible and to add/remove the appropriate classes. For those who want to see examples of this in action, you can jump straight to the demos. The main reason we would want to trigger animations on scroll, is so that they activate just as the user scrolls an element into view. We might want to fade elements in, or provide an interesting transformation and these would only make sense when the user can actually view them. Speed
matt-curtis/Fluid-for-Sketch 15 Inspiring Examples of CSS Animation on CodePen CodePen is fast becoming the go-to place to show off what we can do with our web creations. Here’s a list of some of the great stuff people have been creating with CSS animations recently! Apple watch like Mickey watch by Jay Salvat (@jaysalvat). This is a lovely example of combining CSS transitions, SVG graphics and JavaScript to position the hands on a cute Mickey Mouse watch face. Submarine with CSS by Alberto Jerez (@ajerez). Gorgeous use of the circular port-hole shaped container gives this CSS-animated submarine a lot of charm. AT-AT by Tim Pietrusky (@TimPietrusky). Star Wars inspired AT-AT personnel carrier, drawn using text with the colours cycled in CSS. Loader SVG/CSS by Bidji (@Bidji). This loader uses the changing colours to give the impression of rotating. 3D CSS Tardis by Gerwin van Royen (@Gerwinnz). CSS can be used to create some amazing 3D effects. Dozing Bird by Peter Klein (@pmk). Pure CSS border animation without SVG by Rplus (@rplus). Cascading Solar System!
Expert’s Weigh In: What’s Your Favorite CSS Trick? : Adobe Dreamweaver Team Blog If you’ve been looking for some shortcuts to save some time or ease some of the frustrations that sometimes come with writing CSS, then we’ve got a treat for you! Instead of handing out candy for Halloween, we asked a handful of experts to share their favorite CSS tricks with us. No magic potions here, just some sweet little treats. Nicole Dominguez, Senior Product Designer & Front End Developer at Sawhorse Media My favorite CSS “trick” would have to be these 3 lines of CSS: I’ve been using this snippet for years! (Github link) Daniel Box, Designer at KNI Responsive images in CSS are pretty easy: just set the width: 100% and height: auto and you’re good to go. (Github link) Ashley Nealy, Founder & Chief Creative Officer, Mindly Maven, LLC It’s hard to choose just one CSS trick, but my my favorite has to be: It’s the perfect little trick for hiding any pesky element that you don’t need at the moment without having to recreate the entire page. Brian Ferdinand, Senior Developer at Gravitate
CSS Image Effects #5: Lomography This is part of a series of posts breaking down visual effects using CSS filters and blend modes. Read Part 1: The Vintage Washout Effect, Part 2: 3d Glasses, Part 3: Vignettes, and Part 4: Bokeh Textures for some background on blend modes and filters. In this post we'll explore a relatively new photography technique founded in Austria in the early 90's, called Lomography. A Google search for Lomography yields beautifully vibrant results. A Little Background on Lomography Lomography (AKA Lomo) was based on and inspired by a cheap Russian toy camera, the Lomo LC-A. So, Lomography is very saturated, sometimes blurred, and contains unexpected light leaks. Playing with Filters A common trait in Lomography is vibrant, saturated colors. Following Lomography principles of not over-thinking image composition and capturing real life, I may or may not have taken this sample photo in the bathroom of the coffee shop from which I am writing this post. Original Image Blur within the lines Image Source
51 Sets of Free Photoshop Patterns for Web Designers Every designer can save much time if he/she uses resources, freebies available online in plenty. For Photoshop, you will find freebies quickly – like brushes, patterns and shapes, with so many options available you may get confused. In this article, we present you some of the most beautiful patterns for photoshop, which are free to use and can save much time for finding useful resources. Most of these following patterns are in the PAT format, and some of them are in Image format, like PNG. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 8 Seamless “Dark Metal Grid” Patterns 16. 17. 18. 75 Seamless Photoshop Pixel Patterns 19. 20. 21. 8 Tileable Dark Wood Textures 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50.
25 Best Free HTML/CSS3 UI Kits | DesignMaz Converting PSD into HTML/CSS? Forget it goes! Because with the 25 Best Free HTML/CSS3 UI Kits is to offer you common User Interface elements to get you started building your website or apps design project quick and easy. With the emergence of CSS framework as Bootstrap, Gumby, Purecss or Yaml the UI Kits base on CSS framework also become popular. In this post we’ve gathered 25 best and free HTML/CSS UI Kits that are packed with common Web UI elements to get you started building your website or application interface with a refreshing look. Free Flat HTML5 CSS3 UI Kit Spot is a Free HTML5 CSS3 UI Kit based on Spot UI Kit PSD version designed by cssauthor. Free Download A Free Flat HTML5 CSS3 UI Kit with clean and flat design style. Download Square HTML5 CSS3 UI Kit Square is a freee HTML5 and CSS3 UI Kit built with Bootstrap Framework 3.0. Download Storage Flat HTML5 Css3 UI Kit Storage is a Flat Responsive HTML5 and CSS3 UI Kit for web app dashboards, mobile app designs, websites, etc… Download
Paul Ford: What is Code? | Bloomberg A computer is a clock with benefits. They all work the same, doing second-grade math, one step at a time: Tick, take a number and put it in box one. Tick, take another number, put it in box two. Tick, operate (an operation might be addition or subtraction) on those two numbers and put the resulting number in box one. Tick, check if the result is zero, and if it is, go to some other box and follow a new set of instructions. You, using a pen and paper, can do anything a computer can; you just can’t do those things billions of times per second. Apple has always made computers; Microsoft used to make only software (and occasional accessory hardware, such as mice and keyboards), but now it’s in the hardware business, with Xbox game consoles, Surface tablets, and Lumia phones. So many things are computers, or will be. When you “batch” process a thousand images in Photoshop or sum numbers in Excel, you’re programming, at least a little. 2.1 How Do You Type an “A”? It’s simple now, right?
24 Free HTML & CSS3 UI Kits - Download CSS UI Kits here large number of basic and essential elements for a web design is available for free download. These ui kits can speed up your web development process to new heights thus giving you extra time to spare. Copy the html and css code into your web page elements and you are all set to enjoy the beautiful design. With raging trend of flat design we have included them in our topic as well as it is currently seek more often by the design community. Changing element color to match your website tone is simple and you just have to use some hex code websites to match your needs. Stay tuned for more updates on this as i will keep checking for best html & css3 ui kits. Also find more amazing topics to improve your productivity Poly ui kit A simple ui kit to get you started with basic navigation, login forms, grid system and tab accordion and much more. Download Pure CSS UI Download Bootstrap 3 UI Kit – Get it Done Download Page Modern Flat Dashboard UI Kit Download Download Responsive Flat UI
Top 20 jQuery Interview Questions and Answers for JavaScript Programmers Without a doubt, jQuery has given a much needed boost to JavaScript, a language so useful but equally underrated at times. Before jQuery came into picture, we used to write lengthy JavaScript code not just for bigger but even for smaller applications. That code was at times both difficult to read and maintain. Having written plain JavaScript before using this excellent library, I realized the true power of jQuery, just after using it for a month. Given it’s huge popularity, jQuery interview questions are increasingly asked in any web developer interview, not for just beginners but also experienced developers, along with questions about HTML and JavaScript. In this article, I am sharing a list of 20 jQuery questions asked to HTML and JavaScript programmers in different interviews. If you are going for an interview where the role demands multiple skills e.g. JavaScript is a standard for client side scripting and jQuery makes writing JavaScript much easier. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
Top 10 Amazing HTML & CSS UI Kits for Web Designers » CODECALL Bootstrap is a really cool front end framework, which is responsive, and can be basically termed as a browser based IDE. Bootstrap is compatible with almost all major web browsers like Firefox, chrome, etc, and works charm, when developing web applications, website, web pages, etc, because of the amazing number of tool kits and support stuff available. This is an open source tool, available to get and download at Github. This was first integrated at twitter, to improve consistency of the stuff going on, but now is very widely used elsewhere too, including web designing processes, etc. Bootstrap doesn’t end there. It offers a lot of amazing UI kits, which you can integrate into it, and improve your development process so it is smoother, quicker and better. These Bootstrap CSS and HTML UI kits are highly customizable, and you may customize all of it, or a particular element according to your own need, and matching your website design and theme. 1) CSS3 UI Kit( PDS+CSS) 2) Metro UI CSS Kit
100+ HTML5 Canvas Tutorial & Plugins with Example PixelFlow.js : jQuery Image Pixelating Plugin PixelFlow.js is an image pixelating filter jquery plugin using canvas. Pixi.js : A 2D JavaScript Renderer Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback.The aim of this project is to provide a fast lightweight 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Features: WebGL renderer (with automatic smart batching allowing for REALLY fast performance)Canvas renderer (Fastest in town!) Text Styles and Hover Effects with CSS3 & SVG A couple of creative text styles and hover effects for your inspiration. jQuery toCanvas : Add effects to Images & Videos This jQuery plugin allow you to add effects to images and html5 videotags easily. HiDPI Canvas Polyfill A JavaScript drop-in module to polyfill consistent and automatic HiDPI Canvas support.