Sequence.js - Sliding Horizontal Parallax

A responsive slider theme powered by Sequence.js, transitions created entirely via CSS3. Grab this theme or many others from http://sequencejs.com/ What is a sequence.js - sliding horizontal parallax How do you make a sequence.js - sliding horizontal parallax? This script and codes were developed by Maheshc on 01 February 2022, Tuesday.

How do I make an sequence.js - sliding horizontal parallax?
  1. Sequence.js - Sliding Horizontal Parallax Previews
  2. Sequence.js - Sliding Horizontal Parallax HTML Codes
  3. Sequence.js - Sliding Horizontal Parallax CSS Codes
  4. Sequence.js - Sliding Horizontal Parallax JS Codes
Sequence.js - Sliding Horizontal Parallax Previews

Sequence.js - Sliding Horizontal Parallax HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Sequence.js - Sliding Horizontal Parallax</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      /*
Theme created for use with Sequence.js (http://www.sequencejs.com/)

Theme: Sliding Horizontal Parallax
Version: 1.2
Theme Author: Ian Lunn @IanLunn
Author URL: https://www.ianlunn.co.uk/
Theme URL: http://www.sequencejs.com/themes/sliding-horizontal-parallax/

This is a FREE theme and is available under a MIT License:
https://www.opensource.org/licenses/mit-license.php

Sequence.js and its dependencies are (c) Ian Lunn Design 2013 unless otherwise stated.
*/

/* THEME STYLES */
#sequence {
  position: relative;
  min-height: 600px;
  max-width: 1400px;
  min-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  background: url(https://ianlunn.github.com/Sequence/themes/sliding-horizontal-parallax/images/bg-sky.png) repeat-x #65b7f1;
  color: white;
  font-family: "Play", sans-serif;
}

#sequence > .sequence-canvas {
  height: 100%;
  width: 100%;
}

#sequence > .sequence-canvas > li {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#sequence > .sequence-canvas li > * {
  position: absolute;
  transition-timing-function: ease-in-out;
}

#sequence .sequence-next,
#sequence .sequence-prev {
  color: white;
  cursor: pointer;
  display: none;
  font-size: 80px;
  font-weight: bold;
  position: absolute;
  opacity: 0.4;
  top: 280px;
  height: 41px;
  width: 39px;
  z-index: 20;
  transition-duration: 0.4s;
}

#sequence .sequence-prev {
  left: 40px;
}

#sequence .sequence-next {
  right: 40px;
}

#sequence .sequence-next:hover,
#sequence .sequence-prev:hover {
  opacity: 1;
  transform: scale(1.2);
  transition-duration: 0.4s;
}

#sequence h2 {
  font-size: 1.5em;
  line-height: 1.2em;
}

#sequence .info {
  color: black;
  font-size: 1em;
  right: 150%;
  line-height: 1.2em;
  top: 270px;
  width: 25%;
  z-index: 10;
  vertical-align: middle;
  transition-duration: 4s;
  transition-property: right;
}

#sequence .animate-in .info {
    right: 15%;
    transition-duration: 4s;
}

#sequence .animate-out .info {
    right: -150%;
    transition-duration: 4s;
}

#sequence .balloon {
    left: -140%;
    top: 200px;
    max-width: 40%;
    z-index: 6;
    transition-property: left top;
}

#sequence .animate-in .balloon {
    left: 15%;
    top: 70px;
    transition-duration: 4s;
    z-index: 4;
}

#sequence .animate-out .balloon {
    left: 140%;
    top: -30px;
    z-index: 2;
    transition-duration: 4s;
}

#sequence .aeroplane {
    left: -50%;
    max-width: 40%;
    top: 800px;
    z-index: 6;
    transition-property: left top transform;
}

#sequence .animate-in .aeroplane {
    left: 10%;
    top: 100px;
    transition-duration: 4s;
    transform: rotate(20deg);
    z-index: 4;
}

#sequence .animate-out .aeroplane {
    left: 70%;
    top: -900px;
    transition-duration: 4s;
    transform: rotate(40deg);
    z-index: 2;
}

