Я только что увидел действительно классный переход на страницу Behance, где вы нажимаете изображение, и оно просто расширяется до нового div (я думаю) с 50%. Может кто-нибудь объяснить мне, как сделать эту работу или привести пример? Переход здесь:Перемещение страницы изображения Ajax
ответ
Вы можете использовать css transitions, если вам нравится. Проверьте example, что я написал для вас.
.normal {
float: left;
margin-right: 10px;
width: 10%;
height: auto;
transition: width 2s, height 2s;
}
.transition {
width: 50%;
height: auto;
}
В основном они работают путем определения значений «Start» (в нашем случае ширина & высота внутри .normal
), а также определение того, как сделать переход и какие свойства, чтобы применить его к (в нашем случае width
и height
с продолжительностью 2 с).
Если вы теперь добавите класс к элементу, у которого есть свойства с разными значениями (в нашем случае .transition
), они будут анимированы к новому значению.
Чтобы завершить этот пример, я также добавил текст, который исчезнет после завершения перехода.
Часть javascript довольно проста: при нажатии на изображение добавьте класс .transition
, затем подождите 2 секунды (продолжительность перехода) и, наконец, исчезнет в тексте.
$('img').click(function() {
$(this).addClass('transition');
setTimeout(function() {
$('.text').fadeIn();
}, 2000);
});
Эй, это здорово. Что делать, если изображение находится в каком-то матке сетки и имеет родителя с относительным положением и т. Д.? –
Затем вы можете попробовать с каким-то наложением, в основном накладывая абсолютный div div, который имеет изображение в том же положении, с тем же начальным размером изображения и преобразованием его в нужный вам размер. Это идет в сторону лайтбокса, как упоминалось в комментариях выше. –
Похоже, один из любых из 1000х [Lightbox-х] (https://www.google.co.uk/search?q=jquery+lightbox) –