SUPERSCROLLORAMA. SuperScrollorama is powered by TweenMax and the Greensock Tweening Engine.
Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome. First, link to the jQuery CDN and then embed TweenMax.js and SuperScrollorama. Next, start up SuperScrollorama. When initializing SuperScrollorama there are several options you might want to change. $.superscrollorama({options}) vars: optional properties for the pin method (object): isVertical Are we scrolling vertically (true) or horizontally (false)?
Example Use the addTween method to build your scroll animations. .addTween(target, tween, duration, offset, reverse) target: scroll position (number) or element (string or object) tween: a Greensock animation tween object duration: scroll duration of tween in pixels (0 means autoplay) offset: adjust the animation start point reverse: disable reverse animation on up scrolling (optional) Putting CSS Clip to Work: Expanding Overlay Effect. A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.
View demo Download source Our previous article, Understanding the CSS Clip Property by Hugo Giraudel offers a great overview of the CSS clip property and the rect() function. Today we want to explore the practical side of it a little bit more. Web Design Freebies, UI Kits, Icons. The Complete Social Media Icons Set [EPS, PSD, CSS] Is it time to mix up the social media icons on your website?
Try Candy, a new social media icon set from designer Ahmed Kaludi. The set has everything you need to help users... UIcons – Free Line Icons (AI, EPS, SVG, PNG) There’s nothing bigger in design right now than the use of great icon sets throughout a project. Thankfully for you, there’s UIcons. This huge collection of crisp and diverse... Free Photo Realistic Apple Device Mockups Apple Device Mockups are an important part of every design presentation because all these devices look nice and can improve the appearance of every project. Flat UI Pro - PSD&HTML User Interface Kit. 20 Free GUI Templates for 'Flat' Web Design. All of the UI templates and kits we have for you today have been designed in a Flat style.
Meaning they have been created ‘without the usual gradients, pixel perfect shadows, and skeuomorphism…’ All of the kits are free, editable, and all are perfect for quickly creating web and mobile mockups. 960 Grid System. A tidy repository of jQuery plugins. Steps to becoming a front-end web developer. There are a few things you have to know in order to be a front-end web developer.
Where to start and what to learn. This guide will take you through the steps of becoming a front-end web developer. First things first Before we start seeing stuff on the screen, we have to make something out of nothing. We start at the basics of web developing: HTML. HTML is not only very important, your whole markup will depend on it. 1.
Learning perfect HTML will take some time but it will really pay off later. Next step is what you’ve been waiting for; applying CSS. 2. Learn Web Design, Web Development, and More. Swooshy Curly Quotes Without Images. The problem Take a quote and render it within blockquote tags, applying big, funky and stylish curly quotes both at the beginning and the end without using any images – at all.
The traditional way Feint background images under the text, or an image in the markup housed in a little float. Often designers only use the opening curly quote as it’s just too difficult to float a closing one. Why is the traditional way bad? Well, for a start there are no actual curly quotes in the text (unless you’re doing some nifty image replacement). The solution Use really big text. Creating “Drop Caps” with CSS has been around for a while (Big Dan Cederholm discusses a neat solution in that first book of his), but drop caps are normal characters – the A to Z or 1 to 10 – and these can all be pulled into a set space and do not serve up a ton of whitespace, unlike punctuation characters.
Curly quotes aren’t like traditional characters. Then, there’s size. Prepare the curlies Add the hooks The CSS Finished. Web Font Plug-in for Photoshop. jQuery plugin: Fullscreen Background. CSS-Tricks. Learn to code. Pull Quotes Design Showcase. Pull quotes — also known as block quotes or lift-out quotes — are a small selection of text that is pulled out and quoted in a larger typeface.
They are a great way to attract attention to a particular point, especially in long articles. They are a great way to add some visual flair to a text-heavy page and can be styled in a variety of ways to make them stand out. They also work well for skim readers as a way to provide a preview or 'taste' of the content on the page. Use sparingly to be effective and always in service of the content. 1 2 3 4 Next » Portent Vocus Shopify distilled EmailMonks Convince & Convert Top 500 Guide Cultivate The Inside Source.