#sequence .sky {
    height: auto;
    width: 100%;
    left: -6%;
    opacity: 0;
    top: 0;
    vertical-align: middle;
    z-index: 1;
    transition-property: left top;
}

#sequence .animate-in .sky {
    left: 0%;
    opacity: 1;
    top: 0;
    z-index: 1;
    transition-duration: 4s;
}

#sequence .animate-out .sky {
    left: 6%;
    opacity: 0;
    top: 0;
    z-index: 1;
    transition-duration: 4s;
}

#sequence .kite {
  left: -30%;
  opacity: 0;
  max-width: 40%;
  top: 300px;
  z-index: 6;
  transform-origin: 100%;
  transition-property: left top transform;
}

#sequence .animate-in .kite {
  left: -15%;
  top: 300px;
  opacity: 1;
  z-index: 4;
  transform-origin: 100%;
  transform: rotate(80deg);
  transition-duration: 4s;
}

#sequence .animate-out .kite {
  left: -15%;
  opacity: 0;
  top: 300px;
  z-index: 2;
  transform-origin: 100%;
  transform: rotate(200deg);
  transition-duration: 3s;
}

#sequence .sequence-fallback .animate-in .kite {
  left: 20%;
  top: 200px;
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <a href="https://github.com/IanLunn/Sequence"><img style="position: absolute; top: 0; left: 0; border: 0; z-index: 99;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>
<div id="sequence">
			<img class="sequence-prev" src="https://ianlunn.github.com/Sequence/themes/sliding-horizontal-parallax/images/bt-prev.png" alt="Previous" />
			<img class="sequence-next" src="https://ianlunn.github.com/Sequence/themes/sliding-horizontal-parallax/images/bt-next.png" alt="Next" />

			<ul class="sequence-canvas">
				<li class="animate-in">
					<div class="info">
						<h2>Built using Sequence.js</h2>
						<p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p><p>The Responsive Slider with Advanced CSS3 Transitions</p>
					</div>
					<img class="sky" src="https://ianlunn.github.com/Sequence/themes/sliding-horizontal-parallax/images/bg-clouds.png" alt="Blue Sky" />
      <img class="balloon" src="https://ianlunn.github.com/Sequence/themes/sliding-horizontal-parallax/images/balloon.png" alt="Balloon" />
				</li>
				<li>
					<div class="info">
						<h2>Creative Control</h2>
						<p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>
					</div>
					<img class="sky" src="https://ianlunn.github.com/Sequence/themes/sliding-horizontal-parallax/images/bg-clouds.png" alt="Blue Sky" />
      <img class="aeroplane" src="https://ianlunn.github.com/Sequence/themes/sliding-horizontal-parallax/images/aeroplane.png" alt="Aeroplane" />
				</li>
				<li>
					<div class="info">
						<h2>Cutting Edge</h2>
						<p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
					</div>
      <img class="sky" src="https://ianlunn.github.com/Sequence/themes/sliding-horizontal-parallax/images/bg-clouds.png" alt="Blue Sky" />
      <img class="kite" src="https://ianlunn.github.com/Sequence/themes/sliding-horizontal-parallax/images/kite.png" alt="Kite" />
				</li>
			</ul>
		</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ianlunn.github.com/Sequence/scripts/sequence.jquery.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Sequence.js - Sliding Horizontal Parallax CSS Codes

/*
Theme created for use with Sequence.js (http://www.sequencejs.com/)

Theme: Sliding Horizontal Parallax
Version: 1.2
Theme Author: Ian Lunn @IanLunn
Author URL: https://www.ianlunn.co.uk/
Theme URL: http://www.sequencejs.com/themes/sliding-horizontal-parallax/

This is a FREE theme and is available under a MIT License:
https://www.opensource.org/licenses/mit-license.php

Sequence.js and its dependencies are (c) Ian Lunn Design 2013 unless otherwise stated.
*/

/* THEME STYLES */
#sequence {
  position: relative;
  min-height: 600px;
  max-width: 1400px;
  min-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  background: url(https://ianlunn.github.com/Sequence/themes/sliding-horizontal-parallax/images/bg-sky.png) repeat-x #65b7f1;
  color: white;
  font-family: "Play", sans-serif;
}

