Login / Join
Text with an Animated Background (Night Club)
submitted on 20/03/2013 by
Codicode
+ infos
Config
Embed
Share
Text with an Animated Background (Night Club)
by
Codicode
This experiment show how to create a Text with a CSS3 background and animate it.
the trick is to create the animatin in a div and place an svg object containing the text mask inside the div.
by Chtiwi Malek
http://www.codicode.com
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="370" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div id="bkDiv"> <svg width="100%" height="100%"> <defs> <mask id="theMask"> <rect width="100%" height="100%" fill="#fff" /> <text x="20" y="120" id="theText" fill="#000">Night CLUB</text> </mask> </defs> <rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" /> </svg> </div>
CSS
/* by Chtiwi Malek */ /* http://www.codicode.com */ body { background-color:#fff; } #bkDiv { margin:-2px auto 0px auto; background: linear-gradient(-45deg, #036 30%,transparent 45%,transparent 55%,#036 70%), linear-gradient(45deg, #036 30%,transparent 45%,transparent 55%,#036 70%); background-color: #f00; background-size: 15px 15px; background-position:0px 0px; height:100%; width:580px; animation: cAnim 1s linear 0s infinite; } @keyframes cAnim { 100% {background-position:15px 0px;} } #theText { font-family:Impact, Charcoal, sans-serif; font-size:120px; stroke:#000; stroke-width:5px; fill-opacity:0.1; stroke-opacity:1; animation: cAnim1 0.5s linear 0s infinite; } @keyframes cAnim1 { 100% {fill-opacity:0.9;stroke-opacity:0.5;} }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact