(XFI) Логотип текст 1.0.0

Георгий Шевченко · 25 Апр 2014

Пользователь Георгий Шевченко разместил новый ресурс:

(XFI) Логотип текст - Анимированный логотип (текст)

Описание:
Текстовый логотип (ссылка)

Инструкция по установке:
Посмотреть вложение 16364
Демонстрация:

Для просмотра этого контента нам потребуется ваше согласие на установку файлов cookie третьих лиц.
Более подробную информацию можно найти на нашей странице cookie.

Обязательно сделать:
Посмотреть вложение 16365

Автор:
Георгий Шевченко

Узнать больше об этом ресурсе...

NightNegative · 30 Апр 2014

Не ну круто че:)
Вот я бы конечно хотел что бы была возможность сделать это не в бб кодах, а конкретно на логотипе форума.
Кстати очень понравилась подобная реализация вот на этом сайте -

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

При наведении на лого он начинает дрожать, как реализовать?

Георгий Шевченко · 30 Апр 2014

NightNegative написал(а):
Не ну круто че:-)
Вот я бы конечно хотел что бы была возможность сделать это не в бб кодах, а конкретно на логотипе форума.
Кстати очень понравилась подобная реализация вот на этом сайте -
У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

При наведении на лого он начинает дрожать, как реализовать?

Вот пример:

Код:

<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<title>Фото при наведении трясется</title>
<script type="text/javascript">
function shakeleft()
{
document.getElementById('image').style.position="relative";
document.getElementById('image').style.left="16px";
timer=setTimeout("shakeright()",50);
}

function shakeright()
{
document.getElementById('image').style.left="0";
timer=setTimeout("shakeleft()",45);
}

function stoptimer()
{
clearTimeout(timer);
}
</script>
</head>

<body style="background: #333;">
<img id="image" src="http://xenforo.info/styles/default/xenforo/logo.png"
onmouseover="shakeleft()"
onmouseout="stoptimer()"  />
</body>
</html>

Демонстрация:

NightNegative · 30 Апр 2014

Ну это вперед назад, а интересует именно так что бы оно вроде как бы дрожал:)
Вы вырвали код с сайта или это ваше?

Георгий Шевченко · 30 Апр 2014

NightNegative написал(а):
Ну это вперед назад, а интересует именно так что бы оно вроде как бы дрожал:-)
Вы вырвали код с сайта или это ваше?

Вы по ищите в гугле Дрожание объектов при наведении или что-то в этом духе.[DOUBLEPOST=1398860888,1398852241][/DOUBLEPOST]

NightNegative написал(а):
Ну это вперед назад, а интересует именно так что бы оно вроде как бы дрожал:-)
Вы вырвали код с сайта или это ваше?

Если не нашли , держите.
Вот пример:

Код:

<body>
  <center>
    <section class="content">
      <h1>Наведи на картинку</h1>
        <br>
        <br>
          <img src="http://xenforo.info/data/avatars/l/3/3040.jpg?1398277915" class="shake">
      <h2 class="shake">Текст дрожит наведи сюда</h2>
    </section>
  </center>
</body>
<style>
body{
  background-color:#FB861D;
}
.content {
  margin: 5% 0 0 0%;
}
.shake {
    display:inline-block
}
.shake {
    display:block;
    position:relative;
}
img{
display: block;
height: 250px;

border-radius: 50% 50% 50% 50%;
}
h2.shake,
.shake.inline {
    display:inline-block
}
h1,p,h2{
  color:#FFF;
}
@-webkit-keyframes spaceboots {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
</style>

NightNegative · 30 Апр 2014

Я сделал вот так:

Код:

<span class="eye">North City</span>

и css

Код:

.eye {
    display: block;
    position: relative;
    width: 85px;
    height: 56px;
    margin-right: 10px;
   
}
.eye:hover {
    -webkit-animation: 0.1s tremor ease-out infinite; 
    animation: 0.1s tremor ease-out infinite;   
}
@-webkit-keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
}
@-moz-keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
}
@-ms-keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
}
@-o-keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
}
@keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
}

Георгий Шевченко · 30 Апр 2014

NightNegative написал(а):

Я сделал вот так:

Код:

<span class="eye">North City</span>

и css

Код:

.eye {
    display: block;
    position: relative;
    width: 85px;
    height: 56px;
    margin-right: 10px;
  
}
.eye:hover {
    -webkit-animation: 0.1s tremor ease-out infinite;
    animation: 0.1s tremor ease-out infinite;  
}
@-webkit-keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
}
@-moz-keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
}
@-ms-keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
}
@-o-keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
}
@keyframes tremor {
    0%, 25% {
        left: -1px;
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    50%, 100% {
        left: 1px;
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg);
    }
}

Пример аналогичен))

(XFI) Логотип текст 1.0.0

Георгий Шевченко

NightNegative

Георгий Шевченко

NightNegative

Георгий Шевченко

NightNegative

Георгий Шевченко

Похожие темы

Мы ценим вашу конфиденциальность