Как сохранить div над видео в одном месте и быть отзывчивым в то же время? - PullRequest
Новая
       11

Как сохранить div над видео в одном месте и быть отзывчивым в то же время?

0 голосов
/ 23 сентября 2018

У меня есть этот временный сайт, который я создаю, но я хочу сделать его фантастическим ...

Пара вещей:

  1. Я использую видеоролики поддвижущаяся водяная скрепка (выглядит круто)
  2. У ПОЛОСЫ ФИЛЬМА всегда должна быть точка схода, НАСТРОЙКА на горизонте океана и ночное небо, независимо от размера порта обзора
  3. SPOTФары должны всегда находиться в положении «ВКЛ» на линии горизонта, так как это точка, куда мы идем с кинолентой ... к «ГОЛЛИВУДУ!»

КСТАТИ: Bootstrap 4 и ANGULAR 6.1 НЕ работаютиспользуется "пока", и пока это простая целевая страница сайта.То, что я хочу попытаться сделать, это иметь фрагменты фильма «ВНУТРИ» кадры ФИЛЬМОВОГО ПОЛОСА и заставить киноленту двигаться вперед к ЛИНИИ ГОРИЗОНТА.но посмотрите.Это для продюсерской компании в Голливуде.

Вот сайт на моем выделенном сервере 1and1.com, где у меня есть БУКВЕТ ... Я могу дать доступ к этой ветке, если хотите ... ЯДАЕТ КРЕДИТ тому, кто сможет помочь мне в этом как общественный проектизмените этот заголовок лицензии, выберите заголовки лицензий в свойствах проекта.Чтобы изменить этот файл шаблона, выберите Сервис |Шаблоны и откройте шаблон в редакторе. / / Создано: 22 сентября 2018, 20:03:37 Автор: PeterB * / 

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
    position: fixed;
    height: 31.25rem;
    margin-left: -318px;
    left: 76px;
    top: 20.65rem;
    opacity: .35;
    bottom: 0;
    width: 100%;
    padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}


/* Spots */
.spot1 {
    left: 55%;
    -webkit-animation: move 5s infinite;
    -webkit-filter: blur(10px);
    /* Chrome, Opera, etc. */
    filter: url('blur.svg#blur');
    /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
    filter: blur(10px);
    /* Firefox 35+, eventually all */
}

.spot2 {
    left: 60%;
    -webkit-animation: move2 5s infinite;
    -webkit-filter: blur(10px);
    /* Chrome, Opera, etc. */
    filter: url('blur.svg#blur');
    /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
    filter: blur(10px);
    /* Firefox 35+, eventually all */
}

.spotlight {
    position: fixed;
    height: 0px;
    border-top: 490px solid rgba(255, 255, 102, 1.25);
    border-radius: 45px;
    border-left: 40px solid transparent;
    border-bottom: 0px solid #575;
    border-right: 40px solid transparent;
    box-shadow: rgba(128, 128, 128, 1.2) 0px 2px 3px, inset rgba(128, 128, 128, 1.2) 0px -5px 2px;
    background-color: transparent;
    bottom: 496px;
    left: 347px;
    -webkit-transform-origin: 50% 100% 0;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: .25;
    z-index: 0;
}
@-webkit-keyframes move {
    0% {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    50% {
        -webkit-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    100% {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
}

@-webkit-keyframes move2 {
    0% {
        -webkit-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    50% {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    100% {
        -webkit-transform: rotate(-30deg);
        -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
}
/* Movie Clips */
.tencomms {
    top: 10px;
    left: 10px;
    height: 50px;
    width: 50px;
    opacity: .25;
    z-index: 0;
}

Вот HTML 

<!DOCTYPE HTML>
<!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]--> 
<!--[if IE 7 ]> <html lang="en" class="ie ie7"> <![endif]--> 
<!--[if IE 8 ]> <html lang="en" class="ie ie8"> <![endif]--> 
<!--[if IE 9 ]> <html lang="en" class="ie ie9"> <![endif]--> 
<!--[if !IE]><!--> 
<html lang="en"> 
    <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title>Dreamstreet Entertainment | Coming Soon!!!</title>
        <meta name="description" content="Dreamstreet Entertainment | New Landing Page Countdown">
        <meta name="author" content="webthemez">
        <meta http-equiv="X-UA-Compatible" content="chrome=1">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold">
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <link href="css/dsent-custom.css" rel="stylesheet" type="text/css"/>
    </head>
    <body id="home">
        <div>
            <video autoplay muted loop id="myVideo">
                <source src="media/moon-over-ocean-night.mp4" type="video/mp4">
            </video>
        </div>
        <div class="tencomms">
            <video autoplay muted loop id="myVideo">
                <source src="media/movie-clips-montage.mp4" type="video/mp4">
            </video>
        </div>
        <div class="content">
            <img src="images/film-strip-clearer-duller.png" class="img-fluid" alt=""/>
        </div>
        <div class="spotlight spot1"></div>
        <div class="spotlight spot2"></div>
        <div class="tencomms"></div>
        <section class="big-background">
            <!--<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=V9kBhyCWjGY',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></a>-->
            <!-- The video -->
            <div id="header">
                <div class="wrapper">
                    <h1><a href="#" class="logo">Dreamstreet Entertainment</a></h1>
                </div>
            </div>
            <div id="Content" class="wrapper">
                <div class="countdown styled"></div>
                <h2 class="intro">We are currently working on an amazing, new, and fresh website.<br>Stay Tuned</h2>
                <!--
                <div id="subscribe">
                    <form method="POST" action="subscribe.php">
                        <p><input type="text" name="Email" size="20" value="" placeholder="Subscribe your e-mail Id"><input type="submit" value="Submit" name="Submit"></p>
                    </form>
                    <div id="socialIcons">
                        <ul>
                            <li><a href="" title="Twitter"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="" title="facebook"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="" title="linkedIn"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="" title="Pintrest"><i class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
                -->
            </div>
        </section>
        <footer class="tempBy">&copy;2018 - Dreamstreet Entertainment, LLC - All Rights Reserved | Site powered by: <a href="http://www.webparity.net" target="_blank">WebParity.net</a></footer>
        <!--Scripts-->
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script src="js/jquery.mb.YTPlayer.js"></script>
        <script type="text/javascript" src="js/jquery.countdown.js"></script>
        <script src="js/custom.js"></script>
    </body>
</html>

другойдетали можно получить через источник на странице HTML

...