آموزش ساخت صفحه نمایش تیتر روزنامه ها

آموزش ساخت صفحه نمایش تیتر روزنامه ها

در این اموزش ما به شما نحوه ساخت یک پلاگینی رو میدیم که شما میتونید در آن مطالب مهم روزنامه ها رو به صورت عکس نمایش بدید.این پلاگین برای وبسایت های خبری میتونه بسیار مفید باشه که میتونن در این صفحه مطالب مهم روز رو تو اون قرار بدهند. خوب کار رو شروع می کنیم

برای مشاهده لینک وارد شود

تمام کار هایی که باید انجام شود توسط jQueryانجام میشود و ما باید فقط فایل های JS و استایل ها رو وارد کنیم.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Spinning Newspaper Effect | 8np Demo</title>

        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!-- Embedding the Anton font from Google Webfonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Anton&v2" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <h3 id="fin">That is all</h3>

        <!--
            This div uses the "Anton" font,
            preloading it for the canvas element
        -->
        <div id="fontPreload">.</div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
         </script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

در بخش head ما فایل styles.css و همچنین فونت Anton را از گوگل وارد می کنیم.در بخش پایانی کد نیز ما ورژن ۱.۶.۲کتابخانه jQuery  و فایل script.js را وارد می کنیم.تگ()fontPreload# برای این مثال بسیار مهم است و کار آن استفاده کردن از فونت Anton است.این برای اینکه مرورگر ها قبل از استفاده canvas فونت های مورد نیاز را مقدار دهی اولیه کنند.بدون این کار روزنامه خالی خواهد بود.

jQuery

چون ما از یک فونت خاص استفاده می کنیم لذا فونت باید قبل از اینکه ما از آن برای نمایش تیترها استفاده کنیم باید لود شود.ما از

ایونت()window).load)$ برای فراخوانی استفاده می کنیم.

assets/js/script.js

$(window).load(function(){

    var imgPath = "assets/img/";

    // Define 6 paper covers:

    var papers = [
        {
            line1:"The financial",
            line2:"chrisis is a hoax!",
            subtitle:"Economist admits practical joke"
        }, {
            line1:"Deeply fried now",
            line2:"considered healthy",
            subtitle:"Scientists change the definition of \"Healthy\""
        }, {
            line1:"Apple announces",
            line2:"the new iphone 9",
            subtitle:"5, 6, 7 and 8 deemed \"not hip enough\""
        }, {
            line1:"The world did end",
            line2:"on may 21st!",
            subtitle:"Priest argues we are actually dead"
        }, {
            line1:"France imposes an",
            line2:"internet kitten tax",
            subtitle:"Every cat picture on the internet will cost 3 €"
        }, {
            line1:"Thank you &",
            line2:"goodbye",
            subtitle:"The Zine Weekly takes its farewell"
        }
    ];

    // Check whether canvas and CSS3 animations are supported:

    if(!$.support.canvas){
        $('#fin').html('Sorry, your browser does not<br />support &lt;canvas&gt;').show();
        return;
    }

    if(!$.support.css3Animation){
        $('#fin').html('Sorry, your browser does not<br />support CSS3 Animations').show();
        return;
    }

    // Use jQuery.Deferred to bind a callback when all
    // the images that comprise the paper are loaded:

    $.when(

        loadImage(imgPath+"paper_top.png"),
        loadImage(imgPath+"paper_left.png"),
        loadImage(imgPath+"paper_center.jpg"),
        loadImage(imgPath+"paper_right.png"),
        loadImage(imgPath+"paper_bottom.png")

    ).then(function( imgTop, imgLeft, imgCenter, imgRight, imgBottom ){

        // Loop through the paper covers and
        // create a new canvas for each one:

        $.each(papers,function(i){

            var canvas	= document.createElement("canvas"),
                c		= canvas.getContext("2d");

            canvas.width = 717;
            canvas.height = 526;

            // Drawing the paper background slices:

            c.drawImage( imgTop, 0, 0 );
            c.drawImage( imgLeft, 0, 12 );
            c.drawImage( imgCenter, 14, 12 );
            c.drawImage( imgRight, 711, 12 );
            c.drawImage( imgBottom, 0, 516 );

            // Drawing the text using our helper
            // function (see at the bottom):

            drawText( this.line1, this.line2, this.subtitle, c, 358, 250 );

            // Appending the element to the page.
            // This triggers the CSS3 animation.

            setTimeout(function(){
                $("body").append(canvas);
            },i*5800);

        });

        // "This is all"
        $('#fin').delay(papers.length*5800).fadeIn();
    });

    /*------------------------
        Helper functions
    ------------------------*/

    // Load an image by URL and resolve a jQuery.Deferred:

    function loadImage(src){

        var def = new $.Deferred(),
            img = new Image();

        img.onload = function(){

            //	Resolve the deferred. The img parameter
            //	will be available in the then function:

            def.resolve(img);
        }

        // Always set the src attribute
        // after the onload callback:

        img.src = src;

        return def.promise();
    }

    // Draw two lines of text and a subtitle
    // on the canvas (passed as the c param):

    function drawText( line1, line2, subtitle, c, x, y ){

        c.font = "65px Anton,Calibri";
        c.textAlign = "center";
        c.fillStyle = "#3e3e3e";

        c.fillText(line1.toUpperCase(),x,y);
        c.fillText(line2.toUpperCase(),x,y+80);

        c.font = "italic 20px Georgia,serif";
        c.fillStyle = "#737373";

        c.fillText(subtitle,x,y+120);
    }
});

