Вывеска на ветру - привлекает внимание!

Вывеска на ветру - привлекает внимание!

Привет дорогие друзья hello Недавно бродил по просторам интернета, и наткнулся на один сайт.

Сайт как сайт… Но он привлек мое внимание одним интересным элементом. В его шапке болталась красивая табличка. При наведении на нее – она раскачивалась еще больше surprised

В общем – мне стало интересно. И я решил выдрать ее с сайта. Разложить все по полочкам. А затем уже – поделиться своими открытиями с вами, мои дорогие друзья.

Что у меня получилось – можете посмотреть нажав на кнопку ниже:

Тренинг по вёрстке сайта на HTML5 и CSS3

Зацените вывеску

Ниже видео по его настройке и установке:

Файлы скрипта и картинки в PSD:

прямая ссылка

Куски кода из видео:

Это jquery, можете подключить с вашего сайта, если есть:

<script src="js/jquery.min.js"></script>

Маленький скрипт, отвечающий за раскачивание:

$(document).ready(function() {
  function swing(){
     $('.logo_tab').toggleClass('right_tab');
     setTimeout(swing, 1000);
  }
  swing();
});

Указываем ссылку и картинку:

<a class="logo_tab right_tab" href="http://master-css.com"><img src="logos/logo2.png" alt="Табличка на ветру"></a>

Стили для ссылки в которую заключена картинка:

a.logo_tab { float: left; margin: -125px 0 -20px -30px; }
a.logo_tab img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); } 
a.logo_tab.right_tab img { -moz-transform:rotate(-7deg); -webkit-transform:rotate(-7deg); -o-transform:rotate(-7deg); -ms-transform:rotate(-7deg); transform:rotate(-7deg); }
a.logo_tab:hover img { -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); }
a.logo_tab.right_tab:hover img { -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }

Ну вот вроде и все. Если что то не понятно - смотрите видео. В нем я все подробно разъясняю.

Комментариев: 62 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

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

(обязательно)