#sequence > .sequence-canvas {
  height: 100%;
  width: 100%;
}

#sequence > .sequence-canvas > li {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#sequence > .sequence-canvas li > * {
  position: absolute;
  transition-timing-function: ease-in-out;
}

#sequence .sequence-next,
#sequence .sequence-prev {
  color: white;
  cursor: pointer;
  display: none;
  font-size: 80px;
  font-weight: bold;
  position: absolute;
  opacity: 0.4;
  top: 280px;
  height: 41px;
  width: 39px;
  z-index: 20;
  transition-duration: 0.4s;
}

#sequence .sequence-prev {
  left: 40px;
}

#sequence .sequence-next {
  right: 40px;
}

#sequence .sequence-next:hover,
#sequence .sequence-prev:hover {
  opacity: 1;
  transform: scale(1.2);
  transition-duration: 0.4s;
}

#sequence h2 {
  font-size: 1.5em;
  line-height: 1.2em;
}

#sequence .info {
  color: black;
  font-size: 1em;
  right: 150%;
  line-height: 1.2em;
  top: 270px;
  width: 25%;
  z-index: 10;
  vertical-align: middle;
  transition-duration: 4s;
  transition-property: right;
}

#sequence .animate-in .info {
    right: 15%;
    transition-duration: 4s;
}

#sequence .animate-out .info {
    right: -150%;
    transition-duration: 4s;
}

#sequence .balloon {
    left: -140%;
    top: 200px;
    max-width: 40%;
    z-index: 6;
    transition-property: left top;
}

#sequence .animate-in .balloon {
    left: 15%;
    top: 70px;
    transition-duration: 4s;
    z-index: 4;
}

#sequence .animate-out .balloon {
    left: 140%;
    top: -30px;
    z-index: 2;
    transition-duration: 4s;
}

#sequence .aeroplane {
    left: -50%;
    max-width: 40%;
    top: 800px;
    z-index: 6;
    transition-property: left top transform;
}

#sequence .animate-in .aeroplane {
    left: 10%;
    top: 100px;
    transition-duration: 4s;
    transform: rotate(20deg);
    z-index: 4;
}

#sequence .animate-out .aeroplane {
    left: 70%;
    top: -900px;
    transition-duration: 4s;
    transform: rotate(40deg);
    z-index: 2;
}

#sequence .sky {
    height: auto;
    width: 100%;
    left: -6%;
    opacity: 0;
    top: 0;
    vertical-align: middle;
    z-index: 1;
    transition-property: left top;
}

#sequence .animate-in .sky {
    left: 0%;
    opacity: 1;
    top: 0;
    z-index: 1;
    transition-duration: 4s;
}

#sequence .animate-out .sky {
    left: 6%;
    opacity: 0;
    top: 0;
    z-index: 1;
    transition-duration: 4s;
}

#sequence .kite {
  left: -30%;
  opacity: 0;
  max-width: 40%;
  top: 300px;
  z-index: 6;
  transform-origin: 100%;
  transition-property: left top transform;
}

#sequence .animate-in .kite {
  left: -15%;
  top: 300px;
  opacity: 1;
  z-index: 4;
  transform-origin: 100%;
  transform: rotate(80deg);
  transition-duration: 4s;
}

#sequence .animate-out .kite {
  left: -15%;
  opacity: 0;
  top: 300px;
  z-index: 2;
  transform-origin: 100%;
  transform: rotate(200deg);
  transition-duration: 3s;
}

#sequence .sequence-fallback .animate-in .kite {
  left: 20%;
  top: 200px;
}

Sequence.js - Sliding Horizontal Parallax JS Codes

$(document).ready(function(){
    var options = {
        autoPlay: true,
        nextButton: true,
        prevButton: true,
        preloader: true,
        navigationSkip: false
    };
    var sequence = $("#sequence").sequence(options).data("sequence");

    sequence.afterLoaded = function(){
        $(".sequence-prev, .sequence-next").fadeIn(500);
    }
});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.