{"id":127,"date":"2018-10-01T20:00:55","date_gmt":"2018-10-01T18:00:55","guid":{"rendered":"http:\/\/p4547.phpnet.org\/sm2\/?p=127"},"modified":"2018-11-11T12:34:34","modified_gmt":"2018-11-11T11:34:34","slug":"landing-pages-parallax","status":"publish","type":"post","link":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/landing-pages-parallax\/","title":{"rendered":"Landing Pages : Parallax"},"content":{"rendered":"<p>Les Parallax sont un bon moyen pour r\u00e9aliser une landing page sympa, avec de grandes photos en background.<\/p>\n<p>En CSS, j&rsquo;ajoute 2 types de Jumbotron : 1 pour les diff\u00e9rentes sections, et 1 autre pour la derni\u00e8re section en bas de page. Mais j&rsquo;aurais pu faire autant de Jumbotrons que n\u00e9cessaires. Ces Jumbotrons sont cens\u00e9s contenir du texte, des boutons&#8230;<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\/* Jumbotron *\/\r\n.jumbotron {\r\n\tpadding: 100px 0px;\r\n\tmargin-bottom: 0;\r\n\ttext-align: center;\r\n}\r\n.jumbotron2 {\r\n  background-color: #CCCCCC;\r\n  padding: 2rem;\r\n\ttext-align: left;\r\n}\r\n\r\n<\/pre>\n<p>Ensuite, je d\u00e9finis en CSS les diff\u00e9rentes caract\u00e9ristiques des Parallax. Les Parallax contiennent les diff\u00e9rentes photos qui sont en arri\u00e8re-plan.<br \/>\nOn met un z-index \u00e0 -1 pour qu&rsquo;ils soient bien en arri\u00e8re-plan, et on leur donne une position fixed :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\/* Parallax *\/\r\n.parallax-content{\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n\theight: 80vh;\r\n\t-webkit-background-size: cover;\r\n\tbackground-size: cover;\r\n\tbackground-attachment: fixed;\r\n\tbackground-position: center center;\r\n}\r\n.parallax {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    z-index: -1;\r\n}\r\n.parallax:before {\r\n\tcontent: &quot;&quot;;\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    height: 100%;\r\n    z-index: -1;\r\n    background-position: center top;\r\n    background-repeat: no-repeat;\r\n    background-size: 120% auto;\r\n}\r\n<\/pre>\n<p>Ensuite, il faut d\u00e9finir des images diff\u00e9rentes selon la taille du viewport. Pour les mobiles, on choisira plut\u00f4t des photos en format Portrait, et pour les \u00e9crans larges, des photos en format Landscape :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n\/*xs to lg*\/\r\n@media(min-width: 769px){\r\n\t.parallax-content{\r\n\t\tbackground-image: url(&quot;..\/..\/images\/parallax-1.jpg&quot;);\r\n\t}\r\n\t.parallax-content-2{\r\n\t\tbackground-image: url(&quot;..\/..\/images\/parallax-2.jpg&quot;);\r\n\t}\r\n}\r\n\r\n\/*xs to 0*\/\r\n@media(max-width: 768px){\r\n\t.parallax-content {\r\n\t\tbackground-image: url(&quot;..\/..\/images\/parallax-1-m.jpg&quot;);\r\n\t}\r\n\t.parallax-content-2 {\r\n\t\tbackground-image: url(&quot;..\/..\/images\/parallax-2-m.jpg&quot;);\r\n\t}\r\n\r\n<\/pre>\n<h3>Voir le r\u00e9sultat final :<br \/>\n<a href=\"https:\/\/www.sebastienmerour.com\/portfolio\/landing-pages\/parallax\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.sebastienmerour.com\/portfolio\/landing-pages\/parallax\/<\/a><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>Les Parallax sont un bon moyen pour r\u00e9aliser une landing page sympa, avec de grandes photos en background. En CSS, j&rsquo;ajoute 2 types de Jumbotron : 1 pour les diff\u00e9rentes sections, et 1 autre pour la derni\u00e8re section en bas de page. Mais j&rsquo;aurais pu faire autant de Jumbotrons que n\u00e9cessaires. Ces Jumbotrons sont cens\u00e9s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,17],"tags":[20,19],"_links":{"self":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/127"}],"collection":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":6,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"predecessor-version":[{"id":135,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/127\/revisions\/135"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/media\/126"}],"wp:attachment":[{"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sebastienmerour.com\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}