طراحی یک بنر خلاقانه با جاوا اسکریپت
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 3 دقیقه

طراحی یک بنر خلاقانه با جاوا اسکریپت

چند وقت پیش من این دموی جالب رو در سایت codepen دیدم و به این فکر افتادم چقدر خوب میشد بصورت کدنویسی بشه در وب نقاشی کرد. کتابخانه جاوا اسکریپتی بنام brushstroke این کار رو انجام میده . بوسیله اون میتونیم از رنگ ها , تصاویر و حتی کدهای Html داخل نقاشی مون استفاده کنیم.

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

شروع کار

استفاده از این کتابخانه بسیار سادست کافیه اون رو از این لینک دانلود کنید و به صورت زیر به فایل Html اضافه کنید :

<!-- Optional dependencies goes here -->

<script src="dist/brushstroke.min.js"></script>

<script>

    // Options for customization

    var options = {

        duration: 1,

        queue: true

    };



    // Initialization

    var bs = new Brushstroke(options);



    // Draw, erase, etc...

    bs.draw();

    bs.erase();

    bs.draw();

</script>

طراحی تصویر بک گراند

 

همینطور که مشاهده کردید پوستر ما شامل یک متن و یک تصویر بک گراند میشه. حالا میخوایم ببینیم چطور این بک گراند بصورت نقاشی درمیاد !

ما باید برای تصویر یک نمونه جدید از Brushstroke به همراه تمام ویژگی های لازم ایجاد کنیم, پس کدهای جاوا اسکریپتمون رو شروع می کنیم :

// Declaring variables



var width = window.innerWidth || document.body.clientWidth;

var height = window.innerHeight || document.body.clientHeight;

var optionsBackground, bsBackground;



// Random curves for background



optionsBackground = {

    animation: 'points',

    points: 10,

    inkAmount: 5,

    size: 300,

    frames: 10,

    frameAnimation: true,

    splashing: false,

    image: 'images/background.jpg',

    centered: true,

    queue: true,

    width: width,

    height: height

};

bsBackground = new Brushstroke(optionsBackground);

حالا ما میتونیم نقاشی مون رو شروع کنیم و بصورت زیر به افکتی میخوایم برسیم :


// Function to start the animation



function runAnimation() {

    // Draw a straight line

    bsBackground.draw({

        points: [0, height / 2 - 40, width, height / 3]

    });



    // Draw another straight line

    bsBackground.draw({

        points: [width, height / 2, 0, height / 1.5 - 40]

    });



    // Draw a curve generated using 20 random points

    bsBackground.draw({

        inkAmount: 3,

        frames: 100,

        size: 200,

        splashing: true,

        points: 20

    });

}



// Start



runAnimation();

نقاشی متن

