Faire apparaitre des éléments progressivement sur un background vidéo

Faire apparaître des éléments progressivement sur un background vidéo

Descendez dans la fenêtre pour voir apparaître le texte..

See the Pen JoKRvo by yuyazz (@yuyazz) on CodePen.

On va reprendre depuis le début..Pour faire un background vidéo tout se fait en css. On place la balise pour notre vidéo dans le header (header.php) par exemple ou dans sa page d’accueil (home.php):

    <video autoplay loop poster="../images/images/background_teasing.jpg.jpg" id="bgvid" >
            <!--poster="images/back.png-->
            <source src="http://localhost/monsite/background/keyboard.webmhd.webm" type="video/webm"/>
            <source src="http://localhost/monsite/background/keyboard.mp4" type="video/mp4"/>
            <source src="http://localhost/monsite/background/keyboard.oggtheora.ogv" type="video/ogg"/>

            Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>

Voici le css correspondant:

#bgvid{position:fixed;right:0;bottom:0;
       min-width:100%;min-height:100%;
       width:auto;height:auto; z-index:-999;
       overflow:hidden;
       background:url(../images/background_teasing.jpg) no-repeat;
       background-size:cover;}
video{display:block;}

On peut ensuite choisir ou non, de placer une image à la place de la vidéo pour les petites résolutions:

@media (max-width: 767px) {
 body{background:url(../images/background_teasing.jpg)#000 no-repeat center center fixed;}
    #bgvid{display:none}
}

Ce que je souhaite faire ensuite, c’est placer au centre de ma page, des messages, qui apparaîtrons les uns à la suite des autres, jusqu’à un formulaire qui apparaîtrait cette fois au clic sur le dernier message.
la partie html :

<div class="lancement">Lancement Prochain</div>

<div class="home-container">
    <div class="main-content">
        <div class="text-home">
            <div class="art_deco">
                <p class="art">Art<span class="second"> deco</span></p>
            </div>
            <div class="style">
                <p class="art_second">Adoptez un nouveau style de vie</p>
            </div>
            <a href="" class="info"><span class="art_third">En savoir plus</span></a>


            <div  class="contact">
                <div class="col-lg-12 col-sm-12">
                    <!--    <div class="col-lg-12 col-md-6">-->

                    <form class="form-horizontal" role="form">
                        <h1 class="titre">Inscrivez vous</h1>
                        <p class="introtext">Pour écouvrir en avant première la résidence</p>

                        <div class="blochp_contact">

                           
                                <!--<div class="contact-container">-->
                                <div class="col-lg-6 col-sm-6 col-xs-12">
                                    <div class="form-group">
                                        <label for="typologie" class="col-lg-12 col-sm-12 col-xs-12 control-label" id="recherche">Vous recherchez</label>
                                    </div>
                                    <div class="contact-container">

                                        <ul class="type">

                                            <li class="type_ck">
                                                <label>
                                                    <input type="checkbox" id="inlineCheckbox1" value="option1"> Studio
                                                </label>
                                            </li>

                                            <li class="type_ck">
                                                <label>
                                                    <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 pièces
                                                </label>
                                            </li>
                                            <li class="type_ck">
                                                <label>
                                                    <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 pièces
                                                </label>
                                            </li>

                                            <li class="type_ck">
                                                <label class="lab">
                                                    <input type="checkbox" id="inlineCheckbox4" value="option6"> 4 pièces
                                                </label>
                                            </li>
                                            <li class="type_ck">
                                                <label class="lab">
                                                    <input type="checkbox" id="inlineCheckbox5" value="option7"> 5 pièces
                                                </label>
                                            </li>
                                        </ul>
                                    </div>
                                   
                                    <div class="form-group">
                                            <label for="mail" class="col-lg-12 col-sm-12 col-xs-12 control-label">Votre Email :</label>
                                            <input type="email" class="form-control" name="email" id="email">
                                    </div>  
                                 
                                </div>
                                
                                <div class="col-lg-6 col-sm-6 col-xs-12">
                                    <div class="row">
                                        <div class="col-lg-6 col-xs-6">
                                            <div class="form-group">
                                                <label for="objectif" class="col-lg-12 col-sm-12 col-xs-12 control-label">Votre projet</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <ul class="type2">
                                            <li class="type_ck">
                                                <label class="lab">
                                                    <input type="checkbox" id="inlineCheckbox6" value="option9"> Habiter
                                                </label>
                                            </li>
                                            <li class="type_ck">
                                                <label class="lab">
                                                    <input type="checkbox" id="inlineCheckbox7" value="option10">Investir
                                                </label>
                                            </li>

                                            <li class="budget">
                                                <label for="objectif" class="col-lg-12 col-sm-12 col-xs-12 control-label">Votre budget <span class="euro pull-right">€<span></label>
                                            </li>
                                        </ul> 
                                    </div>

                                <div class="validate">
                                    <div class="form-group">
                                        <label for="" class="control-label"></label>
                                        <button type="submit" class="btn btn-default maj">Je valide ma demande</button>
                                    </div>
                                </div>
                                </div>
                            </div>

 </form>
                        </div>
                   
                </div>
            </div>

        </div>
        </div>

<?php require_once('footer.php'); ?>

On a la 3 messages, 3 div qui se succéderont les unes après les autres, puis un formulaire qu’on fera apparaître au clic sur le dernier bloc info.
Pour le css, et pour centrer mes messages je les place dans une div globale ,j’utilise la technique du display table table-cell.
Un conteneur qui englobe les messages et que je mets  en display:table-cell; et un conteneur plus grand, que je mets en display table;

  .main-content{display:table;vertical-align:middle;margin-right: auto;
              margin-left: auto;text-align:center;}

.text-home{display:table-cell;vertical-align:middle;max-width:700px;height:600px;text-align:center;}

Vient ensuite le jQuery, qui va grâce aux fonctions hide, show et fadeIn, faire apparaître nos div les unes après les autres.La dernière reste fixe, et au clic , fait apparaître le formulaire.

   <script>
    
    $(function() {
        $('.art_deco').hide();
        setTimeout(function() {
            $('.art_deco').fadeIn('slow');
        }, 4000);
    });
    $(function() {
        $('.style').hide();
        setTimeout(function() {
            $('.style').fadeIn('slow');
        }, 5000);
    });
    $(function() {
        $('.info').hide();
        setTimeout(function() {
            $('.info').fadeIn('slow');
        }, 6000);
    });
    $(document).ready(function() {
        $('.contact').hide();
        //attach click event to buttons
        $('.info').click(function() {

            /**
             * when show button is clicked we call the show plugin
             * which scales the box to default size
             * You can try other effects from here: http://jqueryui.com/effect/
             */
            $(".info").hide();
            $('.style').hide();
//            $('.art_deco').hide();
            $(".contact").show();
            return false;
        });

    });

</script>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.