#156 - parallax splash page

index.php

@@ -26,12 +26,10 @@ if (!file_exists("./inc/header.inc.php")) {
 require_once('./inc/header.inc.php');
 require_once(BX_DIRECTORY_PATH_INC . "profiles.inc.php");
 
-/*
-if(!isLogged()) {
+if (!isLogged() && getParam('sys_site_cover_enabled')) {
     require_once("./splash.php");
     exit;
 }
-*/
 
 $_GET['i'] = 'home';
 require_once("./page.php");

template/css/splash.css

@@ -1,17 +1,21 @@
+
 /*--- General ---*/
-.bx-main #bx-content-wrapper {
+
+#bx-content-wrapper {
 	padding-top: 0px;
+    padding-bottom: 4rem;
 }
 
-.bx-main .bx-page-wrapper,
-.bx-main #bx-content-container,
-.bx-main #bx-content-main {
-	width: 100%;
+.bx-page-wrapper,
+#bx-content-container,
+#bx-content-main {
+	width: 100vw;
 	margin: 0px;
-	padding: 0px;	
+	padding: 0px;
 }
 
 /*--- Splash ---*/
+
 .bx-splash {
 	position: relative;
 }
@@ -39,8 +43,6 @@
 
 	width: 100%;
 	height: 100%;
-	margin: 0px;
-	padding: 0px;
 }
 
 .bx-spl-container {
@@ -54,90 +56,88 @@
 
 .bx-spl-content {
 	position: relative;
+    width:100%;
 }
 
 .bx-spl-slide .bx-spl-content h1 {
-	font-size: 36px;
 	font-size: 2.25rem;
 }
+
 .bx-spl-slide .bx-spl-content h3 {
-	font-size: 24px;
 	font-size: 1.5rem;
 }
 
-/*--- Slide 1 ---*/
-#bx-spl-slide01 .bx-spl-bg {
-	width: 100%;
-	height: auto;
+.bx-spl-white-text-all * {
+    color: #fff;
+}
 
-	background-position: center center;
-	background-repeat: no-repeat;
-	background-attachment: fixed;
-	background-size: cover;
-	background-image: url('../images/cover01.jpg');
+/*--- Join button ---*/
+
+.bx-spl-join,
+.bx-spl-join {
+	display: inline-block;
+	border-color: #fff;
 }
-#bx-spl-slide01 .bx-spl-slide-video {
-	position: relative;
+.bx-spl-join a,
+.bx-spl-join a {
 	display: block;
-
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: auto;
+	padding-left: 3.75rem;
+	padding-right: 3.75rem;
+	text-decoration: none;
 }
+
+/*--- Slides ---*/
+
 #bx-spl-slide01 .bx-spl-container,
 #bx-spl-slide03 .bx-spl-container {
 	position: absolute;
 	display: -webkit-flex;
-    -webkit-align-items: center;
 	display: flex;
+    -webkit-align-items: center;
 	align-items: center;
 }
 #bx-spl-slide01 .bx-spl-content,
 #bx-spl-slide03 .bx-spl-content {
-	width: 75%;
-	margin-left: auto;
-	margin-right: auto;
-
 	text-align: center;
-	text-shadow: 0px 0px 4px #000000;
+	text-shadow: 0px 0px 0.25rem #000;
 }
-#bx-spl-slide01 .bx-spl-content h1,
-#bx-spl-slide01 .bx-spl-content h3,
-#bx-spl-slide01 .bx-spl-content .bx-spl-join a,
 #bx-spl-slide02 .bx-spl-content h3,
-#bx-spl-slide03 .bx-spl-content h3,
-#bx-spl-slide03 .bx-spl-content .bx-spl-join a,
-#bx-spl-slide04 .bx-spl-content h3  {
-	color: #ffffff;	
+#bx-spl-slide04 .bx-spl-content h3 {
+	text-align: center;
 }
-#bx-spl-slide01 .bx-spl-content .bx-spl-join,
-#bx-spl-slide03 .bx-spl-content .bx-spl-join {
-	display: inline-block;
-	border-color: #ffffff;
+
+/*--- Slide 1 ---*/
+
+#bx-spl-slide01 {
+    width:100vw;
+    height:100vh;
 }
-#bx-spl-slide01 .bx-spl-content .bx-spl-join a,
-#bx-spl-slide03 .bx-spl-content .bx-spl-join a {
-	display: block;
-	padding-left: 60px;
-	padding-right: 60px;
-	text-decoration: none;
+#bx-spl-slide01 .bx-spl-bg {
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+#bx-spl-slide01 .bx-spl-slide-video {
+    object-fit: cover;
+
+	width: 100vw;
+	height: 100vh;
 }
 
 /*--- Slide 2 ---*/
