Return True - Granim.js - ساخت گرادیانت های شناور

Granim.js - ساخت گرادیانت های شناور

Granim.js یک کتابخانه برای ایجاد گرادیانت های شناور که با انیمیشن هایی قابل تنظیم میتونن از یک رنگ، به رنگ دیگه ای تبدیل بشوند.

در واقع با استفاده از این کتابخانه، میتونیم گرادیانت های شناور رو روی هدر، تصویر، کادر مقالات و یا هر جای دیگه ای قرار بدیم و جذابیت قسمت مورد نظرمون رو افزایش بدیم

تنها چیزی که لازمه اضافه کردن JS مورد نیاز برای کتابخانه می باشد

<script src="https://sarcadass.github.io/granim.js/assets/js/vendor/granim.min.js"></script>

در ادامه نیاز به یک canvas داریم تا برای داشتن گرادیانت، انتخابش کنیم

<canvas id="canvas-basic"></canvas> 

حالا میتونیم با استفاده از کتابخانه Granim.js ، گرادیانت مورد نظرمون رو به آیتم با شناسه canvas-basic بدیم

var granimInstance = new Granim({
    element: '#canvas-basic',
    direction: 'left-right',
    isPausedWhenNotInView: true,
    states : {
        "default-state": {
            gradients: [
                ['#07294d', '#F8B425'],
                ['#00F260', '#0575E6'],
                ['#F8B425', '#07294d']
            ]
        }
    }
}); 

مشاهده دمو 

نظرات