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%'
});
});

Responsive website with Matchmedia

Media queries is a great tool, but we often got a problem on loading time and optimization. Often time our website load all the things – even when they don’t apply.

Scott Jehl, Paul Irish, Nicholas Zaka attempts to optimise the loading of CSS based on viewport size and other factors. By using matchMedia() polyfill, we can now test whether a CSS media type or media query applies. Check out Paul Rhayes how to’s, experiment and Christian Hielmann Demo.

Your CSS

.mq {
  -webkit-transition: width 0.001ms;
  -moz-transition: width 0.001ms;
  -o-transition: width 0.001ms;
  transition: width 0.001ms;
  width: 0;
}

Javascript Event Listener

mql = (function(doc, undefined){

  var bool,
      docElem  = doc.documentElement,
      refNode  = docElem.firstElementChild || docElem.firstChild,
      idCounter = 0;

  return function(q, cb) {

    var id = 'mql-' + idCounter++,
      callback = function() {
        cb({ matches: (div.offsetWidth == 42), media: q });
      },
      div = doc.createElement('div');

    div.className = 'mq';
    div.style.cssText = "position:absolute;top:-100em";
    div.id = id;
    div.innerHTML = ' #'+id+' { width: 42px; }';

    div.addEventListener('webkitTransitionEnd', callback, false);
    div.addEventListener('transitionend', callback, false); //Firefox
    div.addEventListener('oTransitionEnd', callback, false); //Opera

    docElem.insertBefore(div, refNode);
    //don’t delete the div, we need to listen to events
    return {
      matches: div.offsetWidth == 42,
      media: q
    };
  };

})(document);

Javascript on the page

$(function() {
  var $dynamic = $('.dynamic');
  mql('all and (max-width: 700px)', change);
  mql('all and (max-width: 500px)', change);
  mql('all and (min-width: 1200px)', change);

  function change(mql) {
    console.log(mql);
    $dynamic.prepend('

' + mql.media + ' — ' + mql.matches + '

'); } });

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

CSS3 Filters

CSS3 Filters are a powerful tool that web authors can use to achieve interesting visual effects. Originated as part of the Scalable Vector Graphics (SVG) specification. Browser vendors such Mozilla, Chrome, Opera and IE added SVG capabilities. It now realized effectiveness and usefulness of filters when it became popular on Front End Developers and Designer. IE’s deprecated their own old CSS Filters to adopt the changes on CSS3 on their IE latest version.

CSS3 Filters, check the Compatibility and W3 Samples includes the following:

filter: blur(0px);
filter: brightness(1);
filter: contrast(1);
filter: url(0);
filter: drop-shadow(0);
filter: grayscale(0);
filter: hue-rotate(0deg);
filter: invert(0);
filter: opacity(1);
filter: sepia(0);
filter: saturate(1);
filter: custom(); – Check Here

Tutorials
Understanding the CSS Filters