این کتابخانه میتونه تصاویر رو بصورت مسیرهای SVG نقاشی کنه. ابزارهای زیادی برای بوجود آوردن متن بصورت SVG وجود داره که ما از افزونه ی Hershey Text که در نرم افزار Inkscape vector editor وجود داره استفاده کردیم (مطالعه بیشتر

بعد از رندرگیری با زدن کلیدهای Ctrl + L شکل متن رو زیباتر می کنیم و SVG ما به شکل زیر درمیاد:

خب حالا ما باید کد SVG رو در فایل Html وارد کنیم :

<!-- Each path is a letter in "Scotch.io" string -->

<svg width="1000" height="300" style="display: none">

    <path d="m157.76 105.88c-7.4053-8.9862-16.122-15.85-27.865-17.818-16.604-3.2803-35.244-2.2435-50.148 6.2719-8.4329 6.4228-15.194 15.018-10.757 25.919 6.9636 23.286 33.81 26.063 53.267 33.499 15.84 4.0064 32.554 13.238 35.503 30.658 1.8468 11.869-0.78168 21.884-11.233 28.659-14.576 8.9259-33.167 9.5932-49.689 6.8414-12.29-2.3318-20.767-8.5079-28.636-18.075"/>

    <path d="m272.9 150.66c-9.8598-11.768-23.423-22.368-39.709-19.191-13.362 0.5304-25.61 11.328-31.775 22.54-6.7138 13.934-7.1853 29.748-0.25697 43.707 5.5237 11.364 17.648 21.717 30.492 23.311 15.813 2.8302 30.126-5.4593 39.688-17.63l1.2482-1.2482 0.31262-0.31262"/>

    <path d="m343.27 131.47c-15.039 5.7827-27.96 17.873-30.612 34.262-4.0296 12.888 0.41254 27.839 7.52 38.602 9.0267 11.179 22.414 19.394 37.213 16.695 13.362-0.53038 25.61-11.328 31.775-22.54 6.7139-13.934 7.1853-29.748 0.25697-43.707-5.5237-11.364-17.648-21.717-30.492-23.311h-15.661z"/>

    <path d="m445.62 86.692c0.37493 36.778-0.74805 73.798 0.55819 110.42 2.5876 11.039 6.138 21.243 18.469 23.832 4.2802 0.18855 8.6454 0.0288 12.958 0.0819m-51.176-89.559h44.779"/>

    <path d="m586.36 150.66c-9.8598-11.768-23.423-22.368-39.709-19.191-13.362 0.5304-25.61 11.328-31.775 22.54-6.7139 13.934-7.1853 29.748-0.25697 43.707 5.5237 11.364 17.648 21.717 30.492 23.311 15.813 2.8302 30.126-5.4593 39.688-17.63l1.2482-1.2482 0.31262-0.31262"/>

    <path d="m631.14 86.692v134.34m0-63.971c12.158-12.114 24.92-29.2 44.341-25.588 10.207-0.53645 22.347 4.9455 22.978 16.444 6.3533 18.657 1.559 39.122 3.0479 58.568v14.546"/>

    <path d="m752.68 189.04c-15.025 6.5899 6.2843 18.544 5.1489 5.1489l-5.1489-5.1489z"/>

    <path d="m797.46 86.692c6.5899 15.025 18.544-6.2843 5.1489-5.1489l-5.1489 5.1489zm6.3971 44.779v89.559"/>

    <path d="m880.62 131.47c-15.039 5.7827-27.96 17.873-30.612 34.262-4.0295 12.888 0.41253 27.839 7.52 38.602 9.0268 11.179 22.414 19.394 37.213 16.695 13.362-0.53038 25.61-11.328 31.775-22.54 6.7139-13.934 7.1853-29.748 0.25697-43.707-5.5237-11.364-17.648-21.717-30.492-23.311h-15.661z"/>

</svg>

حالا میتونیم از این مسیرها در کد جاوا اسکریپت و برای نقاشی متنمون استفاده کنیم.


// Declaring variables



var optionsPath, bsPath;



// Options for text (SVG paths)



optionsPath = {

    animation: 'path',

    inkAmount: 2,

    frames: 20,

    frameAnimation: true,

    color: 'white',

    width: 1000,

    height: 300

};



// Initializing



bsPath = new Brushstroke(optionsPath);



// Draw each letter of the text, with a delay among them



var paths = document.querySelectorAll('path');

var delay = 0;



for (var i = 0; i < paths.length; i++) {

    bsPath.draw({path: paths[i], delay: delay});

    delay += 0.5;

}

افزودن عملیات اجرای دوباره

درنهایت کاری که میخوایم انجام بدیم اینه که یک امکان برای تکرار نمایش نقاشی در نظر بگیریم.

ایده اینه که یک صفحه سیاه رنگ نقاشی کنیم که شکل پاک کردن نقاشی مون بشه و دوباره انیمیشن اجرا بشه.

// Declaring variables



var button = document.querySelector('button');

var animating = true;

var optionsErase, bsErase;



// Erase and run again



optionsErase = {

    queue: true,

    size: 300,

    padding: 0,

    overlap: 100,

    inkAmount: 20,

    frames: 100,

    frameAnimation: true,

    color: '#000',

    width: width,

    height: height,

    end: function () {

        // Clear all canvas and run animation

        bsBackground.clear();

        bsPath.clear();

        bsErase.clear();

        runAnimation();

    }

};

bsErase = new Brushstroke(optionsErase);



// Run again button



button.addEventListener('click', function () {

    if (!animating) {

        toggleButton();

        bsErase.draw();

    }

});



function toggleButton() {

    button.classList.toggle('hidden');

    animating = !animating;

}



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

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
در انتظار ثبت رای

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید