Bootstrap Sliders:

Parallax Gallery with Bootstrap and SimpleParallax

If you work with photos and share a lot of images every day on your website, don’t ignore this bootstrap and use it to gain more audiences. This post shows the Parallax Gallery with Bootstrap and Simple Parallax and has many advantages for you and your website. With the help of this Bootstrap simple Parallax Example, instead of adding photos to the main page of the website, you can change images with a beautiful effect. This Parallax Gallery Code helps you increase the beauty of your website.

Look at the following preview of this code and apply it to your page. This code has a simple and beautiful design and you can use it if you have a website with a simple theme. As you see, this JavaScript Simple Parallax Gallery has a dark green background and a line connects all images to each other. You can add your needed title and description to each photo that you want. As you move down the page, these pictures will move slightly with an effect. Each photo has its own effect. If you always work with pictures, we recommend you to use this Bootstrap Gallery Code on your website.

Bootstrap simpleParallax Example

Parallax Gallery Code

Javascript SimpleParallax Gallery

Bootstrap Gallery Code

<!-- This script got from frontendfreecode.com -->
<div class="whitespace"></div>	
<div class="container">
	<div class="row">
		<div class="col-lg-4 img one">
			<img src="http://frontendfreecode.com/img/inktober_05_by_jackcree_desajw4-pre.jpg" class="ione" alt="">
		</div>
		<div class="col-lg-4 txt text-1">
                <h1>Light reveals the emotion</h1>
            </div>
	</div>
	<div class="row">
		<div class="col-lg-8 txt text-2">
			<h2>Emotion<br> gives attraction.</h2>
		</div>
		<div class="col-lg-4 img two">
			<img src="http://frontendfreecode.com/img/inktober_06_by_jackcree_deselr7-pre.jpg" class="itwo" alt="#">
		</div>
	</div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-12 img three">
				<img src="http://frontendfreecode.com/img/left1.pnge" class="ithree" alt="">
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-4 img four">
			<img src="http://frontendfreecode.com/img/inktober_03_by_jackcree_des3s2v-fullview.jpg" class="ifour" alt="">
		</div>
		<div class="col-lg-5 txt text-3">
			<h2>Warm colors refresh.</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-8 txt text-4">
			<h2>It is necessary to <br> find a point of view.</h2>
		</div>
		<div class="col-lg-4 img five">
			<img src="http://frontendfreecode.com/img/inktober_02_by_jackcree_des170v-fullview.jpg" class="ifive" alt="">
		</div>
	</div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-12 img six">
				<img src="http://frontendfreecode.com/img/left2.pnge" class="isix" alt="">
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-4 img seven">
			<img src="http://frontendfreecode.com/img/inktober_04_by_jackcree_des65v2-fullview.jpg" class="iseven" alt="">
		</div>
		<div class="col-lg-8 txt text-5">
                <h1>Work with pictures.</h1>
            </div>
	</div>
	<div class="row">
		<div class="col-lg-8 txt text-6">
			<h2>Always<br> use a cat.</h2>
		</div>
		<div class="col-lg-4 img eight">
			<img src="http://frontendfreecode.com/img/samdoesart_tutorial_01_by_jackcree_deryweg-fullview.jpg" class="ieight" alt="#">
		</div>
	</div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

