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>Mis à jour le Par Copier coller | Dans jQuery