Развернуть div от родительского div до центра viewport

Question

Итак, я смог expand the div from the center of viewport, но теперь я хотел бы расширить div, начиная с окна «click me», создавая эффект/иллюзию, что коробка исходит из него, увеличивая все путь к центру просмотра.

Он должен следовать за блоком «Щелчок меня», как, скажем, я нажимаю кнопку «Я» вверху, когда пользователь нажимает на него, он должен появляться сверху, а затем возрастать до центра просмотра.

Вот jsFiddle и пример кода от JSFiddle. (Обратите внимание, что <p> просто показать содержимое, которое заставит тело иметь скроллбар)

HTML

<div class="growme">test</div> 
<p>adsadsad</p> 
<p>adsadsad</p> 
<p>adsadsad</p> 
<div class="box"><h3>click me</h3></div> 
<p>adsadsad</p> 
<p>adsadsad</p> 
<p>adsadsad</p> 
<p>adsadsad</p> 
<p>adsadsad</p> 

CSS

.growme { 
    background-color: #990000; 
    height: 0; 
    width: 0; 
    position: fixed; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    top:0; 
    left:0; 
    bottom:0; 
    right:0; 
    margin:auto; 
} 
.box { 
    margin: 0 auto; 
    height: 200px; 
    width: 300px; 
    background-color: #999; 
} 

Jquery

$('.box').on('click', function() { 
    $('body').css('overflow', 'hidden'); 
    $('.growme').animate({ 
     width: '100%', 
     height: '100%', 
     opacity: 1, 
    }, 'normal'); 
}); 

$('.growme').on('click', function() { 
    $(this).animate({ 
     width: 0, 
     height: 0, 
     opacity: 0, 
    }, 'normal', function(){ 
     $('body').css('overflow', 'auto'); 
    }); 
}); 

В случае, если вам интересно, как будет выглядеть результат, я смог найти this site, который делает тот же эффект.

Answer 1

Если вы хотите сделать так, чтобы окно .growme увеличилось от центра поля .box, а не от центра экрана, вам нужно сбросить его положение каждый раз, когда вы собираетесь Открой это.

Как это сделать? Вычислите положение элемента .box в окне просмотра, используя offset() (для получения позиции .box в документе) и scrollTop() (чтобы получить значение полос прокрутки). В псевдокоде, было бы что-то вроде этого:

position = element_height + element_offset - window_scroll 

Как только вы что, это действительно просто:

1. Обновление CSS для .growme поэтому коробка изначально находится в горизонтальном центре:

   .growme { 
       background-color: #990000; 
       height: 0; 
       width: 0; 
       position: fixed; 
       opacity: 0; 
       top:0; 
       left:50%; 
       margin:0; 
   } 
   

2. Получить целевую позицию для .growme (с приведенной выше формулой):

   100 + $(this).offset().top - $(window).scrollTop() 
   

3. Место .growme в исходном положении.

   $(".growme").css({ top: (100 + $(this).offset().top - $(window).scrollTop()) + "px"}); 
   

4. Animate .growme так он идет в верхнем левом углу, а ширина и высота занимают 100%.

   $('.growme').animate({ 
        width: '100%', 
        height: '100%', 
        left:0, 
        top:0, 
        opacity: 1, 
       }, 'normal'); 
   

И это должно сделать трюк (для процесса усадки, вам нужно рассчитать целевую вершину для анимации, увидеть код ниже). Вот код (я прокомментировал overflow:hidden часть, чтобы избежать изменения размера окна просмотра, когда полоса прокрутки исчезает):

$('.box').on('click', function() { 
 

 
    // set the .growme div at the center of the .box div 
 
    $(".growme").css({ top: (100 + $(this).offset().top - $(window).scrollTop()) + "px"}); 
 

 
    //$('body').css('overflow', 'hidden'); 
 
    
 
    $('.growme').animate({ 
 
    width: '100%', 
 
    height: '100%', 
 
    left:0, 
 
    top:0, 
 
    opacity: 1, 
 
    }, 'normal'); 
 
}); 
 

 
$('.growme').on('click', function() { 
 
    
 
    // calculate the target goal for the top position 
 
    var goal = (100 + $(".box").offset().top - $(window).scrollTop()) + "px"; 
 
    
 
    $(this).animate({ 
 
    width: 0, 
 
    height: 0, 
 
    left:"50%", 
 
    top: goal, 
 
    opacity: 0, 
 
    }, 'normal', function(){ 
 
    //$('body').css('overflow', 'auto'); 
 
    }); 
 
});

.growme { 
 
    background-color: #990000; 
 
    height: 0; 
 
    width: 0; 
 
    position: fixed; 
 
    opacity: 0; 
 
    top:0; 
 
    left:50%; 
 
    margin:0; 
 
} 
 
