Bootstrap Background full page carousel

Bootstrap Background full page carousel

by Glynne Turner

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<div id="carouselExampleControls" class="carousel slide " data-ride="carousel">

	<div class="carousel-inner">

	     <div class="carousel-item active"  ></div>
<div class="carousel-item " ></div>
<div class="carousel-item "  ></div>

	</div>

<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
	   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
	   <span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
	   <span class="carousel-control-next-icon" aria-hidden="true"></span>
	   <span class="sr-only">Next</span>
	</a>

</div>
<nav id="navbar" class="navbar navbar-expand-lg " role="navigation" style="position:fixed; width:100vw">
  <div class="container-fluid"> 
		  
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="fas fa-bars"></span>
    </button>
     
	   
        <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"><ul id="menu-main-menu" class="menu nav navbar-nav navbar-right d-flex"><li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-13" class="flex-fill menu-item...

CSS

/*
Theme Name: Soho Runners
Text Domain: Soho Runners
Version: 1.5
Description: Soho Runners Base Site
Author: Glynne Turner
Author URL: https:thanet-web-design.com

*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
@font-face {
	font-family: 'PoplarStd';
	src: url('fonts/PoplarStd.eot');
	src: local('☺'), url('fonts/PoplarStd.woff') format('woff'), url('fonts/PoplarStd.ttf') format('truetype'), url('fonts/PoplarStd.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
body{ overflow-x:hidden; overflow-y:scroll;  } 
*{font-family: 'Source Sans Pro', sans-serif; font-size:18px}
section{padding:50px 0}
.show{height:100vh}
p {width:100% !important; display:block}
a, a:hover{text-decoration:none !important}
h1,h2,h3,h4{font-family: 'PoplarStd' !important; letter-spacing: 3px;}
:root{

  --black: #000000;
  --yellow: #ffff00; 
  --white: #ffffff;
}* 
::-webkit-scrollbar {
display: none;
}
.padding-bottom{padding-bottom:50px; margin-bottom:50px}
.navbar {z-index:999999; background-color:#171717; padding:0 !important}
.footer{z-index:999999; background-color:#012834; padding:0 !important}
.navbar-toggler{margin:7px}
.spacer{width:100%; height:45px;}
.footer{line-height:45px; color:#4bcd3e; text-align:center; position:fixed; bottom:0 }
 
.row_flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.row_flex > [class*='col-'] {
	 display: flex;
	 flex-direction: column; 
	margin-bottom:10px;
}
div.vacancies{ border:1px solid red;height:100%; padding:5px}
.vacancy_image{max-width:100%}

#Layer_1{  max-height:60vh;-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg); transition:all .5s linear}
#Layer_1.rotate{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);...

JavaScript

var doAnimations = function() {
 $ = jQuery;     
    // Calc current offset and 
    var offset = $(window).scrollTop() + $(window).height(), midway = ($(window).height() /2)
    // get all animatables    
    $animatables = $('.animate');
    
    
    // Check all animatables and animate them if necessary
		$animatables.each(function(i) {
       var $animatable = $(this);
			if (($animatable.offset().top + $animatable.height() - midway ) < offset) {
        $animatable.addClass('animated');
			} // else{$animatable.removeClass('animated') ;}
    });

	};
  $ = jQuery;  
  // Hook doAnimations on scroll, and trigger a scroll
	$(window).on('scroll', doAnimations);
    $(window).trigger('scroll');
    $(document).ready(function(){ 
  // we call the function 
  doAnimations();
});