Javascript эффекты для сайта – Эффекты для сайта — Страница 13 — Уникальные скрипты и готовые решения для сайта

CSS

Flash

Flash

HTML

HTML5

Javascript

Javascript

jQuery

Lightbox эффект

Lightbox эффект

PHP

PHP

WordPress

WordPress

Без категории

Без категории

Блог Apocalypse

Блог Apocalypse

Всё для Android

Всё для Android

Всё для Linux

Всё для Windows

Всё для Windows

Галереи изображений

Галереи изображений

Графика для сайта

Графика для сайта

Зимний раздел

Интересные статьи

Интересные статьи

Меню

Меню

Осенний раздел

Осенний раздел

Переключатели

Переключатели

Скрипты для uCoz

Скрипты для uCoz

Скрипты от Apocalypse

Скрипты от Apocalypse

Статьи для вебмастера

Статьи для вебмастера

Хинты

Хинты

Эффекты для сайта

Эффекты для сайта

9 удивительных эффектов для сайта, или Как это повторить?

У вас тоже часто бывает так, что зайдя на сайт и увидев там «классную штучку», вы ужасно хотите узнать, как же это сделали? Неважно, с целью повторить, использовать как базу для своего дизайна или просто полюбопытствовать «а что у него внутри?»

Туториалов и уроков много, но не всегда они достаточно понятны, и не всегда описанное в них применимо на реальном сайте. Я, например, тоже чаще встречаю оригинальные, привлекательные эффекты на живых сайтах, нежели в уроках и статьях.

Целью данной статьи является не просто показать вам интересные эффекты на разных сайтах, а и дать представление о том, как веб-мастера добились этих эффектов.

1. Эффект Parallax

Кликнув по картинке выше, вы попадете на сайт Nike. Покрутите колесико мышки вниз. Правда, прикольно? Это вариант так называемого эффекта Parallax. Он не так уж давно применяется в веб, но его уже можно встретить на десятках сайтов. На днях в статье о дружественном духе сайтов Дежурка публиковала пример дизайна персонажей от Турбомилк, где они используют палаллакс в более привычном варианте. А вот на сайте Silverback эффект заметен только в момент, когда пользователь изменяет размер окна браузера. Кому интересны научные стороны вопроса — загляните одним глазком в статью о параллаксе на Википедии, коротко и ёмко, как и всегда.

Как это делается

Ян Лунн написал отличнейший туториал о том, как воссоздать эффект параллакса с сайта Найк. Смотрим здесь.

2. Листаем страницы мышкой

На сайте Yess BMX представлен один из лучших, и в то же время крайне редко встречающихся эффектов. Попробуйте потянуть мышкой изображение вправо-влево.

И этот впечатляющий эффект не так уж и сложно повторить! Штука эта называется Dragdealer. Это JavaScript компонент, ориентированный на управление мышкой и имеющий воистину неограниченное количество вариантов развития и применения. Отличный подарок для программистов JavaScript.

Как это делается

Навигационное решение Dragdealer. Идем по ссылке и получаем кучу сведений.

3. Выдвигающиеся панели

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

Как это делается

Фантастический туториал от Коннора Звика из Nettuts о том, как сделать форму авторизации, работающую по принципу выдвигающейся панели. Смотрим здесь.

4. Код Konami

Если честно, до недавнего времени даже не слышал о Конами-коде; тем большим было мое удивление и восторг от каждой новой страницы, которую я обнаруживал с помощью кода Конами. Создатель этого «пасхального яйца» был явно впечатлен чит-кодом, действовавшим в видеоиграх производства Konami еще с далекого 1986 года.

Зайдите на сайт, кликнув по картинке выше, и введите комбинацию, указанную в конце этого абзаца. Еще можете загялнуть на konamicodesites.com — получите массу удовольствия 🙂
К сожалению, не все сайты этого списка продолжают поддерживать Конами-код, но на многих он очень даже работает.

