Оформление случайного контента эффектами

В прошлой статье мы разобрали, как разместить на странице рандомное содержимое – текст, изображение или ссылку. Сейчас разберем, как с помощью JQuery можно добавить эффекты при смене контента.

jQuery — это библиотека, предназначенная для упрощения работы с JavaScript кодом. Используя ее, мы сокращаем время на программирование эффектов, виджетов и прочего. Работать с ней просто и легко.
Большим плюсовм является тот факт, что поддерживается она всеми браузерами:
  • IE 6.0+;
  • FF 2.0+;
  • Safari 3.0;
  • Opera 9.0;
  • Chrome;
  • Yandex.
Как ее подключать, мы рассказывали в предыдущих статьях. Вообще в редакторе PIXLI она уже подключена. Только при использовании готовых виджетов и эффектов надо следить за версией. Нам же, для создания простых эффектов, хватит и того что есть по умолчанию.

Эффекты и анимация


Разберемся в методах создания эффектов, которые предлагает нам JQuery.
fadeOut() – постепенно скрывает элемент, изменяя его прозрачность. В качестве параметра можно указать скорость в миллисекундах.
fadeIn() – постепенно показывает элемент, увеличивая его прозрачность. В качестве параметра можно указать скорость в миллисекундах.
fadeTo() — позволяет постепенно скрыть или показать элемент. Вы можете постепенно скрывать и отображать элементы анимировано. Имеет два параметра – скорость и прозрачность.
slideUp() – плавно изменяет высоту элемента, увеличивая ее. В качестве параметра указывается скорость. Вторым параметром можно указать функцию, которая будет выполняться, когда эффект закончит свою работу.
slideDown() плавно изменяет высоту элемент, уменьшая ее. В качестве параметра указывается скорость. Вторым параметром можно указать функцию, которая будет выполняться, когда эффект закончит свою работу.
Hide() – сворачивает выбранный элемент с заданной скоростью. Параметры те же что и предыдущего. Если указать скорость, элемент прячется постепенно, при этом у него меняется высота.
Show() – разворачивает выбранный элемент с заданной скоростью. Параметры те же что и предыдущего. Если указать скорость, элемент как бы «разворачивается». Высота при этом меняется.
animate() — позволяет анимировать указанные css свойства элемента.
$("селектор").animate({стили},скорость,функция_смягчения,функция);
  • стили — задает перечень CSS стилей для анимации.
  • скорость — скорость выполнения анимации. Можно указывать словами «hide», «slow», «normal» или задать в миллисекундах.
  • функция_смягчения — задает функцию, которая будет отвечать за плавность выполнения анимации.
  • Функция — указывает имя функции, код которой будет выполнен после завершения анимации.
Stop() — останавливает выполнение запущенной анимации для выбранного элемента. В качестве указателя анимации используется селектор элемента, для которого она была описана и вызвана.

Анимируем новость


Для показа случайной новости при загрузки страницы мы описывали функцию JavaScript. Сейчас мы хотим, чтобы новость медленно исчезала и появлялась по прошествии определенного времени.
Воспользуется методом setInterval объекта Window, чтобы задать время изменения. Этот метод вызывает заданную функцию через указанное в миллисекундах количество времени.
Добавьте на страницу блок, настройте в нем текст. А затем под ним разместите виджет «HTML-код».

В html коде напишите JQuery функцию:
<script>
news=new Array()
  news[0]="5 фунтовая купюра с новым водонепроницаемым дизайном вышла в Великобритании. Благодаря новому дизайну купюра стала более долговечной и защищенной от подделки.";
  news[1]="Компания Mozilla по разработке программного обеспечения проводит совместную работу с дизайн-консультантом Johnson Banks по созданию новой айдентики своего бренда, а так же проводит опрос мнений широкой общественности о ребрендинге.";
  news[2]="Многопрофильной дизайн компании Osborne Ross (MULTI-DISCIPLINARY DESIGN CONSULTANCY) было поручено создать эту симпатичную и необычную коллекцию марок животных, цель которой сделать отправку почтовых сообщений более увлекательной. "
$("#idbd6e9cce-6906-f983-a531-d55eedbf9e70").text(news[0]);
   $(document).ready(function(){
    window.setInterval(function(){
      $("#idbd6e9cce-6906-f983-a531-d55eedbf9e70").fadeOut(2500);
      n=Math.round(Math.random()*3);
      $("#idbd6e9cce-6906-f983-a531-d55eedbf9e70").text(news[n]);
      $("#idbd6e9cce-6906-f983-a531-d55eedbf9e70").fadeIn(2500);
     },8000)
    });
</script>
В качестве селектора укажите ID блока, в котором будет размещена новость.
Метод text() выполняет ту же задачу, что и innerHTML в предыдущей статье – позволяет вывести текст в блок.
Первая строка выводит новость в блок сразу после его загрузки. Это необходимо, чтобы пользователь не ждал несколько секунд, пока контент появится.
Обратите внимание на время таймера. Оно должно превышать суммарное время эффекта. Иначе у вас накопится задержка и текст начнет изменяться в видимом состоянии.

Переливание цветов текста


Используя метод animate() и случайные цвета, можно реализовать переливающийся текст.
Для заголовка новости установим такую анимацию.
<script>
colors=new Array("#00FFFF","#7FFFD4","#00CED1","#0000FF")
$(document).ready(function(){
  window.setInterval(function(){
  n=Math.round(Math.random()*4)
  $("#id1aa21486-3a67-0271-d12d-92da773b3caf").animate({color:colors[n]})  
  },1000)
})
</script>

Заключение


Используя методы реализации эффектов JQuery, вы можете реализовать множество возможностей. Некоторые эффекты устанавливаются непосредственно в редакторе. Но если вы хотите использовать часы или случайный контент, то вам придется заняться программированием.
С JQuery это не составит проблем!
08 июня 2017, 09:35    Ivan Web-дизайн 0    3 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.