Typography Effects with CSS3 and jQuery
Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilites. View demo Download source Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites. We’ll be using Lettering.js in order to style single letters of the words we’ll be having in our big headlines. The image used in the demo is by Andrey & Lili. The HTML The structure will simply be an h2 element with an anchor inside. Then we’ll call the Lettering.js plugin, so that every letter gets wrapped in a span. Now, let’s take a look at each example. In order not to bloat the tutorial, I will not be showing any CSS vendor prefixes. Example 1 In the first example we want to skew the letters in order to create bit of perspective. Example 2 Example 3
Getting Started with GSAP (GreenSock Animation Platform)
Quick links: Jump Start Introduction Animating with code may seem intimidating at first, but don't worry – the GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. What exactly is GSAP? The GreenSock Animation Platform is a suite of tools for scripted animation. TweenLite: the core of the engine which handles animating just about any property of any object. Loading the GSAP files Check out the download screen where you can download a zip containing minified and uncompressed files, or you can just paste a CDN link right into your page. Since TweenMax includes TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin, and DirectionalRotationPlugin, this one file gives you tons of goodies to play with and the CDN should help things load very quickly. Notice that we're linking to the "latest" version of these files, which means that as new versions come out you should automatically get those updates. Basic tweening Easing
Lateral On-Scroll Sliding with jQuery
After getting the request, we are going to show you how to create a "slide-in on scroll" effect. You've probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from "outside" of the page to the center when they are in the viewport. We will also add the opti View demo Download source After getting the request, we are going to show you how to create a “slide-in on scroll” effect. The theme of today’s tutorial is going to be a timeline where we will have some circular elements on one side and the descriptions on the other. So, let’s start! The Markup The HTML structure is going to consist of a main container and some rows that we’ll use to place the left and the right elements. The CSS The row will serve as a wrapper for the left and right elements: Demos
Js Tutorial - jQuery Scrollsteps - Handle mouse scrolling by steps
DownloadDemo User Rating: 5/5 ( 1 votes) jQuery Scrollsteps is a lightweight jQuery plugin to handle mousescroll events by steps, handling many wheel types (click, inertia, etc.) Mouse scrolling triggers a lot of scrolling events, especially with the new "magic" trackpads and mice that create a lot of inertia in the wheel. So, if you are trying to setup a page design where the user should be able to scroll through elements "one at a time", this can cause a lot of problems, especially frustration as this easily can render the scrolling not so fluid. This jQuery plugin solves this problem, and provides callbacks for each scrolling "step" in all directions Source: amondit.github.io <div id="page1" class="fullScreenPage"><h1>jQuery.ScrollSteps.js</h1><h2>A lightweight jQuery plugin to handle mousescroll events by steps.
Item Blur Effect with CSS3 and jQuery
Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of "focus" effect that drwas the attention to the currently hovered item. View demo Download source Today we want to show you how to create a simple blur effect for text-based items. We’ll be using CSS3 transitions and some jQuery to apply the respective classes. Since we will be using transitions, this effect will only work properly in browsers that support them. So let’s start! The Markup The structure will be a section with some articles in i. Let’s look at the style. The CSS The main container will be of fixed width and centered: Let’s clear the floats (out articles will be floating) with the help of the :before and :after pseudo elements: Now, let’s style the article items. For Webkit browsers we’ll also add -webkit-backface-visibility: hidden
Learn Android Programming From Scratch - Beta
The course provide an introduction to Android Programming and allows someone with a basic knowledge of programming to start creating Android Applications. It is a light course to cover fundamentals of Android. It will teach you the Android programming Paradigm and how to think while creating an Android program. The course is divided into 6 units covering each of the above topics. It will be a fun learning course that is sure to help you get going with Android programming. > Eduonix Official Website > Eduonix Blog
Sexy Opacity Animation with MooTools or jQuery
A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique which you may implement in jQuery or MooTools. The XHTML <div id="forest-slot-1" class="opacity"><h2>The Forest</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. There's nothing too special about the HTML above; the awesomeness comes with CSS. The CSS To enhance the design of my content block, I'm adding a colorful background image behind where the content blocks will display. The MooTools JavaScript The structure for both the jQuery version and MooTools version is the same. The jQuery JavaScript $(document).ready(function() { var opacity = 0.7, toOpacity = 0.9, duration = 250; $('.opacity').css('opacity',opacity).hover(function() { $(this).fadeTo(duration,toOpacity); }, function() { $(this).fadeTo(duration,opacity); } );}); Be Heard
How to get FBA Fee and commission using Amazon MWS