+
 #bx-spl-slide02 .bx-spl-bg {
-	background-color: #ffffff;
+	background-color: #fff;
+    height: 35vw;
+    max-height:400px;
 }
 #bx-spl-slide02 .bx-spl-image {
-	position: relative;
-	bottom: -100%;
-	left: 0px;
-	width: 50%;
-	text-align: center;
-}
-#bx-spl-slide02 .bx-spl-image img {
-	display: block;
-	width: 100%;
+    position: absolute;
+	width: 60%;
+    height: 100%;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: contain;
 }
 #bx-spl-slide02 .bx-spl-content {
 	position: absolute;
@@ -150,23 +150,37 @@
 
 	top: 0px;
 	right: 0px;
-	width: 50%;
+	width: 40%;
 	height: 100%;
 }
-#bx-spl-slide02 .bx-spl-content h3,
-#bx-spl-slide04 .bx-spl-content h3 {
-	text-align: center;
-	color: #333333;
+@media (max-width:720px) {
+    #bx-spl-slide02.bx-spl-slide .bx-spl-content h3 {
+	    font-size: 0.8rem;
+    }
 }
 
 /*--- Slide 3 ---*/
-#bx-spl-slide03 .bx-spl-bg img {
-	display: block;
-	width: 100%;
-	heigh: auto;
+
+#bx-spl-slide03 {
+    width:100vw;
+    height:150vh;
+}
+#bx-spl-slide03 .bx-spl-bg {
+    background-position: center center;
+    background-repeat: repeat;
+    background-attachment: fixed;
+    background-size:100%;
 }
 
 /*--- Slide 4 ---*/
+
+#bx-spl-slide04 {
+    width:100vw;
+    height:100vh;
+}
+#bx-spl-slide04 .bx-spl-bg {
+    background-color:#fff;
+}
 #bx-spl-slide04 .bx-spl-container {
 	display: -webkit-flex;
     -webkit-align-items: center;
@@ -176,10 +190,16 @@
 	justify-content: center;
 }
 #bx-spl-slide04 .bx-spl-content {
-	width: 40%;
+	width: 50%;
+	margin-left: auto;
+	margin-right: auto;
+}
+@media (max-width:720px) {
+    #bx-spl-slide04 .bx-spl-content {
+	    width: 90%;
+    }
 }
 #bx-spl-slide04 .bx-spl-content h3 {
 	margin-top: 0px;
-	margin-bottom: 60px;
-	margin-bottom: 3.75rem;
-}
+	margin-bottom: 2rem;
+}

template/splash.html

@@ -1,4 +1,4 @@
-<div class="bx-splash bx-def-color-bg-page">
+<div id="skrollr-body" class="bx-splash bx-def-color-bg-page">
 	<div id="bx-spl-preload" class="bx-spl-preload">
 		<img src="<bx_image_url:cover01.jpg />">
 		<img src="<bx_image_url:cover02.jpg />">
@@ -6,14 +6,14 @@
 	</div>
 
 	<div id="bx-spl-slide01" class="bx-spl-slide">
-		<div class="bx-spl-bg">
-			<video class="bx-spl-slide-video" poster="<bx_image_url:cover01.jpg />" loop autoplay muted>
+		<div class="bx-spl-bg" style="background-image:url(<bx_image_url:cover01.jpg />);">
+			<video class="bx-spl-slide-video bx-def-media-phone-hide bx-def-media-tablet-hide" poster="<bx_image_url:cover01.jpg />" loop autoplay muted>
 				<source src="<bx_image_url:cover01.mp4 />" type="video/mp4">
 				<source src="<bx_image_url:cover01.webm />" type="video/webm">
 			</video>
 		</div>
 		<div class="bx-spl-container">
-			<div class="bx-spl-content" data-anchor-target="#bx-spl-slide01 .bx-spl-bg" data-top="opacity[sqrt]:1" data-top-center="opacity[sqrt]:0">
+			<div class="bx-spl-content bx-spl-white-text-all" data-anchor-target="#bx-spl-slide01 .bx-spl-bg" data-top="opacity:1" data-top-center="opacity:0">
 				<h1 class="bx-def-font-semibold">Connect with people that share your passion.</h1>
 				<h3 class="bx-def-font-normal">Stories, ideas, photos, videos, questions, jokes, discussions, anything.<br />Follow inspiring people and inspire your followers.</h3>
 				<div class="bx-spl-join bx-def-margin-topbottom bx-def-border bx-def-round-corners">
