إنضم لنا

Cara Membuat progres Indikator scrol Artikel





selamat pagi boss... 

Setelah kemare sya membuat artikel yang berjudul cara membuat indikator scroll di blog dan kali ini sya akan membuat versi ke 2 nya namun kali ini berbeza ya bos ini sudah saya coba di template blog sya dan berhasil .skrang giliran kalian .untuk mencoba .dan di bawah ini adalah gambar contoh: kalian bisa liat..


sumber: https://webcensar.com
Di Bawah ini adalah codenya .
silahkan kalian masuk dulu di blogger kalian login terlebih dahulu dan edit html template kalian dan masukan jquery di bawah ini ..


<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript">
Namun Kalian Bisa Lewati Jika Template Kalian Sudah Ada Kode Sperti Di Atas Tpi Kalian Cek Dulu Coba Carikan Kata Kuci 1.1.2.1-min.js Atau min.js Jika Tidak Ada Silahkan Kalian Kopas kode di Di Atas Dan Pastel Kan Tepat Di Atas Kode

</head>



Lanjut Kan Dan Di bawah Ini Adalah Scrip Nya Kalia bisa Pastel Kan Kode Di bawa Ini tepat Tepat Di Atas Kode \\]]</script>



   */

(function ($) {

    $.progressIndicator = function(options){

        if(typeof options===undefined){

            options = {};

        }

        // set default

        options = $.extend(true, {

            direction : 'top',

            target : 'body', // selector

            barColor: 'rgb(253, 191, 38)',

            percentageEnabled : false,

            percentageColor: '#222',

            easingSpeed : 0.5,

            height: 4,

            onStart : function(){

                // console.log("onStart");

            },

            onEnd : function(){

                // console.log("onEnd");

            },

            onProgress : function(perecent){

                // console.log(perecent);

            }

        }, options);



        var wrapperCss = {

            position: 'fixed',

            transition: 'transform '+options.easingSpeed+'s cubic-bezier(.14,.52,.4,.78)',

            background: options.barColor

        };

        switch(options.direction){

            case 'top':

            case 'bottom':

                if(options.direction === 'top'){

                    wrapperCss.top = 0;

                }else{

                    wrapperCss.bottom = 0;

                }

                wrapperCss.left = 0;

                wrapperCss.transform = 'translate3d(-100%, 0, 0)';

                wrapperCss.width = '100%';

                wrapperCss.height = options.height+'px';

                break;

            case 'left':

            case 'right':

                if(options.direction === 'left'){

                    wrapperCss.left = 0;

                }else{

                    wrapperCss.right = 0;

                }

                wrapperCss.top = 0;

                wrapperCss.transform = 'translate3d(0, -100%, 0)';

                wrapperCss.width = options.height+'px';

                wrapperCss.height = '100%';

        }

        var perCss = {

            position: 'fixed',

            'line-height' : '1em',

            background: 'rgba(255, 255, 255, 0.7)',

            color: options.percentageColor,

            padding: '2px 2px',

            'font-size' : '8px'

        };

        if(options.percentageEnabled === false){

            perCss.display = 'none';

        }

        switch(options.direction){

            case 'top':

            case 'bottom':

                var top = options.height > 9 ? '50%' : '100%';

                if(options.direction === 'top'){

                    perCss.top = top;

                }else{

                    perCss.bottom = top;

                }

                if(options.height > 9){

                    perCss['margin-top'] = '-5px';

                    perCss.padding = '0 3px';

                    perCss.background = 'transparent';

                }

                perCss.right = 0;

                break;

            case 'left':

            case 'right':

                if(options.direction === 'left'){

                    perCss.left = '100%';

                }else{

                    perCss.right = '100%';

                }

                perCss.bottom = 0;

        }

        $('body').append(

            $('
')

            .css(wrapperCss)

            .attr('id', 'progress-indicator')

            .data('direction', options.direction)

            .data('onStart', options.onStart)

            .data('onProgress', options.onProgress)

            .data('onEnd', options.onEnd)

            .html(

                $('
').css(perCss)

            )

        );

        this.ex = function(){

            var $progressDom = $('#progress-indicator');



            var per = -1;

            var scrollTop = $(window).scrollTop();

            if($(options.target).length ===0){

                return false;

            }

            $(options.target).each(function(){

                if($(this).offset().top > scrollTop){

                    return true; // continue

                }

                per = (scrollTop / ($(this).outerHeight() - $(window).height())) * 100;

            });

            if(per > 100){

                per = -1;

            }

            var transformValue = '';

            switch($progressDom.data('direction')){

                case 'top':

                case 'bottom':

                    transformValue = 'translate3d(-'+(100-per)+'%, 0, 0)';

                    break;

                case 'left':

                case 'right':

                    transformValue = 'translate3d(0, -'+(100-per)+'%, 0)';

            }

            $progressDom.css({

                transform: transformValue

            }).children('div').css({

                // transform: 'translate3d('+(per)+'%, 0, 0)'

            }).text(parseInt(per)+'%');

            if(per == 0){

                $progressDom.data('onStart')();

            }else if(per == 100){

                $progressDom.data('onEnd')();

            }else{

                $progressDom.data('onProgress')(per);

            }



        }

        $(window).on('scroll.indicator', this.ex).trigger('scroll.indicator');

    };
$.progressIndicator({ barColor: 'rgb(191,38,60) ', percentageEnabled : true});
})(jQuery); 
Di bawah ini adalah html nya kalian taro di atas kode </body>

<div class='container'/>
Untu warna kalian bisa sesuaikan sendiri dan untuk melihat demonya silahkan klik DEMO

Ok semoga Membantu .Kalian Bisa Komentar Di bawah .Jika Kalian Kurang Mengerti Denga Apa Yang Saya Sampaikan Di Atas Sengaja .saya Berikan Tutorial Tidak Mendetail Agar Kalian Bisa Berkomentar ..Dan Saya Akan Berikan Tanggapan Steip By Setep Sajah BIAR mudah Di Mengerti ......

Ok sya Akhiri .Artikel Kali Ini ..Slamat Mencoba

Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail