jQuery

【jQuery】ネオン管が光っているようなテキストNeon Text Generator

September 8, 2016
Neon Text

Neon Text Generatorはテキストをネオン管が光っているような美しい色にしてくれるjQueryプラグイン。

JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="neon_text.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			/*Стандартны параметры*/
			$('.first_neon').neonText();
			/*С настройкой*/
			$('.second_neon').neonText({
				textColor:'white',
				textSize:'40pt',
				neonHighlight:'white',
				neonHighlightColor:'#008000',
				neonHighlightHover:'#FFFF00',
				neonFontHover:'white'
			});
			$('.third_neon').neonText({
				textColor:'white',
				textSize:'40pt',
				neonHighlight:'white',
				neonHighlightColor:'#00FFFF',
				neonHighlightHover:'#7FFF00',
				neonFontHover:'white'
			});
		});
		</script>

HTML

<div class="first_neon">Enjoy NEON</div>
<div class="second_neon">Enjoy NEON</div>
<div class="third_neon">Enjoy NEON</div>

CSS

テキストシャドウはCSS

.first_neon {
    background: none repeat scroll 0 0 #000000;
    border: 1px solid;
    border-radius: 15px;
    color: #FFFFFF;
    cursor: pointer;
    float: left;
    font-family:"Warnes";
    margin: auto;
    padding: 26px 10px;
    text-align: center;
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE;
    transition: text-shadow 0.5s ease 0s;
    width: 250px;
}

.first_neon:hover {
    text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #00FFFF, 0 0 70px #00FFFF, 0 0 80px #00FFFF, 0 0 100px #00FFFF;
}

MITライセンス