Report

Как сделать анимацию как на этом сайте https://travelshift.com/
Если зажать мышку то картинки меняются анимировано можете мне с этим помочь

Здравствуйте! Помогите, пожалуйста!
Есть два блока (div): один с картинкой, а другой с текстом.
Нужно реализовать: сначала блок с картинкой должен перекрывать блок с текстом, а потом блок с текстом должен перекрывать блок с картинкой.
Для этого я делал в попытке реализации данного эффекта:
.image
{
    display: inline-block;
    Position: absolute;
    z-index: 1;
}
@Keyframes block_overlap
{
    from
    {
        z-index: 0;
    }
    to
    {
        z-index: 2
    }
}
.text
{
    display: inline-block;
    position: absolute;
    animation-name: block_overlap;
    animation-duration: 1s;
}
Данный код не привёл к решению проблемы.
 

Особо не вдавался в подробности анимации, поэту прошу у вас.

Нужно сделать так, чтобы буква при загрузки страницы, после 3с (ПРИМЕРНО) с центра экрана переместилась на 300px (ПРИМЕРНО) в любое из четырех направлений.

P.S. Лишнего не пишите, и ссылки на темы не надо кидать.
 

Добрый день. Подскажите, пожалуйста, есть ли где на просторах ютуба или другого видеохостинга канал с хорошими стримами вёрстки html? Всё что нахожу на ютубе это видео «Как сверстать макет с нуля за час», но хотелось бы посмотреть что-то в формате стрима, как человек решает типовые задачи. То есть, смотрим, как верстальщик работает с вёрсткой. Думаю, многим новичкам было бы полезно посмотреть, как люди работают с кодом. 

В шапке стоит видео, которое я через JS подгружаю и подгоняю под размер экрана. Но при первой загрузке страницы видео не растягивается по ширине экрана. Только если ресайзнуть окно. Что делать?
Тестируемое разрешение экрана 1366x768. Вот сам сайт и код:
var scWidth; var scHeight; function window_resize() { scWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width; scHeight = (window.innerHeight > 0) ? window.innerHeight : screen.height; $('.scroll_bottom').css('display', (scHeight < scWidth ? 'block' : 'none')); var mainmenu = $('.mainmenu'); var mainvideo = $('#mainvideo'); if (scWidth > 767) { if (mainvideo.length < 1) { mainmenu.prepend('<video muted autoplay loop class="video" id="mainvideo"><source src="/assets/video/bg.mp4" type="video/mp4"></video>'); mainvideo = $('#mainvideo'); } mainvideo.attr('style', ''); if (mainvideo.height() < mainmenu.height()) { // Делаем по всей высоте scale = mainmenu.height() / mainvideo.height(); mainvideo.css('height', mainmenu.height() + 'px'); mainvideo.css('width', (mainvideo.width() * scale) + 'px'); if (mainvideo.width() > mainmenu.width()) { trim = (mainvideo.width() - mainmenu.width()) / 2; mainvideo.css('left', -trim + 'px'); } } else { // Делаем по всей ширине scale = mainmenu.width() / mainvideo.width(); mainvideo.css('width', mainmenu.width() + 'px'); mainvideo.css('height', (mainvideo.height() * scale) + 'px'); if (mainvideo.height() > mainmenu.height()) { trim = (mainvideo.height() - mainmenu.height()) / 2; mainvideo.css('top', -trim + 'px'); } } } else if (mainvideo.length) { mainvideo.remove(); } } window_resize(); $(window).resize(window_resize);  
В атрибуте style ему задана правильная ширина, но само видео почему-то по ней не растянулось. Только после ресайза окна растягивается