Обмен готовыми решениями - JavaScript - Ответ 7158709

@omninamed · 28.01.2015, 11:17

Писал для сайта игрового сообщества (клан-сайт) логотип в стиле газоразрядных неоновых вывесок как в старых американских барах (несколько неисправных символов), т.к. я не силён в рисовании флешек и гифок, реализовал всё чисто с программерским подходом. Может кому пригодится моё творчество.

neon.css

CSS

/* Удалить, если будете использовать на своём сайте */
body
{
  background-color: #000;
}
 
/* Шрифт для баннера */
.neon, .broken
{
    color: transparent;
    font-size: 64px;
    font-family: Swis721 BdOul BT, Gabriola;
    font-style: italic;
    text-decoration: none;
    letter-spacing: .05em;
}
 
/* Полное свечение */
.neon
{
    text-shadow:
    0 0 .02em hsla(60,100%,50%, 1),
    .04em .02em .05em hsla(80, 100%, 70%, .8),
    .03em .03em .1em #00ff00,
    .03em .03em .1em #00ff00,
    -.03em .03em .1em #00ff00,
    -.03em -.03em .1em #00ff00,
    .03em .03em .8em #00ff00,
    .03em -.03em .8em #00ff00,
    -.03em .03em .8em #00ff00,
    -.03em -.03em .8em #00ff00;
}
 
/* Сломанное свечение */
.broken
{
    text-shadow:
    0 0 .02em hsla(60,100%,50%, .6),
    .04em .02em .05em hsla(80, 100%, 70%, .3),
    .03em .03em .1em hsla(0, 100%, 0, .3),
    .03em .03em .1em hsla(0, 100%, 0, .3),
    -.03em .03em .1em hsla(0, 100%, 0, .3),
    -.03em -.03em .1em hsla(0, 100%, 0, .3);
}

neon.js

Javascript

/* Элементы. Здесь замените ID на те, которые Вам нужны (неисправные буквы логотипа) */
var elemL1 = document.getElementById ( 'letter1' );
var elemL2 = document.getElementById ( 'letter2' );
var elemL3 = document.getElementById ( 'letter3' );
 
/***********************************/
/* Переменные для настройки движка */
 
/* Лимиты времени простоя */
var letterStateTimeoutMin = 3000;
var letterStateTimeoutMax = 10000;
 
/* Лимиты количества блинков */
var letterBlinksLimitMin = 5;
var letterBlinksLimitMax = 10;
 
/* Лимиты времени между блинками */
var letterBlinkTimeoutMin = 40;
var letterBlinkTimoutMax = 120;
 
/*******************************/
/* Переменные состояний движка */
 
/* Состояния элементов */
var letter1state = 0;
var letter2state = 0;
var letter3state = 0;
 
/* Счётчики блинков для каждого элемента */
var letter1counter = 0;
var letter2counter = 0;
var letter3counter = 0;
 
/* ГПСЧ с задаваемыми диапазонами */
function getRandom ( min, max )
{
    min = parseInt ( min );
    max = parseInt ( max );
    return ( Math.floor( Math.random ( ) * ( max - min + 1 ) ) + min );
};
 
