background preloader



SlideScreen jQuery Plugin “SlideScreen jQuery Plugin” Documentation by “Paulo Lagoá” v1.0.0 Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. A) Introduction - top SlideScreen is a jQuery plugin that creates a "Before and After" effect from two images with just a few lines of code. You can have multiple instances of the plugin working on a single page and it is touch responsive, which means it will work on mobile devices. This help file will help you get started with SlideScreen and have it up and running in no time. B) Files - top SlideScreen comes with one .js and one .css files, so these should be included in your html for you to use SlideScreen. Below is a list of the files needed for the plugin. The Javascript and CSS calls should include these: Although there's not much CSS to change in SlideScreen there's a CSS file included with some properties for the styling of the separator bar.

A UX Idea: I know where you are aiming! If you are a web developer or designer you know what :hover selector essentially does; browser detects current mouse cursor position, checks if the cursor is inside the element then adds the css rules you previously defined. This is a significant feature in terms of usability; you can create a drop-down and get rid of the all the clutter of secondary items or you can reveal an info popup to explain the role of a button. However, there is a drawback which is overlooked. Sometimes, you urge user to move the mouse on a specific element to go the actual target. Consider the following example, As you see on gmail, you need to hover the plus icon to reach emoticons button. These sort of examples can be found any kind of website. Now, let’s reconsider nytimes example with a different approach, As you see above, when cursor is moving towards to menu button, we can write an algorithm that can understand where you are going to click before you reach there and toggles the menu in the half way.

Create your own jQuery Image Slider - CSS-Plus I originally posted this article on 15 September 2010. This is an updated version. This tutorial is for beginners. Common things that cross my mind before actually jumping into development are: Where are the hidden elements situated? Beneath, on top, next to or behind the visible element? How are they hidden? Is their display set to none? Are they outside of the parent element which is set to overflow: hidden? Are they hidden behind visible element via z-index? All right, enough of that, let’s get started. The HTML Before we create anything, we should try and get an idea of exactly what we are trying to achieve. So let’s turn that into HTML. .gallery-wrap will be the visible is the element that contains the list of images..gallery__controls contains the next and previous controls. Generally an image slider would contain more than 2 images but I’ve left out the exact HTML I used in the demo for readability. The CSS The jQuery/Javascript This is where all the fancy tricks take place.

Page Preloading Effect A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs. View demo Download source Today we want to show you how to create a very simple page preloading effect with CSS animations, SVG and JavaScript. In this tutorial we will re-create the effect seen on Fontface Ninja with some adjustments and a second demo with slightly different effects. Please note that we’ll be using CSS animations and CSS 3D transforms, so this will only work as intended in browsers that support them. So, let’s get started! The Markup Let’s wrap a header and the main content division into a container. The initial view consists of a header that contains the logo and the loading element. The main content has the class ip-main and later on we’ll apply animations to its children, the headline, the division and the inner boxes: Let’s go on and style this. The CSS Let’s remove any margins from the logo headline: The JavaScript

IS Tappy: A custom tap event handler Posted by Scott on 07/14/2014 Tappy is a minimal, normalized "tap" event that works with touch, mouse, keyboard, and more. Tappy allows you to bind to a tap event like you would with other events like click. The advantage of using Tappy's tap event over click is that it will allow you to execute code immediately on touch devices, eliminating the brief but noticeable delay that click events have on platforms like iOS (thankfully, this problem is slowly going away in platforms like Chrome for Android). If you've never experienced the speed improvements that touch events provide, try browsing this site on a device like an Apple iPhone - the lack of delays between tapping links and changing pages is quite convenient! How-to Tappy requires jQuery, or a similar framework of matching API conventions. $( "" ).bind( "tap", function( e ){ alert( "tap!" To use tappy to create fast-click navigation (like this site uses), you could do something like this on domready: Visit the project site

Sticky Alert Skippr. A jQuery plugin for creating tasteful slideshows. The setup. Include jquery.skippr.css inside your head tag and jquery.skippr.js just before the closing body tag. Be sure to include jQuery before jquery.skippr.js Create a target element with divs inside, one for each slide, and add a background image with css or the style attribute. Skippr targets div tags inside of the selected element with background-images applied to them. Put this target element inside of a container element styled and positioned to your liking. **Note: The container element must have a specified width and height, and position other than static to work properly. Initiate. Just select the target element with jQuery and call the skippr method. $(document).ready(function(){ $("#theTarget").skippr(); }); Options. Pass in an options object as a parameter to the skippr method for customization. transition : specify the type of transition you want your slideshow to perform. speed : enter length of time in milliseconds you want the transition between slides to take. Comments.