Как это делается

Мэтт Кирман предлагает старый, но проверенно эффективный коротенький скрипт, который введет вашу страницу в тайный орден Konami-кода. Смотрим, как воссоздать код Конами на Javascript.

5. Эффект всплывающего текста (Hover-эффект)

Думаю, вы видели этот эффект 100500 раз, но раз уж вам неохота разбираться, как он делается, мы решили привести здесь готовое решение 🙂

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

Как это делается

Урок от Noura Yehia о том, как сделать выдвигающуюся панель с hover-эффектом смотрим на DevSnippets.

6. Страница-прелоадер

Да, я знаю, многие их не любят. Но тут такой вариант, что просто любо-дорого глянуть. Это простой, но приятный jQuery скрипт. В приведенном примере с сайта Vivascom все включено: и радующая глаз анимация, и функциональная полоса загрузки, и графика, которая будет сопровождать вас на всех страницах сайта. Вообще, отмечу очень красивое управление.

Как это делается

Переходим на Gayadesign, находим там информацию, ссылку для скачивания скрипта и демонстрационный пример. Стильный прелоадер для сайта.

7. Полоса прокрутки

В разделе What We Do вышеуказанного сайта Sapphire Sound мы видим замечательно выглядящий скроллбар для прокрутки содержащейся в блоке справа информации. Желающим завести у себя подобный скролл стоит воспользоваться плагином jQuery под названием jScrollPane.

Это кросс-браузерный плагин от Кельвина Лака, который преобразует родные скроллы браузера (для элементов с соответствующими свойствами overflow) в HTML-структуру, которую легко применить через CSS.

Как это делается

На сайте jScrollPane вы найдете полную информацию о том, как скачать и где просмотреть демо плагина.

8. Колесо мышки

Заходя на сайт, я люблю проверять, а подумали ли разработчики над удобством для пользователя. Приведу в пример сайт агентства Креативные Люди. Это вообще потрясный сайт, да к тому же ребята внедрили управление колесиком мышки для прокрутки ленты своего портфолио. Зайдите в раздел Web, Brand или Social и крутите колесо на мышке.

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

Как это делается

У Брэндона Аарона есть замечательный простой jQuery-плагин, поддерживающий управление с помощью колесика мышки. Зайдите на его страницу, чтобы узнать больше.

9. Слайдовая навигация

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

Как это делается

Заходим на сайт Tympanus и читаем их увлекательный урок 🙂

По материалам статьи Рубена д’Оливьеры

Комментарии

Оставить ответ

Похожие статьи

Случайные статьи

10+ крутейших JQuery плагинов для Вашего сайта бесплатно

Друзья, сегодня я предлагаю Вам скачать несколько самых красивых и бесплатных JQuery плагинов, которые только можно найти на просторах интернета. В данную подбору войдут: меню, слайдеры и ещё несколько очень красивых и полезных плагинов. Я думаю, что данная подборка точно Вам понравится. приятного Вам скачивания! 🙂

Так же рекомендую к просмотру и прошлые подборки:

Эластические элементы для сайта

Тут Вы сможете скачать несколько красивых и эластичных элементов для сайта с красивыми анимированными эффектами. Сюда входят навигация и кнопки, а так же ещё несколько элементов

Демо Ι Скачать

Классные и простые модальные окна на CSS и JQuery

Совершенно новые и современные модальные окна с множеством разнообразных примеров.

Демо Ι Скачать

Перспективные слайдеры для больших изображений

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

Демо Ι Скачать

Перетаскивания элементов на странице с помощью JQuery

Красивое и анимированное перетаскивание разнообразных элементов прям на странице сайта.

Демо Ι Скачать

Отлично реализованный поиск для сайта

Очень красивый и полноэкранный поиск для сайта с разнообразными подсказками.

Демо Ι Скачать

Обрезание изображений на HTML5 Canvas

