Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.11.2014, 11:04
Аспирант
Отправить личное сообщение для sss2019 Посмотреть профиль Найти все сообщения от sss2019
 
Регистрация: 15.06.2010
Сообщений: 41

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

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

Главное что это не просто увеличение физических размеров всех элементов на странице, а как будто страницу сфотографировали, и увеличивают изображение.
Ответить с цитированием
  #2 (permalink)  
Старый 03.11.2014, 11:57
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

jqueryui, наверное.
Там еще очень много красивостей для реализации интерфейса.
Ответить с цитированием
  #3 (permalink)  
Старый 03.11.2014, 11:59
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

sss2019, transform + transition.
Ответить с цитированием
  #4 (permalink)  
Старый 03.11.2014, 12:07
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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>

Последний раз редактировалось ruslan_mart, 03.11.2014 в 14:27.
Ответить с цитированием
  #5 (permalink)  
Старый 03.11.2014, 12:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064


<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>
Ответить с цитированием
  #6 (permalink)  
Старый 03.11.2014, 14:52
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

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

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

Но вы-то что сами себя будете развлекать, или пишите конкурирующий битриксу продукт?
Ответить с цитированием
  #7 (permalink)  
Старый 03.11.2014, 16:24
Аспирант
Отправить личное сообщение для sss2019 Посмотреть профиль Найти все сообщения от sss2019
 
Регистрация: 15.06.2010
Сообщений: 41

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

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

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
background resize IceDvl jQuery 4 25.04.2014 17:54
Переменная в области видимости всего сайта nix Events/DOM/Window 4 23.04.2014 08:52
Как проверить из iframe адрес всего сайта? culver Events/DOM/Window 9 29.05.2013 12:02
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55
не получается вложить один эффект в другой svip Библиотеки/Тулкиты/Фреймворки 1 30.03.2008 11:07