n8 Makes Stuff

Ask me anything   This is essentially whatever is on my mind that involves anything computer related...but mostly web development related. I will reblog at will, be warned.


    Jquery effects I can use right NOW!

    It’s so ridiculously tedious going around the net looking for a Jquery effect that you want to use for a site.

    That may sound vague but really it is an annoyingly long process.

    When you want to “start from scratch” but you want to incorporate some good Old JQ, but you don’t want to use the same tired old library you already have, you naturally put your Google Jedi cloak on.

    The problem is that their are like a billion Top 15687343 Jquery Effects & Samples types of posts out there. Rarely are they timely. Most usable list posts are from 2010 to maybe Fall 2011. Yes, I’ve seen the rare 2012 post already but it’s limited. That is a lot of posts to wade through, and half the time they list the same examples over and over. Even when better options are available.

    Most of the time you are not exactly sure of what you want to do. You may know that you want to include a smooth scroller, slider for news or a gallery, thumbnail gallery, menu/navigation .etc.

    You just don’t know what type, or look, or even effect you want for either. You also can’t have a mishmash of various types of effects. Eventually they all come together as ONE piece and it needs to be blended seamlessly.

    This is a list. I guess. Or a link roll of scripts that I may want to use on my next static-ish site. A 1-pager for personal web use.

    I’m going to group them in no particular order of preference, but with related effects.

    This is definitely not the best use or largest collection, but it is a collection of stuff that can be used quickly and for static pages.


    Slide Down Box Menu - Uses CSS3. Best Practice - Large amount of menu items.

    The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

    Background Image Navigation - Best Practice - Short list of menu items.

    The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

    Circular Motion Effect - Best Practice - It takes up a good amount of screen real estate, but it actually looks so minimalist it appears to have great whitespace.

    The idea is to have a rounded content area with a main menu. When hovering over one of the menu items, a sub-menu element appears, circulating around the content area.

    Content Sliders

    Avia Slider - Best Practice - An image slideshow with a nav, transitions, preloader, captions.

    It’s not a basic slider, but it is basically the type of slider most people choose for news headlines and slideshow content. What drew me to it is the LIGHTBOX feature that is included. 

    Sideways Full Screen Image Gallery - Best Practice - Large HQ images with plenty of thumbnails.

    A large image gallery with smooth transitions to the next image with captions and fantastic slide docking thumbnail gallery.


    Sliding Boxes With Captions - Best Practice - Individual images on a static gallery.

    This is actually one of the oldest and most re-listed scripts. It’s from 2009, but I’ve always wanted to use it, but had no use for it! There have been a few different iterations of it since then, but this still fits the basic bill.

    There is a div tag that essentially acts as a window where two other items of your choosing “peek” through.

    From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect.

    *The next 2 examples are so similar but they are distinct and cool enough to include them both.

    Hover Zoom Effect - Best Practice - Thumbnails that need captions.

    Reverse zooms an image while fading in a label on top of it when the mouse hovers over it.

    Photo Zoom Out - Best Practice - Thumbnails that need full and closeup visuals.

    The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out.

    Annotated Overlay - Best Practice - When you want to John Madden-like make notes over an image. Eg. - Portfolio pieces.

    This was actually the 1st post I found that I didn’t know I needed it (or it even existed) until I saw it. Basically you hover over the image and a semi-transparent overlay emerges with a graphic that highlights areas of the graphic below. 

    You could probably create this effect yourself, but hey the heavy lifting has already been done. Who are you the Hulk?

    Sponsor Flip Wall - Uses PHP. Best Practice - Thumbnails that need captions.

    Essentially you click on a thumbnail and it “flips” to reveal content text and links. Click back to get the thumbnail image back.

    Miscellaneous Awesomeness

    Basically some cool scripts that don’t have anything to do with any of the scripts above … or with each other.

    Contextual Slideout Tips - CSS3. Best Practice - Tooltips with deeper content.

    Hands down the best tooltip I have ever seen. Until a better one comes across my screen(s) this is now loaded into my library.

    The main idea is to create an easily configurable set of contextual slideouts. Each can be opened in one of four directions – bottom-right (default), bottom-lefttop-left and top-right, and each can be in one of three colors – green (default), blue, and red.

    Quicksand - Best Practice - Organizing categorized collections on the fly. 

    Reorder and filter items with a nice shuffling animation.

    Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items.

    Parallax Scrolling Background - Best Practice - Layered scrolling background.

    I was looking for something like this everywhere. If Web 2.0 was tag-clouds and shiny bubble letters, then Web 3.0 is layered scrolling. Nothing does it better than parallax.

    Horizontally scrolling website with a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

    Dynamic FAQ section with Google DOCS - Best Practice - When you want to update your FAQ section without coding.

    The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.

    The best aspect of this solution, is that you can change the contents of the FAQ section from within Google Docs – just edit the spreadsheet. You can even leverage the rest of Google Docs’ features, such as collaborative editing.

    Latest Tweets Tooltip - Best Practice - When you need the latest Tweets about a particular subject in your content.

    — 2 years ago with 2 notes
    #css  #gallery  #html  #jquery  #navigation  #scroll  #slider  #thumbnail  #tools  #tooltip 
    1. rayhansen reblogged this from n8makesstuff
    2. n8makesstuff posted this