1.1.0 • Published 9 years ago
yaco v1.1.0
YACo - Yes Another COlor !
Change background / color / border on scroll and more !
Just a simple and light background/color/border changer jQuery plugin.
Author: Thomas Brodusch
Version
1.1.0 "Ara Ararauna" - (13 november 2014)
Workflow
## 1.1.0 - "Ara Ararauna"
- Optional linking colors to particular elements. When you reach a certain div, the background color change !
you can define a div by add in html markup of the specific div: 'data-yaco=true' (and associate a color) 'data-color-yaco="#22A7F0" '
Installation
- Load jQuery
- Load YACo.js
npm install yaco
<script src="../src/jquery.yaco.js"></script>
- Define your "YACo div" (don't forget to set "data-yaco" at "true", and define a color of your choice in "data-yaco-color" !)
<div id="firstDiv" data-yaco="true" data-yaco-color="#22A7F0"></div> <div id="secondDiv" data-yaco="true" data-yaco-color="#6C7A89"></div>
4.Let YACo do the rest !
<script type="text/javascript"> /* Default behaviour of YACo - Change current page's background-color when reach specific div on scroll ! * Works with data attributes in html markup, easy as 1,2,3 ! * Be sure you have defined a yaco div to reach. (ex: [data-yaco="true"] ) * Be sure you have defined the changed color when the div is reach. (ex: [data-yaco-color="black"]) */ $('html').yaco(); // If you want to use YACo with some specifics options, on a specific element: * DON'T FORGET to set 'default' parameter to 'false' */ $('#anotherDiv').yaco({ default: false, change: ['border','color'], colors: ['#3498db','#9b59b6','#34495e'], delay: 0.8, transition: 'ease' }); </script>
Options
default: (boolean) - Enable/disable default behaviour of YACo.
(ex:false)
change: (array) - Apply the change on background/color/border
colors: (array) - Pass the set of colors you want to use
excludes: (array) - You want to excludes some colors
(ex: '#1abcd4','#16a085')
delay: (float)
(ex: 0.7)
transition: (string) - Css transition
(ex:'ease')
random: (boolean) - You want a random set of colors ? Set it to true.
(ex: true)