PageSlide: a jQuery plugin which slides a webpage over to reveal an additional interaction pane
Advertisement a jQuery plugin which slides a webpage over to reveal an additional interaction pane by Scott Robbin Download PageSlide Now If you've ever used the mobile version of Facebook, or Path,then you've probably seen something akin to PageSlide in action. Clicking on a button or link slides the page over to reveal a hidden pane,one that usually contains secondary navigation, a form, or additional information. There are several ways to use PageSlide, some of which are shown below.Additionally, there is a responsive demo which shows how PageSlide can be used as a mobile solution. Slide to the right, and load content from a secondary page Slide to the left, and display hidden content from this page in a modal pane Modal This slide uses "modal" option set to "true". Where can I get it? If you are interested in learning more about PageSlide, it's recommended that you view the project on GitHub. Other jQuery Plugins If you like this plugin, feel free to check out some of the others I've built.
Lightbox
Martin Angelov In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it. It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost). We are using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling. Before reading on, I would suggest that you download the example files and have the demo opened in a tab for reference. So lets start with step one. Step 1 – XHTML The main idea is to have PHP as a back-end which will generate the necessary XHTML for each image. demo.php <div id="gallery"><? Nothing too fancy here. The gallery Step 2 – CSS Now that we have all the markup in place, it is time to style it. demo.css Step 3 – PHP
s jEffects - White
FIREBALL Lorem ipsum Dolores Amet vitae BOMB consectetuer Pellentesque Amet Suspendisse BUBBLES laoreet consequat ligula tincidunt SNOW fringilla accumsan porttitor Quisque CONCENTRATE DISTANCE consectetuer Pellentesque Amet Suspendisse INPUT COMPLEX ( snow and bubbles ) consectetuer Pellentesque Amet Suspendisse INPUT ( chars catching ) random particles Pellentesque Consectetur Amet Suspendisse simple as: $("a").jEffects('bubbles'); flexible as: complex as: beautiful as: $("#anything").jEffects( /* Your imagination goes here */ ); jEffects enhances user interaction by providing decorative effects. Developed by Rezoner Sikorski, Icons by Sekkyumu
ColorBox, une lightbox jQuery légère et extensible
ColorBox est un plugin jQuery qui permet de générer une lightbox légère et totalement personnalisable pour accueillir photos, textes ou vidéos. Avec plus de quarante options disponibles, ColorBox s’inscrit dans la lignée des meilleurs générateurs de « pop-in ». Facile à utiliser, c’est aussi un des plugins jQuery les plus utilisés sur Internet. Un plugin léger et complet Au même titre que Fancybox, ColorBox est un plugin de qualité. Parmi la multitude d’options, vous retrouverez le type de transition (« fade », « elastic » ou « none »), la vitesse d’animation, l’insertion d’une légende, les boutons de navigation, le degré d’opacité du background, les dimensions de la lightbox, l’activation du diaporama, ou encore la navigation au clavier. Facile à mettre en place ColorBox est très simple à utiliser. Une fois la structure prête, on déclare jQuery et le plugin (script et feuille de style) dans notre document. Il existe de nombreux plugins jQuery qui proposent de la génération de lightbox.
Fullscreen Slit Slider with jQuery and CSS3
A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. View demo Download source In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide. Using different data-attributes, we’ll define the type, rotation angle and scale of a slide’s parts, giving us the possibility to create unique effects of each slide transition. We’ll be using jQuery cond, jQuery plugin by Ben Alman for chainable “if-then-else” statements. The animal icon font that we’ll be using is by Alan Carr and you can find it here. The images in the second demo are by Majownik and they are licensed under a Creative Commons Attribution License. Let’s start with the HTML. The Markup So, our first slide will have something like this: Now, let’s style it!
Orman Clark’s Vertical Navigation Menu: The CSS3 Version
Next in the Orman Clark's coded PSD series is his awesome looking Vertical Navigation Menu. We'll recreate it with CSS3 and jQuery while using the minimal amount of images possible. The only images we'll be using are for the icons - I'll be creating a sprite using a new tool called SpriteRight, but this is optional. Additionally, I'll be using GradientApp to create my CSS3 gradients, but again this is optional. Step 1: Basic HTML Markup Let's start off by throwing in some basic markup, an empty HTML5 document: And now the markup for our menu; an unordered list within a containing wrapper. Lastly, we create the submenus by placing an unordered list nested within each of our existing list items. Okay, there may seem a lot there but don't let it confuse you. I've also added a class to each list item, just so it'll make styling easier later on. Step 2: Fluid Fonts We'll first make sure our menu displays correctly. Now to explain how the wrapper font size works. Step 3: Main Menu CSS Okay!
jQuery Quicksand plugin
Quicksand Reorder and filter items with a nice shuffling animation. Activity Monitor 348 KB Address Book1904 KB Finder 1337 KB Front Row 401 KB Google Pokémon 12875 KB iCal 5273 KB iChat 5437 KB Interface Builder 2764 KB iTuna 17612 KB Keychain Access 972 KB Network Utility 245 KB Sync 3788 KB TextEdit 1669 KB Demo seems sluggish? Disable CSS3 scaling and try again. Isn’t it cool? Download Version 1.4 Demos & Docs Fork on GitHub Powered by jQuery – Made by @razorjack from agilope, icons design by Artua Design by @riddle