@@ -26,10 +26,8 @@
 	<div id="bx-spl-slide02" class="bx-spl-slide">
 		<div class="bx-spl-bg">
 			<div class="bx-spl-container">
-				<div class="bx-spl-image" data-anchor-target="#bx-spl-slide02 .bx-spl-bg" data-bottom-center="bottom:-100%" data-bottom="bottom:0%">
-					<img src="<bx_image_url:cover02.jpg />" />
-				</div>
-				<div class="bx-spl-content" data-bottom-top="right:-50%;" data-bottom="right:0%;">
+				<div class="bx-spl-image" style="background-image:url(<bx_image_url:cover02.jpg />);" data-bottom-top="bottom:-100%;" data-100-center-center="bottom:0%;"></div>
+				<div class="bx-spl-content" data-bottom-top="right:-50%;" data-100-center-center="right:0%;">
 					<h3 class="bx-def-font-normal">"Pull up a chair. Take a taste.<br />Come join us. Life is so endlessly<br />delicious."</h3>
 				</div>
 			</div>
@@ -37,11 +35,9 @@
 	</div>
 
 	<div id="bx-spl-slide03" class="bx-spl-slide">
-		<div class="bx-spl-bg" data--20p-center-top="top[swing]:0px;" data-20p-center-bottom="top[swing]:-1000px">
-			<img src="<bx_image_url:cover03.jpg />" />
-		</div>
+		<div class="bx-spl-bg" style="background-image:url(<bx_image_url:cover03.jpg />)"></div>
 		<div class="bx-spl-container">
-			<div class="bx-spl-content">
+			<div class="bx-spl-content bx-spl-white-text-all">
 				<h3 class="bx-def-font-normal">"The only way to have a friend is to be one."</h3>
 				<div class="bx-spl-join bx-def-margin-topbottom bx-def-border bx-def-round-corners">
 					<a class="bx-def-padding-sec-topbottom bx-def-font-h3 bx-def-font-normal" href="__join_link__">Join Now</a>
@@ -49,41 +45,18 @@
 			</div>
 		</div>
 	</div>
-
 	<div id="bx-spl-slide04" class="bx-spl-slide">
 		<div class="bx-spl-bg">
-			<div class="bx-spl-container">
-				<div class="bx-spl-content">
-					<h3 class="bx-def-font-normal">Already one of us?</h3>
-					<div class="bx-spl-login">__login_form__</div>
-				</div>
-			</div>
-		</div>
+            <div class="bx-spl-container" data-anchor-target="#bx-spl-slide03 .bx-spl-bg" data-100-center-bottom="opacity:0; transform:scale(0.7,0.7);" data-200-end="opacity:1; transform:scale(1,1);">
+                <div class="bx-spl-content">
+                    <h3 class="bx-def-font-normal">Already one of us?</h3>
+                    <div class="bx-spl-login">__login_form__</div>
+                </div>
+            </div>
+        </div>
 	</div>
-
 	<script type="text/javascript">
 		$(document).ready(function () {
-			$(window).resize(function() {
-				var fMuxWnd = 0.80;
-				var iHeightWnd = $(window).height();
-
-				var iHeightSld01 = ($('#bx-spl-slide01').width() / 1280) * 720;
-				iHeightSld01 = fMuxWnd * iHeightWnd < iHeightSld01 ? fMuxWnd * iHeightWnd : iHeightSld01;
-				$('#bx-spl-slide01').height(iHeightSld01);
-
-				var iHeightImg = ($('#bx-spl-slide02 .bx-spl-image').width() / 1024) * 523;
-				$('#bx-spl-slide02').height(iHeightImg);
-
-				var iHeightSld03 = ($('#bx-spl-slide03').width() / 1280) * 720;
-				iHeightSld03 = fMuxWnd * iHeightWnd < iHeightSld03 ? fMuxWnd * iHeightWnd : iHeightSld03;
-				$('#bx-spl-slide03').height(iHeightSld03);
-				
-				var iHeightImg03 = $('#bx-spl-slide03 .bx-spl-bg img').height()
-				$('#bx-spl-slide03 .bx-spl-bg').attr('data-20p-center-bottom' , 'top[swing]:-' + (iHeightImg03 - iHeightSld03) + 'px');
-
-				$('#bx-spl-slide04').height(iHeightWnd);
-			}).resize();
-
 			skrollr.init();
 		});
 	</script>