.box { 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    width: 300px; 
 
    background-color: #999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="growme">test</div> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<div class="box"><h3>click me</h3></div> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p>

Это решение отлично работает, чтобы начать выращивание .growme делений от центра .box ... Но есть улов: рост не пропорционален div .box, но пропорции просмотра, которые могут быть не такими же, как у .box (3x2).

Возможное решение для этого - установить .growme, чтобы оно «имитировало» положение и размер .box.Он по-прежнему не растут пропорционально его размеру, но это почти похоже на это:

$('.box').on('click', function() { 
 

 
    $(".growme").css({ top: ($(this).offset().top - $(window).scrollTop()) + "px", left: "calc(50% - 150px)", width:300, height:200, zIndex:2 }); 
 

 
    //$('body').css('overflow', 'hidden'); 
 
    $('.growme').animate({ 
 
    width: '100%', 
 
    height: '100%', 
 
    left:0, 
 
    top:0, 
 
    opacity: 1, 
 
    }, 'normal'); 
 
}); 
 

 
$('.growme').on('click', function() { 
 
    var goaltop = ($(".box").offset().top - $(window).scrollTop()) + "px"; 
 
    var goalleft = window.innerWidth/2 - 150; 
 
    $(this).animate({ 
 
    width: 300, 
 
    height: 200, 
 
    left:goalleft, 
 
    top: goaltop, 
 
    opacity: 0, 
 
    }, 'normal', function(){ 
 
    //$('body').css('overflow', 'auto'); 
 
    $(this).css("z-index",-1) 
 
    }); 
 
});

.growme { 
 
    background-color: #990000; 
 
    height: 0; 
 
    width: 0; 
 
    position: fixed; 
 
    opacity: 0; 
 
    top:50%; 
 
    left:50%; 
 
    margin:0; 
 
    z-index:-1; 
 
} 
 
.box { 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    width: 300px; 
 
    background-color: #999; 
 
    z-index:1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="growme">test</div> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<div class="box"><h3>click me</h3></div> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p>

Если вы все еще хотите, чтобы сделать его расти пропорционально, вы можете проверить this question and the selected answer, но обратите внимание, что это потребует дополнительных вычислений в вашем случае (чтобы определить, находится ли видовое окно в портретном/альбомном режиме и соответственно выполняет эффект).

Answer 2

Хорошо, теоретически это должно работать с использованием перехода CSS и изменения ширины и высоты окна, а затем центрирования и создания div fixed, чтобы держать его в середине страницы ... вот моя попытка, чтобы это не было совершенный

взглянуть на jsFiddle

$('.box').on('click', function() { 
 
    $('body').toggleClass('nooverflow'); 
 
    $(this).toggleClass('grow'); 
 
});

.nooverflow {overflow:hidden;} 
 

 
.box { 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    width: 300px; 
 
    position:absolute; 
 
    left:0; right:0; 
 
    background-color: #999; 
 
    transition:0.3s; 
 
} 
 
.box.grow { 
 
    width:100%; 
 
    height:100%; 
 
    background:red; 
 
    top:50%; 
 
    transform: translateY(-50%); 
 
    position:fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<div class="box"><h3>click me</h3></div> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p> 
 
<p>adsadsad</p>

Некоторые моменты, рассмотреть следующие вопросы:

• не плавный переход от position:absolute к position:fixed
• поля не имеет абсолютное позиционирование, чтобы убедиться, что не нарушает макет, вы можете добавить заполнитель DIV для сохранения пространства
• добавить кросс-браузер, где это необходимо (переход, преобразование, непрозрачность и т. д.)

Редактирование: Я только заметил, что, когда ящик находится над складкой, переход лучше, но когда он находится ниже складки (высота видового экрана), коробка переходит в центр мгновенно растет

Answer 3

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

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

Вот код HTML, который я написал.

<body> 
    <div id="box"></div> 
</body> 

Вот код CSS, который я написал.

#box { 
    position: fixed; 
    width: 300px; 
    height: 200px; 
    left: 50%; 
    margin-left: -150px; 
    background-color: #999; 
} 

Вот код JavaScript, который я написал, он выполняет большую часть тяжелой работы, поэтому я прокомментировал это либерально.

// On document loaded 
$(document).ready(function() { 
    // Box starts not expanded 
    var expanded = false; 
    // On box click 
    $('#box').on('click', function() { 
    // If the box is not expanded 
    if (!expanded) { 
     // Animate the box 
     $(this).animate({ 
     // Remove horizontal centering 
     // This gives appearance of outward expansion 
     left: '0', 
     // Quotes on 'margin-left' for name errors 
     'margin-left': '0', 
     // Expand box to full page size 
     width: '100%', 
     height: '100%' 
     }); 
     // Box is now expanded 
     expanded = true; 
    } 
    // If the box is expanded 
    else { 
     // Change box to default position 
     // Animate the box 
     $(this).animate({ 
     // Restore horizontal centering 
     // This gives appearance of inward shrinking 
     left: '50%', 
     // Quotes on 'margin-left' for name errors 
     'margin-left': '-150px', 
     // Expand box to normal size 
     width: '300px', 
     height: '200px' 
     }); 
     // Box is now not expanded 
     expanded = false; 
    } 
    }); 
}); 

И here это JSFiddle я создал, чтобы показать его работы в действии.