Мягкий переход от видео в стиле landing page на странице с разными стилями, возможно ли?

Question

InfernalOwl @InfernalOwl

Мягкий переход от видео в стиле landing page на странице с разными стилями, возможно ли?

Приветствую всех, продолжаю цикл вопросов по применению видео.
Пример: есть страница, выровненная по центру обычными настройками margin и padding.
Возможно ли добавить наверх блок, который не будет подчиняться общим настройкам css, который будет занимать всю страницу экрана, на котором будет проигрываться видео и будет кнопка якоря, с переходом вниз к выровненной странице?
При чем в идеале с переходом в стиле landing-page, т.е. ощущение пролистывания страниц будет присутствовать, но страница будет одна.
Я такого вроде бы нигде не видел, если вопрос не совсем понятен - попробую позже дать уточнения)
т.е. идет некая секция наверху с параметрами:
block {
width:100vw;
height:100vh;
}
далее пролистывание приводит к обычной странице, выравненной по центру.

Вопрос задан более трёх лет назад
338 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Решения вопроса 2

12 комментариев

InfernalOwl @InfernalOwl Автор вопроса

Да, именно так! Только с тем, чтобы стили не путались. Как это сделать?
P.S.
Удивлен, не видел такого) Хотя вебом интересуюсь из личного интереса, а не из коммерческого, потому не удивительно. :)

Написано более трёх лет назад
Сергей Горячев @webirus

InfernalOwl: А почему стили должны путаться?) Не совсем понял вопроса.

Написано более трёх лет назад
InfernalOwl @InfernalOwl Автор вопроса

Sergey: ну верхний блок с видео как отделить от всего остального? чтобы остальная страница подчинялась своему стилю, а верхняя часть своему?

Написано более трёх лет назад

Сергей Горячев @webirus

InfernalOwl: Как-то так...

.video_wrap { width: 100vw; height: 100vh; }
.video_wrap h1 { font-size: 30px; color: pink; }
.content { background: white; }
.content h1 { font-size: 24px; color: green; }

<html>
<body>
   <div class="video_wrap"></div>
   <div class="content"></div>
</body>

Все равно не совсем уловил суть вопроса.

Написано более трёх лет назад

InfernalOwl @InfernalOwl Автор вопроса

Sergey: Т.е. в данном случае будет игнорирован факт того, что css остальной страницы - выравнивание по центру?

Написано более трёх лет назад
Сергей Горячев @webirus

InfernalOwl: Я давно знаю, что из меня плохой объясняльщик. Вы внутри страницы создаете отдельные блоки и им прописываете свои свойства. Они не будут пересекаться, пока вы сами не захотите этого. Например на моей странице: для каждого блока отдельные стили, но заголовки блоков одинаковые. Я просто задал свойства для блока titleblock, а потом прописываю его в начало блоков. А если заголовок будет другой (цвет, размер или еще что), я просто сделаю titleblock2, например, или переопределю свойства titleblock через перекрытие стилей, добавив titleblock.red, тогда у меня заголовок станет красный. Только один станет красный.
Вы просто пишите отдельные блоки и им отдельные свойства, и ничего пересекаться не будет.

Написано более трёх лет назад
Платон Платонович @ISEETHESTARS

Задаешь для или любого другого объекта свои параметры CSS. Если задать (допустим у) положение по центру и уже во внутрь пихать все, то все и будет иметь положение по центру. А если внутри этого дива, сделать еще один див, но уже с другими параметрами CSS, то они и будут воздействовать на него. Есть в CSS такая вещь как "position", которой можно задать игнорировать параметры положения родительского объекта или нет, можно вообще фиксед поставить.
Вот тут почитай htmlbook.ru/css/Position

Конечно нужно видеть код, чтобы адекватно помочь в твоей проблеме. Ибо вопрос сформулирован странно. Тебе бы мат часть верстки почитать.

Написано более трёх лет назад
Платон Платонович @ISEETHESTARS

господи. Тостер все мои html теги скушал. В пример приводил DIV

Написано более трёх лет назад
InfernalOwl @InfernalOwl Автор вопроса

Sergey: Кстати говоря, а можно узнать код вашего великолепного меню с сайта webirus? Оно постоянно следует при прокрутке и очень красиво изменяется при смене 1-й страницы, как это сделано?)
P.S.
Ну если конечно это не страшная коммерческая тайна ^^

Написано более трёх лет назад

Сергей Горячев @webirus

InfernalOwl: Да там всё на поверхности)))
html

<!-- menu -->
    <menu class="menu loading clearfix">
        <!-- mainmenu -->
        <ul class="mainmenu loading clearfix">
            <li><a href="#anchor_aside">В начало</a></li>
            <li><a href="#anchor_advantages">Преимущества</a></li>
            <li><a href="#anchor_potential">Возможности</a></li>
            <li><a href="#anchor_portfolio">Портфолио</a></li>
            <li><a href="#anchor_prices">Услуги и цены</a></li>
            <li><a href="#anchor_contacts">Контакты</a></li>
        </ul>
        <!-- /mainmenu -->
    </menu>
    <!-- /menu -->

css

.menu {
    position: fixed;
    z-index: 50;
    width: 100%;
    transition: all .5s ease;
}
.menu.loading {
    top: 90px;
}
.menu.scrolling {
    top: 70px;
}
.mainmenu {
    width: 100%;
    text-align: center;
    transition: all .5s ease;
}
.mainmenu.loading {
    background-color: none;
}
.mainmenu.scrolling {
    background-color: rgba(30,30,30,1);
}
.mainmenu li {
    display: inline-block;
}
.mainmenu a {
    font-size: 18px;
    color: rgba(255,255,255,1);
    text-decoration: none;
    font-family: 'sansation_bold', arial;
    padding: 2px 20px 0;
    display: block;
    text-transform: uppercase;
    transition: all .5s ease;
    border-bottom: 2px solid transparent;
}
.mainmenu a.active {
    border-bottom: 2px solid rgba(12,168,252,1);
}
.mainmenu.loading a {
    line-height: 46px;
    height: 46px;
}
.mainmenu.scrolling a {
    line-height: 36px;
    height: 36px;
}
.mainmenu a:hover {
    background-color: rgba(12,168,252,1);
}

js

var loadingscrolling = $('.menu, .mainmenu')
	$(window).scroll(function(){
		if ( $(this).scrollTop() > 100 && loadingscrolling.hasClass("loading") ){
			loadingscrolling.removeClass("loading").addClass("scrolling");
		} else if($(this).scrollTop() <= 100 && $('.mainmenu').hasClass("scrolling")) {
			loadingscrolling.removeClass("scrolling").addClass("loading");
		}
	});

Написано более трёх лет назад

Сергей Горячев @webirus

InfernalOwl: суть скрипта простая.
Когда загружается страница, меню имеет класс loading, при прокрутке ниже 100 пикселей, скрипт меняет класс loading на scrolling.
В css прописаны соответствующие свойства, например, убирать прозрачность или уменьшать высоту.

Написано более трёх лет назад
InfernalOwl @InfernalOwl Автор вопроса

Sergey: Да я подглядел уже на странице, но лучше все равно спросить. :) Спасибо!

Написано более трёх лет назад