Форум

sss2019 · #1 (**permalink**) 03.11.2014, 11:04

Здравствуйте. В админке 1С битрикс, при вводе логина и пароля есть такой эффект:
Если логин и пароль верный, то форма авторизации вместе с фоном как бы увеличиваются и затухают, а на их месте появляется админка.
Очень красивый эффект, видел его еще на нескольких сайтах.

Какими способами можно достичь этого?

Главное что это не просто увеличение физических размеров всех элементов на странице, а как будто страницу сфотографировали, и увеличивают изображение.

Erolast · #2 (**permalink**) 03.11.2014, 11:57

jqueryui, наверное.
Там еще очень много красивостей для реализации интерфейса.

ruslan_mart · #3 (**permalink**) 03.11.2014, 11:59

sss2019, transform + transition.

ruslan_mart · #4 (**permalink**) 03.11.2014, 12:07

http://learn.javascript.ru/play/QfUJnb

<!DOCTYPE HTML>
<html>
  
  <head>
    <style>
      .test {
        bottom: 0;
        box-shadow: 0 0 10px #000;
        height: 100px;
        left: 0;
        margin: auto;
        padding: 10px;
        position: fixed;
        right: 0;
        top: 0;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        width: 180px;
      }
      .test:hover {
        -moz-transform: scale(1.3);
        -o-transform: scale(1.3);
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
      }
    </style>
  </head>
  
  <body>
    <div class="test">Наведи на меня
      <p>
        <input type="text">
      </p>
      <input type="button" value="OK">
    </div>
  </body>

</html>

рони · #5 (**permalink**) 03.11.2014, 12:17

<style>
div{
    position: relative;
    top: 150px;
    left: 200px;
    width: 100px;
    height: 100px;
    background: #FFFF00;
    color: #3333FF;
    -webkit-animation: test 2s infinite forwards;
    animation: test 2s infinite forwards;
}

@-webkit-keyframes test{
    100%{
       filter: alpha(opacity=20);
opacity: 0.2;
-webkit-transform: scale(3);
-moz-transform: scale(3);
-o-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);

    }
}
@keyframes test{
 100%{
 filter: alpha(opacity=20);
opacity: 0.2;
-webkit-transform: scale(3);
-moz-transform: scale(3);
-o-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);

    }
}
</style>
<div>
  test
</div>

kostyanet · #6 (**permalink**) 03.11.2014, 14:52

Очень интересно зачем администратору сайта такая развлекуха? Он же не клиент.

Ну то есть битрикс так рекламирует себя, делает все чтобы понравиться администраторам, ибо от них во многом зависит выбор начальства администраторов.

Но вы-то что сами себя будете развлекать, или пишите конкурирующий битриксу продукт?

sss2019 · #7 (**permalink**) 03.11.2014, 16:24

Сообщение от kostyanet

Очень интересно зачем администратору сайта такая развлекуха? Он же не клиент.

Ну то есть битрикс так рекламирует себя, делает все чтобы понравиться администраторам, ибо от них во многом зависит выбор начальства администраторов.

Но вы-то что сами себя будете развлекать, или пишите конкурирующий битриксу продукт?

Ну битрикс поскольку платный, то наверно стараются сделать все красиво.

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

Спасибо всем, очень помогли)

Форум

Справочник

Discord чат

Курсы javascript