Trigger your Dom Element via Waypoints

What is Waypoints?

Waypoints is the easiest way to trigger a function when you scroll to an element. Waypoints directory contains builds for jQuery and Zepto, as well as a version with no framework dependencies. For more information about waypoints is here.

Basic Waypoints coding

var waypoint = new Waypoint({
element: document.getElementById('basic-waypoint'),
handler: function() {
notify('Basic waypoint triggered')
}
})

Benefits of Waypoints
Webpage when you scrolled down when site tagline section comes to the middle of screen, each of the social icons should dynamically get a ‘animate’ class. Social icons with this class to rotate 360o in a smooth manner. In the waypoints initialization script, we are making the widget title to fade in after 1.5 seconds and the widget text to fade in after 3.5 seconds.

How to used Waypoints

$(function() {
//ELEMENT called DIV
$('.element').waypoint(function() {
$('.element').addClass('animated bounceInLeft'); //Add the animate.css
}, {
offset: '50%'
});
});

How to create your own Jquery Modal

Basic modal need a simple and easy code, sometimes it’s more appropriate to create your own than a full featured modal or lightbox plugin. This are guide to have an Instant Modal or you can check out the result here ยป

HTML

<div id="question"><h1>Question???</h1></div>
<div class="contactdet">
<div class="contactformfooter">
<div id="close">Close</div>
<h1>ANSWER</h1>
</div>

CSS

#question {cursor:pointer;}
.contactdet{display:none; background:#aaa; width:100%; height:100%; 
position:fixed; top:0; z-index:99999;}
.contactformfooter {width:240px; height:240px; position:relative; margin:10% auto 0 auto; padding:20px; border:1px #000 solid; background:#fff;}
.contactformfooter p{padding-bottom:10px; line-height:20px; font-size:12px;}
#close {width:50px; height:50px; position:absolute; right:-25px; top:-25px; cursor:pointer; background:#333; color:#fff;}

jQuery

jQuery( "#question" ).click(function() {
	jQuery(".contactdet").show();
});

jQuery( "#close" ).click(function() {
	jQuery(".contactdet").hide();
});	

Fully responsive Jquery Animation

Remax
The client want a fully responsive animation with the following descriptive details:
On load greenery scene then the beach on the back, the clients want historical event sequence (1693) of the place such as the railroad, the battle, the capitols, the farm and etc. They want also a tramway and the moving carousel on the beach. They also requested a night scenery of the place.

Methodology:
a. Percentage on size of every element
b. Percentage on margin of each position
c. Used jQuery.html5Loader
d. Resize script on screen
e. Created a repeating loop on Remax ballon
f. Separated the night view fade to the morning

Load Function of Jquery

I have encountered a bug on ie8, a css navigation to fadein once the flash was loaded. I have used the geturl function, the css navigation second level wasnt properly working.

Then, I google the on load function and other possibilities to load the navigation. Jquery have already load function that very useful. The load method is the simplest way to fetch data from the server.

Example 1: Load once the flash element was loaded or the whole html loaded.

$(document).ready(function(){
$(window).load( function () {
$('#myLoad').fadeTo(0, 1);
})
.end();
});

Example 2: As preloader

$(document).ready(function(){
$(window).load( function () {
$("#preloader").fadeOut(2000); THE PRELOADER
$("#image_container").fadeIn(3000); THE IMAGES
});
})
.end();
});

Gradient Masking of Jquery

On flash, we been using a GRADIENT MASKING action scripts for a fade in left to right, diagonal blocks and curtains slide show transition.

I’m amaze with the AviaSlider plugin of Jquery, a beautiful slide show transitions that capable of fade in/out, fade in any direction, diagonal blocks and curtains transition of images. Its also supported major browser, Firefox, Opera, Google Chrome and imagine its support Internet Explorer 6 to higher version. AviaSlider is also HTML5 ready.

AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery, it also comes with an image preloader so the slider starts when images are ready to be shown.

AviaSlides comes up with eight (8) unique transition effects, can supports linked images and taglines.

Apple love jQuery slideshow

I been using jQuery often now a days. jQuery slideshow advantage in SEO, compatible with more browsers than Flash including iPhone, cell phones, PS3 and PSP, these are some of the few reason on increasing demand using this framework. Below are some of my favorite.

a. mb.maskedGallery.doc
A slide show if you are have Custom frame for your images. You overlap any png file and it masked the gallery.

b. mb.mediaEmbedder
Easy was to put youtube, vimeo, flickr, livestream, ustream on your website

c.simple Jquery Image Slide show
A very simple fade in, fade out slide show with tagline

d.slideViewer
A sliding images gallery with pagination.

c. Jquery Cycle
A series of slideshow for simple code to advance Jquery Code.

d. Galleria Demo 01
This gallery was created from a simple unordered list with images – thumbnails and functionality is all in the Galleria plugin

e. Interface
Auto slide with preloader and ordered list images

f. CrossSlide
Overlapping images slideshow

g. Jquery Showcase
Showcasing Unordered list of image.