С помощью этого JQuery плагина Вы с лёгкостью сможете реализовать на своём сайте моментальную обрезку изображений.

Демо Ι Скачать

Куча разнообразных эффектов для изображений при наведении

Замечательные и современные эффекты для изображений на Вашем сайте. Данные анимированные эффекты срабатывают при наведении на картинки.

Демо Ι Скачать

Эластичный эффект слайдера на JQuery

Интересный и красивый эластичный эффект, который срабатывает при перелистывании страницы слайдера. Смотрится очень современно и красиво.

Демо Ι Скачать

Крутые всплывающие подсказки

Очень красивые и новые всплывающие подсказки для разнообразных элементов на сайте. Так же есть несколько разнообразных примеров, которые Вы можете тоже использовать.

Демо Ι Скачать

Несколько анимационных фонов для сайта

Крутые и анимационные фоны, которые Вы можете использовать на фоне Вашего сайта, так же присутствует несколько разнообразных примеров.

Демо Ι Скачать

Эффекты меню

Тут Вы можете скачать несколько меню для сайта, которое имеет красивые эффекты при его открывания пользователем.

Демо Ι Скачать

effect » Страница 2 » Скрипты для сайтов

Xoverlay — CSS3 эффекты наведения

Xoverlay представляет из себя набор CSS стилей, который поможет довольно просто добавлять современные эффекты наведения на ваш сайт. Собрано более 50 эффектов, но если вы будете их комбинировать, то вариантов будет еще на несколько десятков больше — более 150 эффектов.

Hover.css — коллекция CSS3 эффектов при наведении

Hover.css — коллекция CSS3 эффектов воспроизводимых при наведении на любой элемент, к которому применены определенные CSS классы. Доступно более 40 эффектов.

FancyText — текстовые эффекты для инпутов

  FancyText — jQuery плагин плюс CSS3 анимация. Плагин позволяет из обычного текстового поля (input) получить составной элемент (input + label) с разнообразным количеством эффектов на выбор. Использование плагина очень простое: нужно добавить в HTML документ текстовое поле, добавить пользовательские атрибуты и вызвать функцию FancyText.

Эффекты при наведении для блоков с заголовками

  Немножко свежих идей для красивого оформления блоков с заголовками при наведении на них курсора. Тонкие линии, белый цвет — ничего лишнего. Будем использовать 3D transform и transition для псевдо-элементов — работать данные эффекты будут только в современных браузерах.

Эффект наведения следующий за направлением курсора

Реализуем на CSS3 и jQuery эффект при наведении на картинку, при котором, накладываемый слой, перемещается от одной картинки к другой в направлении, которое определяется движением курсора мыши.

Красивая таблица цен для хостинга

Поговорим о создании очень симпатичных таблиц для показа, в нашем случае, хостинг-тарифов. Применен очень интересный эффект при наведении на тарифный план, созданный с помощью CSS3 transition. Цвета, шрифт можно настроить в CSS, поэтому приспособить такую таблицу на сайт не составит труда.

3D анимация вращения куба

Сегодня будет создавать 3D анимацию вращения используя css3 3d transform и css3 animation без использования jаvascript.

Эффект фокусировки на изображении

Эффект фокусировки на изображении. При наведении на фотографию, остальные снимки затемняются. Реализован данный эффект ввиде не совсем обычного слайдера.

Необычные эффекты при наведении

В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 — основой будут css3 transitions.

3D эффекты при наведении

Создадим захватывающие 3D эффекты при наведении с использованием CSS3 и jQuery. В примерах использовать будем миниатюры изображений, при наведении на которые будет показываться полезная информация.

CSS3 эффекты при наведении

Урок в котором мы научимся создавать интересные эффекты при наведении на изображения. Особенность заключается в использовании свойства border. Работать такие эффекты будут только в современных, поддерживающих css3, браузерах.

jFancyTile — слайдер с эффектом мозайки

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