Комментариев: 62
  •  Александр | 27 апреля 2013 в 00:20:16

    Блин, вот беда, не могу нажать g+ выдаёт ошибку

    Возможно, сервис Google+ или доступ к нему с мобильных устройств отключен в вашем домене. Обратитесь за помощью к своему администратору.
    . А статья супер как и предыдущие!

  •  Серёга | 27 апреля 2013 в 09:58:36

    Ясно, а другие кнопки как? Смог скачать??

  •  Ирина Пехтерева | 27 апреля 2013 в 10:51:21

    Здорово! Спасибо, Серёжа!

  •  Серёга | 27 апреля 2013 в 10:55:53

    Пожалуйста smile

  •  Комментатор 589 | 27 апреля 2013 в 11:23:08

    Приветствую, Сергей. Действительно здорово, необычно. Обязательно установлю у себя. Мне нравиться все новое и оригинальное. Спасибо!

  •  Mikele | 27 апреля 2013 в 11:31:07

    Привет, Серж! Прикольный скрипитус, обязательно использую! Ну ты как всегда - на высоте!smile

  •  Серёга | 27 апреля 2013 в 11:35:04

    Все мы на высоте! Спасибо за комменты друзья!

  •  Наталья | 27 апреля 2013 в 14:53:15

    Спасибо!Интересный скипт.

  •  Dusaev Albert | 27 апреля 2013 в 22:42:05

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

  •  Лилиана | 27 апреля 2013 в 23:29:59

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

  •  Сергей | 28 апреля 2013 в 01:47:48

    Так Серега, а как его подключить этот скрипт? Ничего не выходит почему то.

  •  виктор | 28 апреля 2013 в 08:36:05

    Привет"Кольт"!

    Интересненький материальчик.но беда"

    На видео только черный экранчик(возможно

    это только у меня),т.е типа аудио курса.

    Жаль!

    А вообще "Спасибо за новинку"!

  •  Аноним | 28 апреля 2013 в 22:10:37

    Спасибо, проделала все по видео, все получилось, а на свой сайт ucoz не получается поставить

  •  Сергей | 29 апреля 2013 в 01:35:34

    Серега привет. Рассказывай как подключить скрипт на WP/ Сразу же нажму еще на соц кнопку. Гарантия

  •  Серёга | 29 апреля 2013 в 09:16:30

    Сергей - подключить куда?

    Виктор - обнови флеш плеер

    В ucoz я не разбираюсь

    Серёга smile я бы подсказал - не жалко, да вот только я вордпрессом не занимаюсь.

  •  Серёга | 29 апреля 2013 в 09:25:00

    Лилиана - отпишите нам через контакты.

  •  Сергей | 30 апреля 2013 в 01:19:19

    Тогда еще вопрос Серега! Этот скрипт на WP работать будет? Или зря я его туда заталкиваю. Но если ты не тестировал его на WP, то вопрос видимо не корректный. Спасибо брат!

  •  Серёга | 30 апреля 2013 в 13:59:37

    Почему нельзя? Можно куда угодно всунуть. Я просто не знаю как это всунуть на вордпресс smile

  •  Юрий | 30 апреля 2013 в 21:11:22

    Ну блин, Серега! У тебя что ни пост - то бомба. Спасибо! Попробую.

  •  Роман | 11 июня 2013 в 21:48:07

    Сергей, а как называется такой скрипт с кнопками соц сетей для получения ссылок? Это случайно не плагин "социальный замок" для wp?

  •  Серёга | 13 июня 2013 в 11:45:47

    Привет. Да. Только вот это не просто плагин а сервис, который можно использовать на любом сайте.

    Здесь я рассказываю о нем подробно: http://master-css.com/page/soc200

  •  Андрей | 16 июля 2013 в 19:54:59

    Прикольная штука.

    Я нажал на "мне нравится" ВКонтакте, но ссылки для скачивания не появилось.((

  •  Серёга | 16 июля 2013 в 20:30:17
    Внимание! При нажатие на кнопку Мне нравится от Вконтакте - жмите на ссылку - рассказать друзьям. Иначе замок не раскроется.
  •  Кристина | 25 июля 2013 в 19:13:42

    Спасибки огромное, как раз то, что надо!!!

  •  Нина | 5 августа 2013 в 16:32:00

    Спасибо за урок,скачала, буду пробовать.Кнопочки нажала все.

  •  Серёга | 5 августа 2013 в 23:02:33

    Спасибо Нина.

  •  Nadezhda | 10 августа 2013 в 00:31:02

    Сергей! Спасибо огромное за урок, так здорово, очень хочется сделать такой же, буду пробовать у себя на вордпрессе, кнопочки в гугле твиттере нажала и присоединилась к вам, теперь буду в курсе ваших новинок, а они все классные))

  •  Людмила | 20 августа 2013 в 11:11:54

    КЛАССНО ! ЖАЛЬ, ЧТО Я ЕЩЁ ПЛОХО ЗНАЮ ИНТЕРНЕТ.

  •  Вадим | 22 августа 2013 в 01:32:15

    Привет Серег, повторяешься, у меня уже 3 месяца на сайте висит, качается smile

  •  Вадим | 22 августа 2013 в 01:57:45

    И у тебя в комментариях дата белым цветом и её не видно на белом фоне smile

  •  Нина | 15 сентября 2013 в 13:07:45

    Сергей, при открытии ссылки - выдает 403, что это?

  •  Руслан | 16 сентября 2013 в 11:18:06

    Твиттанул, но доступ не получил. Что делать? Пишет:

    Forbidden

    You don't have permission to access on this server.

  •  Ольга | 25 сентября 2013 в 21:24:13

    Да, у меня тоже самое пишет ....не получается скачать((

  •  Серёга | 28 сентября 2013 в 12:25:18

    Друзья, замените в ссылке jino на myjino

  •  Александр | 30 сентября 2013 в 20:38:50

    Спасибо за урок ! Применил скрипт на практике http://biko.gorodyurga.ru

  •  Игорь | 15 октября 2013 в 08:28:44

    Файл не скачивается

  •  Амир | 19 октября 2013 в 00:00:33

    Здорово Серега!!!

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

  •  Сергей | 25 октября 2013 в 23:27:01

    Forbidden

    You don't have permission to access on this server.

    Обыдно однаке!!! низя скачать

  •  Севта | 25 октября 2013 в 23:30:17

    Я тоже кнопки нажала,а ссылки нет(((

  •  Vera | 26 октября 2013 в 20:58:48

    Спасибо огромное!

  •  Vera | 26 октября 2013 в 21:01:09

    А ссылка на скачивание не работает.

  •  Александр | 27 октября 2013 в 16:26:49

    Ссылка на работает. Выдает ERROR"404".

  •  Комментатор 718 | 30 октября 2013 в 23:32:01

    К сожалению, мне тоже самое выдало - Forbidden

    You don't have permission to access on this server.

  •  Комментатор 718 | 30 октября 2013 в 23:54:12

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

  •  Миланка | 11 ноября 2013 в 18:55:10

    Спасибки) качаю все уроки) продолжайте в том же духе)

  •  Сергей | 11 ноября 2013 в 21:48:16

    Странно и обидно. Скачать не удалось хотя нажмакал по всем кнопкам. В твитере даже читаю теперь. Скиньте на почту будь ласка архивчик 3644874 собака mail.ru

  •  Елена | 12 ноября 2013 в 12:10:54

    Сергей, написала вам на почту.

  •  Татьяна | 14 ноября 2013 в 17:37:30

    Наживаешь лайк - а скачать все равно не возможно. Даже через myjino.

    Обидно!

  •  Серёга | 14 ноября 2013 в 19:38:20

    Завтра постараюсь исправить. Извините.

  •  sergei199@yandex | 14 ноября 2013 в 21:26:14

    Скрипт прикольный. Но файлы с севиса не скачиваются- Выдается код 403 - нет доступа к серверу. Нельзя ли скинуть на почту?

  •  Ирина | 15 ноября 2013 в 07:47:24

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

  •  Иван | 14 декабря 2013 в 16:33:31

    Привет, у меня та же проблемка, что и у SERGEI199@YANDEX. Можно получить архивчик на почту? Дякую!

  •  Александр | 9 января 2014 в 02:06:21

    не могу скачать , пишет Forbidden

    You don't have permission to access on this server.

  •  Елена | 9 января 2014 в 02:49:54

    Иван и Александр, у нас поменялся сервер, поэтому ссылка не работает.

    Сергей все никак не может добраться до соц замков и поменять smile

    напишите нам на почту admin@master-css.com

    Я вам вышлю рабочую ссылку.

  •  Александр | 11 января 2014 в 14:10:01

    Красиво ) у меня тоже есть неплохой скрипт,можешь посмотреть: Ajax-форма для загрузки файлов - http://sahnenko-aleksandr.ru/web-master/statti/ajax-forma-dlya-zagruzki-fajlov.html

  •  Аноним | 26 января 2014 в 09:53:05

    e-мае... Плюсанул а ссылки нет(точнее битая ссылка)... Обновите пожалуйста...

  •  Комментатор 847 | 31 августа 2014 в 21:20:52

    Ссылка не рабочая...Вышлете...

  •  Дмитрий | 23 января 2015 в 18:54:59

    СвиNOмат0чнIE нормально отображают?

    Али здать пока ослу гвоздь в попку не задолбили?

  •  Сергей | 4 августа 2015 в 09:28:36

    Поставил табличку и сразу появилась проблема.

    Смотрите здесь - http://ledlive.by

    Таблика сдвигает блоки. которые находятся правее.

    С логотипом вопрос решим, а вот с блоками ссылок, пришлось убрать 6-ую, а то всё сдвигается и некрасиво получается.

    Есть решение этой проблеме?

    •  Михаил | 4 августа 2015 в 10:24:08

      Задай блоку main - position:absolute; либо поиграйся с z-index.

  •  Pepsolid | 18 сентября 2015 в 11:03:25

    переделал без javascript

    @keyframes veter {

    0% {-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); }

    50%{ -moz-transform:rotate(-12deg); -webkit-transform:rotate(-12deg); -o-transform:rotate(-12deg); -ms-transform:rotate(-12deg); transform:rotate(-12deg); }

    100%{ -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); }

    }

    @keyframes veterhover {

    0% { -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); }

    50% { -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); }

    100% { -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); }}

    .viveska {

    -webkit-animation-name:veter;

    animation-name: veter; -webkit-animation-duration: 2s;

    animation-duration: 2s; -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

    }

    .viveska:hover {

    -webkit-animation-name:veterhover;

    animation-name: veterhover; -webkit-animation-duration: 2s;

    animation-duration: 2s; -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite;

    }

  •  тоже Серега. | 15 марта 2016 в 16:55:23

    Оба на! По случайности напоролся на ваш сайт. Видео уроки от Сереги давно использую, а на сайте мастера впервые. На ваших уроках сделал свой сайт. http://setsetup.ru/ правда без прибамбасов, но зато написанный собственными руками, но постоянно использовал ваши видео-шпаргалки. Не хочу сказать что полностью все срисовывал. Я и раньше делал свои простенькие сайты на чистом html, да еще из каких-то генераторов кода. А теперь, благодаря Сереге, пишу сайты сам, хотя конечно прикручиваю и чужие куски кода. Ну а как без этого? Зачем изобретать велосипед и пытаться написать, например, такую сложную штуку как встроенный визуальный редактор, когда он уже сделан и, естественно, лучше чем это когда либо у меня получилось бы. Для чего все это пишу? А чтобы каждый знал: что предлагает Серега, надо брать - это всё стабильно качественное. По себе знаю.