Автор

Необычная Captcha на html5, CSS3, JS

Необычная Captcha на html5, CSS3, JS


Предлагаю Вам очень, на мой взгляд, интересный вариант Captcha. Но как готовый модуль его использовать можно только в том случае, если страница с формой  не перезагружается. Да и вообще это больше идея с которой еще надо поковыряться чтобы применить для Captcha. Хотя человеку со знанием JavaScript это будет делом 5-10 минут!

Данный вариант можно также использовать для какого нибудь теста для детей и т.д.

ДЕМО
ИСХОДНИКИ

 

Исходный файл для скачивания - без стилевых изменений, а на демонстрационной странице я немного всё поменял на свой взгляд и вкус и привожу Вам свой пример:

 

HTML

Начнем с подключения стиля и скриптов:

<script src="js/hexaflip.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<link href="css/hexaflip.css" rel="stylesheet" type="text/css">

В нужное место вставляем вывод самиого содержимого:

<center>
    <header class="clearfix">
        <h2>Разложите правильно цвета ( <span style="color:#E74C3C;">red</span> <span style="color:#F7C221;">yellow</span> <span style="color:#3498DB;">blue</span> <span style="color:#93c943;">green</span> ), если вы не бот</h2>
    </header>
</center>
<div class="main">
     <div id="hexaflip-dem" class="demo"></div>
        <div>
            <botton id="submit">Проверить</botton>
            <div id="output"></div>
        </div>
</div>

 

JS

В нижней части страницы перед закрытием тега </body> вставляем сам обработчик:

    var hexadem,
            set = [
                {
                    value: 'orange',
                    style: {
                        backgroundColor: '#e67e22' 
                    }
                },
                {
                    value: 'teal',
                    style: {
                        backgroundColor: '#1ABC9C'
                    }
                },
                {
                    value: 'yellow',
                    style: {
                        backgroundColor: '#F7C221'
                    }
                },
                {
                    value: 'green',
                    style: {
                        backgroundColor: '#93c943'
                    }
                },
                {
                    value: 'blue',
                    style: {
                        backgroundColor: '#3498DB'
                    }
                },
                {
                    value: 'red',
                    style: {
                        backgroundColor: '#E74C3C'
                    }
                },
                {
                    value: 'violet',
                    style: {
                        backgroundColor: '#9B59B6'
                    }
                },
                {
                    value: 'gray',
                    style: {
                        backgroundColor: '#BDC3C7'
                    }
                }
            ];
    document.addEventListener('DOMContentLoaded', function(){

        var submit = document.getElementById('submit'),
                output = document.getElementById('output');

        hexadem = new HexaFlip(document.getElementById('hexaflip-dem'),
                {set1: set, set2: set, set3: set, set4: set},
                {size: 120,fontSize: 32, margin: 8, perspective: 1000}
        );
        submit.addEventListener('click', function(){
            if(hexadem.getValue().join(' ') === 'red yellow blue green'){
                output.innerHTML = 'Цвета угаданы! Ты просто умница!';

                setTimeout(function(){
                    $(".hexaflip-cube-set1").css('transform','translateZ(2000px)');
                },100);
                setTimeout(function(){
                    $(".hexaflip-cube-set2").css('transform','translateZ(2000px)');
                },400);
                setTimeout(function(){
                    $(".hexaflip-cube-set3").css('transform','translateZ(2000px)');
                },700);
                setTimeout(function(){
                    $(".hexaflip-cube-set4").css('transform','translateZ(2000px)');
                },1000);

            }else{
                output.innerHTML = 'Нифига, крути лучше :)';
            }
        }, false);
    }, false);

Для настройки размеров кубиков Вам нужна строка {size: 120,fontSize: 32, margin: 8, perspective: 1000} это размер кубика size: 120, размер текста на кубике fontSize: 32.

 

Вот и всё

Пользуйтесь, применяйте и я буду рад если этот пример поможет Вам для осуществления своих идей!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Необычная Captcha на html5, CSS3, JS

Применение этого скрипта позволит Вам анализировать заполнение обязательных полей формы. В отличие от многих других анализаторов форм , в этом варианте проверка выполняется на стороне клиента а не на серверной части. И лишь в случае заполнения нужных полей , введенная информация передается на сервер. Если требуемые поля не заполненны, то выдается сообщение с перечислением незаполненных полей и форма не передается на сервер.


Необычная Captcha на html5, CSS3, JS

Полоса прокрутки это неотъемлемая часть интерфейса, зачастую полоса прокрутки зависит от браузера и операционной системы, но если вы не хотите следовать установленным правилам, а установить свои, тогда вам потребуется небольшой плагин Tiny Scrollbar, который позволит создать собственную, плавную, полосу прокрутки с приятным интерфейсом. данный плагин позволяет реализовать как вертикальную так и горизонтальную полосу прокрутку. В данном уроке мы детально рассмотрим как подойти к данной реализации.


Необычная Captcha на html5, CSS3, JS

Стало известно, что новая операционная система windows будет отличатся от своих предшественниц футуристическим дизайном меню пуск, и отсутствие кнопки вызова в низу панели задач, это весьма насторожило, ведь прежние удобства стали недоступны и приходится переучиваться, но есть и поклонники данного нововведения. Безусловно, что новый пуск стал весьма эффектно смотреться, появились новые возможности и естественно инновация в нестандартном оформлении. Не успела данная операционная система толком выйти, как появились интересные решение.


Необычная Captcha на html5, CSS3, JS

В одном из моих первых заказов была необходимость создания интерактивных подсказок, которые появлялись постепенно на заданном изображении и должны были служить подписями для объектов на изображении. На то время мне это как представлялось, но все же я выполнил поставленную задачу. Действительно, такой вариант подсказок весьма эффектно смотрится. Как вы уже догадались, в сегодняшнем уроке мы рассмотрим как создать достаточно простые интерактивные подсказки с постепенным появлением и небольшой анимацией.


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close