5 красивых, но бесполезных эффектов на JQuery / CSS3

Собрал небольшую подборку из очень эффектных, впечатляющих и красивых вариантах применения CSS3 в совокупности JavaScript-библиотеки JQuery и ей подобных, но бесполезных. «Почему бесполезных?», — да банально потому, что  такие примеры не кроссбраузерны. А пока вы будете их адаптировать под все основные интернет-обозреватели, вам начнет нравится flash анимация, и вы скорее всего возненавидите JQuery.

Что касается браузера. Для просмотра лучше всего использовать Google Chrome, — как самый быстрый на сегодняшний день. Или Firefox на крайний случай. Или иные программы на базе движка webkit.

1. Капельки воды по стеклу

JQuery капли воды

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

Просмотреть Скачать
(далее…)

Опубликовано 11-10-2013 в 17:18

Фотогалереи и слайдеры для ваших сайтов

Небольшая подборка из 5 различных фронтенд фотогалерей с использованием возможностей JQuery и аналогичных библиотек.

Фотогалерея GalleryView с автопроигрыванием

JQuery плагин GalleryView - фотогалерея на сайт

Фотогалерея под названием GalleryView представляет собой JQuery плагин. Есть функция автоматической прокрутки изображений. Справа, слева, снизу или сверху может отображаться небольшая панель навигации с превьюшками и кнопками управления. В верхнем левом углу есть небольшая иконка при нажатии на которую выпадает краткое описание фотографии.

Скачать Просмотреть
(далее…)

Опубликовано 4-09-2013 в 12:04

JQuery поиск всех email на странице в блоке

Далее представлен небольшой пример регулярного выражения на JavaScript и программного кода с JQuery, который позволяет искать все адреса электронной почты внутри заданного элемента HTML на веб-странице.

jQuery(document).ready(function($) {

    var text_block = $('#my_block_with_emails').text();
    var email_regularexp = /[\._a-zA-Z0-9-]+@[\._a-zA-Z0-9-]+/igm;
    var return_block = $('#finded_emails');
    var emails = text_block.match(email_regularexp);
    return_block.empty();

    $.each(emails, function(index, value) {
        return_block.append(value);
        (index !== emails.length - 1) ? return_block.append(', ') : '';
    });

})

(далее…)

Опубликовано 3-09-2013 в 16:03

JQuery и плавный переход по ссылке-анкору

Показанный ниже сниппет представляет из себя JQuery плагин, который позволяет реализовывать плавную прокрутку по якорям / анкорам на веб-странице:

jQuery.fn.scroll_to_anchor = function(){
    this.stop(false , false) // - отключаем анимацию, если она уже запустилась
    jQuery('html,body').animate({scrollTop: this.offset().top},'slow');
    return this;
}

Оформите этот код в отдельный файл, назвав его к примеру jquery.scroll_to_anchor.js. Вызов плагина производится следующим образом:

$('#part1').scroll_to_anchor(); // - идем по якорю
Опубликовано 29-08-2013 в 10:05

JQuery ссылки: распознаем внешние

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

Итак, используем регулярные выражения и JQuery:

$(document).on('click', 'a', function() {

    // Шаблон, содержащий домен нашего сайта: 
    var homeURL = /red-book-cms\.ru/;

    // Вытаскиваем URL по которому был совершен клик:
    var href = $(this).attr('href');
    

(далее…)

Опубликовано 12-08-2013 в 15:23

JQuery текст и его обрезка

Наверняка на многих популярных ресурсах вы могли заметить такой занимательный функционал: если комментарий или вообще какой-то там кусочек текста слишком велик по объему, то он динамично сворачивается JavaScript-ом до заданной длины. Это достаточно легко можно пристроить и на ваши сайты, — благо есть соответствующий JQuery плагин.

Обратите внимание! Вообще существует, как минимум два варианта такой обрезки текста. Первый — это, как уже было показано плагином, описанным выше, прямой учет количества символов внутри выбранного блока. Его серьезным недостатком является то, что в данном случае нужно отдельно реализовывать учет открываемых HTML тегов (ведь мы же часто имеем не только простой не отформатированный текст?). Ну а второй вариант рассмотрим в одной из следующих статей.

JQuery текст с динамичной обрезкой

(далее…)

Опубликовано 6-08-2013 в 16:39

JQuery: последний элемент

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

(далее…)

Опубликовано 19-06-2013 в 14:24













Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Последние твиты