(function(){

    // Adding custom checks for canvas and css3
    // animations support, to the jQuery.support object:

    $.support.canvas = 'getContext' in document.createElement('canvas');

    $.support.css3Animation = (function(){
        var sp = $('<span>');

        return (
            sp.css("-webkit-animation") !== undefined	||
            sp.css("-moz-animation") !== undefined		||
            sp.css("animation") !== undefined
        );

    })();
})();

ودر آخر ما کد های CSS را به ترتیب وارد می کنیم.

ابتدا ما canvas را به صفحه اضافه می کنیم که در زیر مشاهده می کنید

canvas{
    position:fixed;
    width:717px;
    height:526px;
    top:50%;
    left:50%;
    margin:-263px 0 0 -358px;
    opacity:0;
    /* Configure the animation for Firefox */
    -moz-animation-duration:6s;
    -moz-animation-name:spin;
    -moz-animation-timing-function:linear;
    /* Configure it for Chrome and Safari */
    -webkit-animation-duration:6s;
    -webkit-animation-name:spin;
    -webkit-animation-timing-function:linear;
}

سپس برای اینکه پلاگین ما در تمامی مرورگر ها قابل نمایش باشد تنظیمات مربوط به هر یک را وارد می کنیم

@-moz-keyframes spin{
    ۰%{
        opacity:0.2;
        -moz-transform:scale(0.2) rotate(0deg);
    }

    ۱۵%{
        opacity:1;
        margin:-263px 0 0 -358px;
        -moz-transform:scale(1) rotate(1090deg);
    }

    ۹۰%{
        opacity:1;
        top:50%;
        -moz-transform:scale(1) rotate(1090deg);
    }

    ۱۰۰%{
        top:500%;
        opacity:1;
        -moz-transform:scale(1) rotate(1090deg);
    }
}

​@-webkit-keyframes spin{
    ۰%{
        opacity:0.2;
        -webkit-transform:scale(0.2) rotate(0deg);
    }
    ۱۵%{
        opacity:1;
        margin:-263px 0 0 -358px;
        -webkit-transform:scale(1) rotate(1090deg);
    }
    ۹۰%{
        opacity:1;
        top:50%;
        -webkit-transform:scale(1) rotate(1090deg);
    }

    ۱۰۰%{
        top:500%;
        opacity:1;
        -webkit-transform:scale(1) rotate(1090deg);
    }
}

پایان

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


پنج + = 9