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

Привет дорогие друзья Недавно бродил по просторам интернета, и наткнулся на один сайт.
Сайт как сайт… Но он привлек мое внимание одним интересным элементом. В его шапке болталась красивая табличка. При наведении на нее – она раскачивалась еще больше
В общем – мне стало интересно. И я решил выдрать ее с сайта. Разложить все по полочкам. А затем уже – поделиться своими открытиями с вами, мои дорогие друзья.
Что у меня получилось – можете посмотреть нажав на кнопку ниже:
Ниже видео по его настройке и установке:
Файлы скрипта и картинки в 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="https://expert-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); }
Ну вот вроде и все. Если что то не понятно - смотрите видео. В нем я все подробно разъясняю.
Блин, вот беда, не могу нажать g+ выдаёт ошибку
. А статья супер как и предыдущие!Ясно, а другие кнопки как? Смог скачать??
Здорово! Спасибо, Серёжа!
Пожалуйста
Приветствую, Сергей. Действительно здорово, необычно. Обязательно установлю у себя. Мне нравиться все новое и оригинальное. Спасибо!
Привет, Серж! Прикольный скрипитус, обязательно использую! Ну ты как всегда - на высоте!
Все мы на высоте! Спасибо за комменты друзья!
Спасибо!Интересный скипт.
Спасибо. Следующий сайт буду на максайт (в рифму вышло). А то тут freehost заглючил. Надо искать хостинг под этот движок, чтобы уж наверняка.
я нажала нравиться и поделиться с друзьями в контакте, а ссылка так и не пояыилась...
Так Серега, а как его подключить этот скрипт? Ничего не выходит почему то.
Привет"Кольт"!
Интересненький материальчик.но беда"
На видео только черный экранчик(возможно
это только у меня),т.е типа аудио курса.
Жаль!
А вообще "Спасибо за новинку"!
Спасибо, проделала все по видео, все получилось, а на свой сайт ucoz не получается поставить
Серега привет. Рассказывай как подключить скрипт на WP/ Сразу же нажму еще на соц кнопку. Гарантия
Сергей - подключить куда?
Виктор - обнови флеш плеер
В ucoz я не разбираюсь
Серёга
я бы подсказал - не жалко, да вот только я вордпрессом не занимаюсь.
Лилиана - отпишите нам через контакты.
Тогда еще вопрос Серега! Этот скрипт на WP работать будет? Или зря я его туда заталкиваю. Но если ты не тестировал его на WP, то вопрос видимо не корректный. Спасибо брат!
Почему нельзя? Можно куда угодно всунуть. Я просто не знаю как это всунуть на вордпресс
Ну блин, Серега! У тебя что ни пост - то бомба. Спасибо! Попробую.
Сергей, а как называется такой скрипт с кнопками соц сетей для получения ссылок? Это случайно не плагин "социальный замок" для wp?
Привет. Да. Только вот это не просто плагин а сервис, который можно использовать на любом сайте.
Здесь я рассказываю о нем подробно: https://expert-css.com/page/soc200
Прикольная штука.
Я нажал на "мне нравится" ВКонтакте, но ссылки для скачивания не появилось.((
Спасибки огромное, как раз то, что надо!!!
Спасибо за урок,скачала, буду пробовать.Кнопочки нажала все.
Спасибо Нина.
Сергей! Спасибо огромное за урок, так здорово, очень хочется сделать такой же, буду пробовать у себя на вордпрессе, кнопочки в гугле твиттере нажала и присоединилась к вам, теперь буду в курсе ваших новинок, а они все классные))
КЛАССНО ! ЖАЛЬ, ЧТО Я ЕЩЁ ПЛОХО ЗНАЮ ИНТЕРНЕТ.
Привет Серег, повторяешься, у меня уже 3 месяца на сайте висит, качается
И у тебя в комментариях дата белым цветом и её не видно на белом фоне
Сергей, при открытии ссылки - выдает 403, что это?
Твиттанул, но доступ не получил. Что делать? Пишет:
Forbidden
You don't have permission to access on this server.
Да, у меня тоже самое пишет ....не получается скачать((
Друзья, замените в ссылке jino на myjino
Спасибо за урок ! Применил скрипт на практике https://biko.gorodyurga.ru
Файл не скачивается
Здорово Серега!!!
классная статья, фишка крутая, сверстал шаблон по твоему бесплатному курсу, и хочу сказать спасибо. Как выложу в интернет дам ссылку, заценишь.
Forbidden
You don't have permission to access on this server.
Обыдно однаке!!! низя скачать
Я тоже кнопки нажала,а ссылки нет(((
Спасибо огромное!
А ссылка на скачивание не работает.
Ссылка на работает. Выдает ERROR"404".
К сожалению, мне тоже самое выдало - Forbidden
You don't have permission to access on this server.
Сергей, пожалуйста, что делать ещё, я очень хочу скачать, но никак. Соц. сети уже не принимают, пишут что я уже отправила. С ув. Ульяна
Спасибки) качаю все уроки) продолжайте в том же духе)
Странно и обидно. Скачать не удалось хотя нажмакал по всем кнопкам. В твитере даже читаю теперь. Скиньте на почту будь ласка архивчик 3644874 собака mail.ru
Сергей, написала вам на почту.
Наживаешь лайк - а скачать все равно не возможно. Даже через myjino.
Обидно!
Завтра постараюсь исправить. Извините.
Скрипт прикольный. Но файлы с севиса не скачиваются- Выдается код 403 - нет доступа к серверу. Нельзя ли скинуть на почту?
Здравствуйте. Впервые вижу что бы кнопочками социальных сетей закрывали что то полезное. )) Мне скрипрт не нужен, но кнопочки нажала. Может еще кому пригодится. ))
Привет, у меня та же проблемка, что и у SERGEI199@YANDEX. Можно получить архивчик на почту? Дякую!
не могу скачать , пишет Forbidden
You don't have permission to access on this server.
Иван и Александр, у нас поменялся сервер, поэтому ссылка не работает.
Сергей все никак не может добраться до соц замков и поменять
напишите нам на почту [email protected]
Я вам вышлю рабочую ссылку.
Красиво ) у меня тоже есть неплохой скрипт,можешь посмотреть: Ajax-форма для загрузки файлов - https://sahnenko-aleksandr.ru/web-master/statti/ajax-forma-dlya-zagruzki-fajlov.html
e-мае... Плюсанул а ссылки нет(точнее битая ссылка)... Обновите пожалуйста...
Ссылка не рабочая...Вышлете...
СвиNOмат0чнIE нормально отображают?
Али здать пока ослу гвоздь в попку не задолбили?
Поставил табличку и сразу появилась проблема.
Смотрите здесь - https://ledlive.by
Таблика сдвигает блоки. которые находятся правее.
С логотипом вопрос решим, а вот с блоками ссылок, пришлось убрать 6-ую, а то всё сдвигается и некрасиво получается.
Есть решение этой проблеме?
Задай блоку main - position:absolute; либо поиграйся с z-index.
переделал без 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;
}
Оба на! По случайности напоролся на ваш сайт. Видео уроки от Сереги давно использую, а на сайте мастера впервые. На ваших уроках сделал свой сайт. https://setsetup.ru/ правда без прибамбасов, но зато написанный собственными руками, но постоянно использовал ваши видео-шпаргалки. Не хочу сказать что полностью все срисовывал. Я и раньше делал свои простенькие сайты на чистом html, да еще из каких-то генераторов кода. А теперь, благодаря Сереге, пишу сайты сам, хотя конечно прикручиваю и чужие куски кода. Ну а как без этого? Зачем изобретать велосипед и пытаться написать, например, такую сложную штуку как встроенный визуальный редактор, когда он уже сделан и, естественно, лучше чем это когда либо у меня получилось бы. Для чего все это пишу? А чтобы каждый знал: что предлагает Серега, надо брать - это всё стабильно качественное. По себе знаю.
Доброго времени суток.
Подскажите ка убрать дёргань картинки я думал это только у меня но и в демко также картинка качается патом резко встаёт на 1-2 секунды патом снова качается
Доброго времени суток.
Подскажите как убрать эти дёрганья когда картинка какое то время качается патом резко встаёт на 1-2 секунды и снова начинает качаться.