/*Font call*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@200&display=swap');
* {
	margin: 0;
	padding:  0;
	box-sizing: border-box;
}
html, body {
	width: 100%;
	height: 100%;
}
body {
	background: url(http://frontendfreecode.com/img/bg.jpg) no-repeat 50% 50%;
	background-size: cover;
	background-attachment: fixed;

}
.whitespace {
	height: 300px;
}
h1, h2 {
	font-family: 'Noto Sans Mono', monospace;
	color: #f1Db61;
	font-size: 2.4rem;
}
img {
	width: 100%;
}
.txt {
	position: relative;
}
.one {
	margin-top: 100px;
  z-index: 4;
}
.text-1 {
	top:  160px;
	left:  -90px;
  z-index: 5;
}
.text-2 {
	z-index: 1;
	top:  280px;
	left:  280px;
}
.three {
	z-index: 3;
	top:  -720px;
	width: 120%;
}
.four {
	margin-top: -400px;
}
.text-3 {
	z-index: 1;
	top:  -140px;
	left:  -180px;
}
.text-4 {
	z-index: 1;
	top:  300px;
	left:  300px;
}
.six {
	top: -750px;
}
.seven {
	z-index: 2;
	top: -400px;
}
.text-5 {
	top: -200px;
}
.text-6 {
	z-index: 2;
	top:  -150px;
	left: 250px;
}
.eight {
	top:  -150px;
	left: -250px;
}

var image = document.getElementsByClassName('ione');
new simpleParallax(image, {
    scale: 1.8
});
var image = document.getElementsByClassName('itwo');
new simpleParallax(image, {
    scale: 1.6,
    orientation: 'left'
});
var image = document.getElementsByClassName('ithree');
new simpleParallax(image, {
    scale: 1.6,
    orientation: 'right'
});
var image = document.getElementsByClassName('ifour');
new simpleParallax(image, {
    scale: 1.6
});
var image = document.getElementsByClassName('ifive');
new simpleParallax(image, {
    scale: 1.6,
    orientation: 'right'
});
var image = document.getElementsByClassName('isix');
new simpleParallax(image, {
    scale: 1.6,
    orientation: 'left'
});
var image = document.getElementsByClassName('iseven');
new simpleParallax(image, {
    scale: 2.4
});
var image = document.getElementsByClassName('ieight');
new simpleParallax(image, {
    scale: 1.6,
    orientation: 'right'
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.2/dist/simpleParallax.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.2/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/simple-parallax-js@5.6.2/dist/simpleParallax.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.2/js/bootstrap.min.js'></script>
<style>
/*Font call*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@200&display=swap');
* {
	margin: 0;
	padding:  0;
	box-sizing: border-box;
}
html, body {
	width: 100%;
	height: 100%;
}
body {
	background: url(http://frontendfreecode.com/img/bg.jpg) no-repeat 50% 50%;
	background-size: cover;
	background-attachment: fixed;

}
.whitespace {
	height: 300px;
}
h1, h2 {
	font-family: 'Noto Sans Mono', monospace;
	color: #f1Db61;
	font-size: 2.4rem;
}
img {
	width: 100%;
}
.txt {
	position: relative;
}
.one {
	margin-top: 100px;
  z-index: 4;
}
.text-1 {
	top:  160px;
	left:  -90px;
  z-index: 5;
}
.text-2 {
	z-index: 1;
	top:  280px;
	left:  280px;
}
.three {
	z-index: 3;
	top:  -720px;
	width: 120%;
}
.four {
	margin-top: -400px;
}
.text-3 {
	z-index: 1;
	top:  -140px;
	left:  -180px;
}
.text-4 {
	z-index: 1;
	top:  300px;
	left:  300px;
}
.six {
	top: -750px;
}
.seven {
	z-index: 2;
	top: -400px;
}
.text-5 {
	top: -200px;
}
.text-6 {
	z-index: 2;
	top:  -150px;
	left: 250px;
}
.eight {
	top:  -150px;
	left: -250px;
}
</style>

</head>
<body>
<div class="whitespace"></div>	
<div class="container">
	<div class="row">
		<div class="col-lg-4 img one">
			<img src="http://frontendfreecode.com/img/inktober_05_by_jackcree_desajw4-pre.jpg" class="ione" alt="">
		</div>
		<div class="col-lg-4 txt text-1">
                <h1>Light reveals the emotion</h1>
            </div>
	</div>
	<div class="row">
		<div class="col-lg-8 txt text-2">
			<h2>Emotion<br> gives attraction.</h2>
		</div>
		<div class="col-lg-4 img two">
			<img src="http://frontendfreecode.com/img/inktober_06_by_jackcree_deselr7-pre.jpg" class="itwo" alt="#">
		</div>
	</div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-12 img three">
				<img src="http://frontendfreecode.com/img/left1.pnge" class="ithree" alt="">
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-4 img four">
			<img src="http://frontendfreecode.com/img/inktober_03_by_jackcree_des3s2v-fullview.jpg" class="ifour" alt="">
		</div>
		<div class="col-lg-5 txt text-3">
			<h2>Warm colors refresh.</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-8 txt text-4">
			<h2>It is necessary to <br> find a point of view.</h2>
		</div>
		<div class="col-lg-4 img five">
			<img src="http://frontendfreecode.com/img/inktober_02_by_jackcree_des170v-fullview.jpg" class="ifive" alt="">
		</div>
	</div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-12 img six">
				<img src="http://frontendfreecode.com/img/left2.pnge" class="isix" alt="">
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-4 img seven">
			<img src="http://frontendfreecode.com/img/inktober_04_by_jackcree_des65v2-fullview.jpg" class="iseven" alt="">
		</div>
		<div class="col-lg-8 txt text-5">
                <h1>Work with pictures.</h1>
            </div>
	</div>
	<div class="row">
		<div class="col-lg-8 txt text-6">
			<h2>Always<br> use a cat.</h2>
		</div>
		<div class="col-lg-4 img eight">
			<img src="http://frontendfreecode.com/img/samdoesart_tutorial_01_by_jackcree_deryweg-fullview.jpg" class="ieight" alt="#">
		</div>
	</div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
var image = document.getElementsByClassName('ione');
new simpleParallax(image, {
    scale: 1.8
});
var image = document.getElementsByClassName('itwo');
new simpleParallax(image, {
    scale: 1.6,
    orientation: 'left'
});
var image = document.getElementsByClassName('ithree');
new simpleParallax(image, {
    scale: 1.6,
    orientation: 'right'
});
var image = document.getElementsByClassName('ifour');
new simpleParallax(image, {
    scale: 1.6
});
var image = document.getElementsByClassName('ifive');
new simpleParallax(image, {
    scale: 1.6,
    orientation: 'right'
});
var image = document.getElementsByClassName('isix');
new simpleParallax(image, {
    scale: 1.6,
    orientation: 'left'
});
var image = document.getElementsByClassName('iseven');
new simpleParallax(image, {
    scale: 2.4
});
var image = document.getElementsByClassName('ieight');
new simpleParallax(image, {
    scale: 1.6,
    orientation: 'right'
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS