Saturday, March 19, 2016

Belajar Plugin.....

Hai teman teman berikut ini saya mencoba berbagi Salah satu mengenai plugin 
berikut coding dan display yg di hasilkan......

Berikut Coding HTML :


<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Fullscreen Slit Slider with CSS3 and jQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Fullscreen Slit Slider with CSS3 and jQuery" />
        <meta name="keywords" content="slit slider, plugin, css3, transitions, jquery, fullscreen, autoplay" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
<link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/styleNoJS.css" />
</noscript>
    </head>
    <body>
        
        <div class="container demo-2">

<!-- Codrops top bar -->
            <div class="codrops-top clearfix">
                <a href="http://tympanus.net/Tutorials/CSS3BouncingBall/">
                    <strong>&laquo; Previous Demo: </strong>3D Bouncing Ball with CSS3
                </a>
                <span class="right">
                <a href="http://www.flickr.com/photos/majownik/">Images by Mc Donald</a>
                    <a href="http://tympanus.net/codrops/?p=9357">
                        <strong>Back to Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->

            <header class="clearfix">

<h1>For Example Slit Slider <span>with CSS3 and jQuery</span></h1>

<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
</nav>

</header>

            <div id="slider" class="sl-slider-wrapper">

<div class="sl-slider">

<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="bg-img bg-img-1"></div>
<h2>There is no darkness but ignorance</h2>
<blockquote><p> bahwa sebenarnya tidak ada yang namanya kegelapan melainkan lahir dari kebodohan.</p><cite>William Shakspears</cite></blockquote>
</div>
</div>

<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="bg-img bg-img-2"></div>
<h2>Identify your passion then design your future</h2>
<blockquote><p>Kenali bakatmu lalu bangun dan rancanglah masa depan</p><cite>Petuah Bijak</cite></blockquote>
</div>
</div>

<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-3"></div>
<h2>By learning to obey we know to command</h2>
<blockquote><p>Dengan belajar tunduk sebenarnya kita sedang belajar memerintah</p><cite>Petuah Bijak</cite></blockquote>
</div>
</div>

<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-4"></div>
<h2>Dreams will never work unless you do</h2>
<blockquote><p>Impian tidak akan pernah menjadi kenyataan jika kita tidak melakukan tindakan nyata</p><cite>Petuah Bijak</cite></blockquote>
</div>
</div>

<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-5"></div>
<h2>Follow your heart but take your brain with you</h2>
<blockquote><p>Kita memang harus mengikuti kata hati, tapi jangan sampai meninggalkan logika</p><cite>Petuah Bijak</cite></blockquote>
</div>
</div>
</div><!-- /sl-slider -->

<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>

</div><!-- /slider-wrapper -->

<div class="content-wrapper">
<h2>About this article</h2>
<p>semoga article ini dapat memberi pengetahuan buat pembaca </p>
</div>

        </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ba-cond.min.js"></script>
<script type="text/javascript" src="js/jquery.slitslider.js"></script>
<script type="text/javascript">
$(function() {

var Page = (function() {

var $nav = $( '#nav-dots > span' ),
slitslider = $( '#slider' ).slitslider( {
onBeforeChange : function( slide, pos ) {

$nav.removeClass( 'nav-dot-current' );
$nav.eq( pos ).addClass( 'nav-dot-current' );

}
} ),

init = function() {

initEvents();

},
initEvents = function() {

$nav.each( function( i ) {

$( this ).on( 'click', function( event ) {

var $dot = $( this );

if( !slitslider.isActive() ) {

$nav.removeClass( 'nav-dot-current' );
$dot.addClass( 'nav-dot-current' );

}

slitslider.jump( i + 1 );
return false;

} );

} );

};

return { init : init };

})();

Page.init();

/**
* Notes: 

* example how to add items:
*/

/*

var $items  = $('<div class="sl-slide sl-slide-color-2" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1"><div class="sl-slide-inner bg-1"><div class="sl-deco" data-icon="t"></div><h2>some text</h2><blockquote><p>bla bla</p><cite>Margi Clarke</cite></blockquote></div></div>');

// call the plugin's add method
ss.add($items);

*/

});
</script>
</body>

</html>

Berikut hasilnya :