After getting the request, we are going to show you how to create a “slide-in on scroll” jQuery 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 option to move the elements in 3D space.
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. We’ll be alternating the sides to create a random look.
In this tutorial we will be writing a jQuery plugin for creating a shiny knob control. Aptly named knobKnob, this plugin will use CSS3 transformations and jQuery’s new event handling methods to give visitors of your website a new way of interactively choosing a value from a range.
Today I am going to show you how to create sliding image cell effect in jQuery. This is will something like small photo gallery. I prepared 3 demos for you with different effects. Please pay attention that our demo will work in browsers that support used CSS3 properties.
Adding scrolling content to your website or blog makes much sense – it allows you display latest news, promotions, product updates, announcements, upcoming events, calendar items and much more in a limited space. It also allows you to add dynamic content to otherwise static web pages.
Today, we are featuring vScroller, a free XML-driven vertical news scroller for websites and blogs. Powered by jQuery, vScroller displays categorized and color-code content is a vertical scroll. Feeds come from standardized XML file and styled with simple CSS3 for a clean and attractive interface.
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 examples on this page will work properly in Safari, Chrome and Opera. In the Firefox prior to version 4 you will see the transforms, but without any animation. Some effects may also work now in Internet Explorer 9 if you use the -ms- vendor prefix.
The implementation of animation in CSS involves setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which applies the transformation/s over a set time period.
Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).
Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.
Optionally it can benefit from the jQuery Easing plugin with a different easing animation for the page scrolling.
I thought about making one using jQuery. And I sort of did. It’s not exactly a “kinetic animation” but it just somewhat like it. And its very small. Usually kinetic animations are of at least a minute, this is just a few seconds. But hey, it’s all done using jQuery. This is just done to show that a kinetic animation can really be achieved using jQuery. I, being a jQuery n00b for now (and more when I made this), couldn’t do more with it. I still don’t know if we can rotate text in jQ, else that’ll be COOL!
This little jQuery plugin which does exactly what it says on the tin – creates a page peel! This is a little page animation which sits at the top right hand of the screen and when the mouse hovers it the page “peels” down and reveals the content behind it. It could be used to display a popular area or feature of your website but is most commonly known these days to display advertisements. Let’s face it the page peel grabs your attention straight away!