/* Функция "выключает" элемент и ставит таймер включения */
function letterOff ( elem, state, counter, limit )
{
    if ( elem )
    {
        if ( state == 1 )
        {
            elem.className = 'broken';
            state = 0;
            setTimeout ( function ( ) { letterOn ( elem, state, counter, limit ); },
                getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
        };
    };
};
 
/* Функция "включает" элемент с эффектом газоразрядного стартера и ставит таймер на отключение */
function letterOn ( elem, state, counter, limit )
{
    if ( elem )
    {
        if ( state == 0 )
        {
            elem.className = 'neon';
            state = 1;
        }
        else if ( state == 1 && ( counter + 1 ) < limit )
        {
            elem.className = 'broken';
            state = 0;
        };
        timerId = setTimeout ( function ( ) { letterOn ( elem, state, counter, limit ); },
                         getRandom ( letterBlinkTimeoutMin, letterBlinkTimoutMax ) );
        if ( ++counter >= limit )
        {
            clearTimeout ( timerId );
            counter = 0;
            setTimeout ( function ( ) { letterOff ( elem, state, counter, limit ); },
                getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
        };
    };
};
 
/* Инициализация и запуск баннера */
function letterBeginShow ( )
{
    letter1state = parseInt ( getRandom ( 0, 1 ) );
    if ( letter1state == 0 )
    {
        elemL1.className = 'broken';
        setTimeout ( function ( ) { letterOn ( elemL1, letter1state, letter1counter,
            getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
            getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    }
    else
    {
        elemL1.className = 'neon';
        setTimeout ( function ( ) { letterOff ( elemL1, letter1state, letter1counter,
            getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
            getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    };
 
    letter2state = parseInt ( getRandom ( 0, 1 ) );
    if ( letter2state == 0 )
    {
        elemL2.className = 'broken';
        setTimeout ( function ( ) { letterOn ( elemL2, letter2state, letter2counter,
            getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
            getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    }
    else
    {
        elemL2.className = 'neon';
        setTimeout ( function ( ) { letterOff ( elemL2, letter2state, letter2counter,
        getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
        getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    };
 
    letter3state = parseInt ( getRandom ( 0, 1 ) );
    if ( letter3state == 0 )
    {
        elemL3.className = 'broken';
        setTimeout ( function ( ) { letterOn ( elemL3, letter3state, letter3counter,
            getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
            getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    }
    else
    {
        elemL3.className = 'neon';
        setTimeout ( function ( ) { letterOff ( elemL3, letter3state, letter3counter,
            getRandom ( letterBlinksLimitMin, letterBlinksLimitMax ) ); },
            getRandom ( letterStateTimeoutMin, letterStateTimeoutMax ) );
    };
};
 
letterBeginShow ( );

Ну и тестовая страница neon.html

HTML5

<html lang="en">
    <head title="Neon">
    <link rel="stylesheet" href="neon.css">
        <body>
            <center>
                <font class="neon" id="letter1">R</font><font class="neon">ubico</font><font class="neon" id="letter2">n</font><font class="neon"> & </font><font class="neon" id="letter3">N</font><font class="neon">exus</font>
            </center>
        </body>
    </head>
</html>
<script src="neon.js"></script>

Файлы проекта прилагаются. Не забываем благодарить))

Вернуться к обсуждению:
Обмен готовыми решениями JavaScript

Следующий ответ

Другие темы раздела
JavaScript В html из файла Народ возник вопрос. мне нада чтоб html страница с помощью скрипта (лутше ява) в одно место подгружала из файла текст и он распознавался страницей как html код https://www.cyberforum.ru/ javascript/ thread5098.html	Диалоговое окно с кнопками "да" и "нет" JavaScript Подскажите как сделать, когда жмешь на картинку, что бы выходило диалоговое окно с кнопкоми да и нет, подтверждение действия.
JavaScript Исходник сапера на javascript Помогите пожалуйста найти исходник игры сапер на javascript. Очень нужно. Заранее благодарю https://www.cyberforum.ru/ javascript/ thread4278.html	JavaScript Нужен учебник по Js Дайте пожалуста Полный путёвый учебник по JavaScript со словарём со всеми функциями примерами и наворотами под несколько браузеров !!!!! Doberman@xaker.ru или ссылку!! Заранее огромное спасибо! https://www.cyberforum.ru/ javascript/ thread4236.html
JavaScript swfobject.js как его писать или дайте учебник(на русском) Помогите разобраться в сценарии с расшерение js, в частности хочу сделать менюшку что бы она отображалась когдта в браузере отключен запуск активного содержания окна и отоброжение рисунков Заранее спасибо!	JavaScript вопрос javascript как задать исполнение скрипта в определенной ячейке таблицы текущего документа(сменяемый текст)... https://www.cyberforum.ru/ javascript/ thread4212.html
JavaScript Изменение размера окна -> изменение размера картинки https://www.cyberforum.ru/ javascript/ thread4203.html Есть картинка на Homepage, как сделать так, что бы при изменении окна браузера размер картинки автоматически изменялся соответственно размерам окна.	Ссылка на дочернее окно (javascript) JavaScript Привет всем. Неподскажете как получить ссылку на дочернее окно из родительского (при отсуствие ссылки 'widow.open()') ? Проблема в следующем. Есть N-ное количество всплывающих окон открытых одно из другово. Как из любого окна получить ссылку на дочернее окно ? Зарание Спасибо.
JavaScript Технология AJAX или опять JS? https://www.cyberforum.ru/ javascript/ thread3489.html Необходимо добавить на страницу таблицу с данными из текстового файла вида: 0\|data1\|data2\|data3... 1\|data1\|... ... n\|data1\|... Мне нужно загнать все эти данные в двумерный массив. В PHP это сделать можно, только вот страница полностью обновиться, а как это сделать в JS - не имею и малейшего понятия. Слышал, что используя принцип Ajax можно обновлять только нужные части документа, а не...	JavaScript Ловля Enter'a c помощью удочки Javascript https://www.cyberforum.ru/ javascript/ thread3331.html Два элемента формы (text,password). Юзер активировал text и ввёл, допустим, логин. Далее нужно при нажатии на Enter активировать пароль.
JavaScript Как отлючить возможность скачивать фотографии с сайта? Помогите пжлта. Ситуация: создана страничка на бесплатном сайте .narod.ru, загружены на эту страничку фотографии. Вопрос: как сделать так , что бы эти фотографии нельзя было скачать любым пользователям на комп, вообще как-нибудь скачать, т.е. выключить правую кнопку мыши?	JavaScript Передача counter рипит-тега из JSP в JS Два вводных предложения. 1. Проблема не чистый скрипт а результат использования в странице JS и JSP. 2. Я чайник. https://www.cyberforum.ru/ javascript/ thread3160.html

	28.01.2015, 11:17