Skip to content

Commit 3bd3b69

Browse files
glixglix
committed
jQuery Plugin For Background Text Color Transition Effects ColorFlow
1 parent 1441fa5 commit 3bd3b69

File tree

4 files changed

+163
-0
lines changed

4 files changed

+163
-0
lines changed

‎jQuery-Plugin-For-Background-Text-Color-Transition-Effects-ColorFlow/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015 Henry Dollman.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎jQuery-Plugin-For-Background-Text-Color-Transition-Effects-ColorFlow/README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# ColorFlow
2+
3+
[Check out an example here](https://henrygd.me/colorflow)
4+
5+
jQuery plugin, under 1kB in size, smoothly transitions between multiple background colors and/or text colors on any element. Inspired by the header effect at [clrs.cc](http://clrs.cc/).
6+
7+
## Instructions
8+
9+
## 1. Load jQuery and ColorFlow
10+
11+
```html
12+
<script src='https://code.jquery.com/jquery-1.11.2.min.js'></script>
13+
<script src="js/colorFlow.js"></script>
14+
```
15+
16+
## 2. Initialize ColorFlow
17+
18+
```javascript
19+
$('body').colorFlow({
20+
background: ['#85144b', '#F012BE', '#FFBC00', '#7FDBFF', '#01FF70'],
21+
text: ['#CF5D94', '#EFA9FA', '#665800', '#004966', '#00662C'],
22+
time: 25
23+
});
24+
```
25+
Colors can be provided in any format. They will be displayed in the order provided before looping back to the first color after the specified amount of time.
26+
27+
Time and at least one of background or text is required.
28+
29+
Go crazy (responsibly)!

‎jQuery-Plugin-For-Background-Text-Color-Transition-Effects-ColorFlow/examplepage.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>ColorFlow jQuery Plugin Demo</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
8+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
9+
<script src="js/colorFlow.js"></script>
10+
<style>
11+
span:hover { text-shadow: 0px 0px 1px rgba(0,0,0,0.35) }
12+
13+
#codepin {
14+
position: absolute;
15+
left: 50%
16+
}
17+
18+
pre {
19+
position: absolute;
20+
left: -283px
21+
}
22+
23+
h1 {
24+
font-size: 70px;
25+
font-family: 'roboto';
26+
text-shadow: 0px 1px 1px rgba(0,0,0,0.45)
27+
}
28+
</style>
29+
<style>
30+
@media(min-width:1920px) {
31+
32+
pre {
33+
font-size: 22px!important;
34+
left: -461px!important
35+
}
36+
37+
h1 { font-size: 135px!important }
38+
39+
span { font-size: 29px!important }
40+
}
41+
@media(min-width:1280px) {
42+
43+
pre {
44+
font-size: 17px;
45+
left: -355px
46+
}
47+
48+
h1 { font-size: 95px }
49+
50+
span { font-size: 20px }
51+
}
52+
@media(max-width:570px) {
53+
54+
pre {
55+
font-size: 10px;
56+
left: -213px
57+
}
58+
59+
h1 { font-size: 55px }
60+
}
61+
@media(max-width:400px) {
62+
63+
pre {
64+
font-size: 7px;
65+
left: -150px;
66+
}
67+
68+
h1 { font-size: 55px }
69+
}
70+
</style>
71+
</head>
72+
73+
<body>
74+
<div style="text-align:center;">
75+
<h1>ColorFlow</h1>
76+
<div class="jquery-script-ads" style="margin:20px auto;"><script type="text/javascript"><!--
77+
google_ad_client = "ca-pub-2783044520727903";
78+
/* jQuery_demo */
79+
google_ad_slot = "2780937993";
80+
google_ad_width = 728;
81+
google_ad_height = 90;
82+
//-->
83+
</script>
84+
<script type="text/javascript"
85+
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
86+
</script></div>
87+
</div>
88+
<script>
89+
$('body').colorFlow({
90+
background: ['#85144b', '#F012BE', '#FFBC00', '#7FDBFF', '#01FF70'],
91+
text: ['#CF5D94', '#EFA9FA', '#665800', '#004966', '#00662C'],
92+
time: 25
93+
});
94+
</script>
95+
<script type="text/javascript">
96+
97+
var _gaq = _gaq || [];
98+
_gaq.push(['_setAccount', 'UA-36251023-1']);
99+
_gaq.push(['_setDomainName', 'jqueryscript.net']);
100+
_gaq.push(['_trackPageview']);
101+
102+
(function() {
103+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
104+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
105+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
106+
})();
107+
108+
</script>
109+
110+
</body>
111+
</html>

‎jQuery-Plugin-For-Background-Text-Color-Transition-Effects-ColorFlow/js/colorFlow.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)