├── img ├── favicon.ico ├── largetile.png ├── smalltile.png ├── widetile.png ├── mediumtile.png ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── android-chrome-192x192.png ├── apple-touch-icon-114x114.png ├── apple-touch-icon-120x120.png ├── apple-touch-icon-144x144.png ├── apple-touch-icon-152x152.png ├── apple-touch-icon-180x180.png ├── apple-touch-icon-57x57.png ├── apple-touch-icon-60x60.png ├── apple-touch-icon-72x72.png └── apple-touch-icon-76x76.png ├── jquery.spectrum.js.zip ├── js ├── main.js └── jquery.spectrum.js ├── README.md ├── index.html └── css ├── style.css └── animate.css /img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/favicon.ico -------------------------------------------------------------------------------- /img/largetile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/largetile.png -------------------------------------------------------------------------------- /img/smalltile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/smalltile.png -------------------------------------------------------------------------------- /img/widetile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/widetile.png -------------------------------------------------------------------------------- /img/mediumtile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/mediumtile.png -------------------------------------------------------------------------------- /img/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/favicon-16x16.png -------------------------------------------------------------------------------- /img/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/favicon-32x32.png -------------------------------------------------------------------------------- /img/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/favicon-96x96.png -------------------------------------------------------------------------------- /jquery.spectrum.js.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/jquery.spectrum.js.zip -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | // Document Ready 2 | 3 | $(document).ready(function(){ 4 | $('.header').spectrum(); 5 | }); -------------------------------------------------------------------------------- /img/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/android-chrome-192x192.png -------------------------------------------------------------------------------- /img/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /img/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /img/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /img/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /img/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /img/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /img/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /img/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /img/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andreacrofts/spectrum-plugin/HEAD/img/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Spectrum 2 | ======== 3 | 4 | A dynamic & colourful jQuery plugin perfect for adding subtle colour transitions to your web applications. View it live at www.andreacrofts.codes/spectrum. 5 | 6 | ### First Things First 7 | Download jquery.spectrum.js and place the file into the JavaScript folder in your directory. The root path should look something like this: 8 | 9 | ``` 10 | mainFolder > js > jquery.spectrum.js 11 | ``` 12 | 13 | ### Getting Started 14 | Include jQuery and the jquery.spectrum.js script in your HTML document, before the closing body tag, as demonstrated below. Note that the plugin script must be placed after the jQuery script, and must be properly linked from your directory (example, js/jquery.spectrum.js). 15 | 16 | 17 | ``` 18 | 19 | 20 | 21 | ``` 22 | 23 | ### Initialization 24 | Paste the following code into your primary JavaScript file (for example, main.js) to initialize jquery.spectrum.js and to call the function: 25 | 26 | ``` 27 | $(document).ready(function(){ 28 | $('.header').spectrum(); 29 | }); 30 | ``` 31 | 32 | ### Customization 33 | To change the colours in the spectrum, substitute the existing RGB values in the jquery.spectrum.js file to your RGB values of choice. 34 | 35 | ``` 36 | var colourArray = [{ 37 | src: 'colour1', 38 | colour: 'rgb(252,115,49)' 39 | }]; 40 | ``` 41 | 42 | ### CSS Time 43 | Insert the following code into your CSS file (for example, style.css). 44 | 45 | ``` 46 | .spectrumHeader { 47 | transition: background-color 4s ease; 48 | } 49 | ``` 50 | 51 | ### The Final Touch 52 | Ensure that the corresponding HTML element (in this case, the header) has an id of spectrumPlugin and a class of spectrumHeader. 53 | 54 | ``` 55 |
56 | ``` 57 | 58 | 59 | That's it! Enjoy your spectrum, and go wrap the interwebz in chroma. 60 | If you'd like to improve this plugin, please feel free to fork it ;) 61 | -------------------------------------------------------------------------------- /js/jquery.spectrum.js: -------------------------------------------------------------------------------- 1 | $.fn.spectrum = function(options) { 2 | // Defining the variables 3 | var index = 0; 4 | var $element = $(this); 5 | 6 | // Array of Colours 7 | var colourArray = [ 8 | 9 | // Colour 1 - Orange 10 | { 11 | src: 'colour1', 12 | colour: 'rgb(252,115,49)' 13 | }, 14 | 15 | // Colour 2 - Pink 16 | { 17 | src: 'colour2', 18 | colour: 'rgb(236,0,140)' 19 | }, 20 | 21 | // Colour 3 - Yellow 22 | { 23 | src: 'colour3', 24 | colour: 'rgb(241,196,15)' 25 | }, 26 | 27 | // Colour 4 - Green 28 | { 29 | src: 'colour4', 30 | colour: 'rgb(95,178,106)' 31 | }, 32 | 33 | // Colour 5 - Blue 34 | { 35 | src: 'colour5', 36 | colour: 'rgb(113,137,255)' 37 | } 38 | ]; 39 | 40 | //Use set interval to go through our colourArray 41 | //Each interval change the background colour of the element 42 | //Plugin is on, and increment the index. 43 | setInterval(function() { 44 | //Change background of selected $element to be 45 | //colourArray[index] 46 | //Increment index 47 | index = index + 1; 48 | //Make sure that index is not larger than the length of the colourArray 49 | //If so, 50 | },4000); 51 | 52 | // Create a style tag 53 | var style = $("