article:
jQuery Plugin: PageSlide
article:
Elements Design: New Twitter Logo

jQuery Plugin: Approach

Advertisement

jQuery Approach works in a very similar manner to jQuery animate, however it animates over distance instead of time. The closer you get to the object, the more the style will be applied.

jQuery Plugin: Approach


Implement

Include the jQuery library and Approach plugin files in your webpage tag (preferably at the bottom of the page, before the closing BODY tag)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.approach-1.0.min.js"></script>


Next, add the following javascript code

<script type="text/javascript">
  $("#my_object").pageSlide({
    "fontSize": "48px"
  }, 200);
</script>


Demo - Growing and changing text color

<!--
Notice that the size and color of the text above changes
as your cursor approaches it.
-->

<!-- Beginning styles -->
<style>
  a#demo-link {
    font-size: 24px;
    color: #FFFFCC;
    line-height: 1.5em;
    text-align: center;
    text-decoration: none;
  }
</style>

<!-- The element -->
<a id="demo-link">I grow and change color</a>

<!--
Approach
Note: jQuery and jQueryUI (needed for the color change) are already included in this page.
-->
<script>
  $("a#demo-link").approach({
      "fontSize": "40px"
    , "color": "#CC3300"
  }, 200);
</script>



Demo - Opacity of multiple elements

<!--
In this demo, there are a series of circular images.
Their opacity changes as you approach each individual one.
-->

<!-- Beginning styles -->
<style>
  img.circle {
    float: left;
    height: 80px;
    width: 80px;
    opacity: 0.2;
    filter: alpha(opacity=20);
    zoom: 1;
    z-index: 0;
  }
</style>

<!-- The elements (there are 40 of them) -->
<img class="circle" src="http://farm3.static.flickr.com/2526/4011568848_ff5aeeefb8_o.jpg" />

<!--
Approach
Note: jQuery is already included in this page.
-->
<script>
  $("img.circle").approach({
    opacity: 0.8
  }, 100);
</script>



source
github
demo
download

Advertisement
Tags: jquery, plugin, web, develop, css, design, internet, animate, distance

Leave a Comment

No Comment

© Creative3x Ltd.