Sequence.js - Sliding Horizontal Parallax

Developer
Maheshc
Size
4,537 Kb
Views
8,092

How do I make an 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 28 November 2022, Monday.

Sequence.js - Sliding Horizontal Parallax Previews
IQ Test

Sequence.js - Sliding Horizontal Parallax - Script Codes 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 - Script Codes 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 - Script Codes 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); }
});
Sequence.js - Sliding Horizontal Parallax - Script Codes
Sequence.js - Sliding Horizontal Parallax - Script Codes
Home Page Home
Developer Maheshc
Username maheshc
Uploaded November 28, 2022
Rating 3
Size 4,537 Kb
Views 8,092
Do you need developer help for Sequence.js - Sliding Horizontal Parallax?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Maheshc (maheshc) Script Codes
Name
Parallax scrolling background
A Pen by maheshc
GTA 5 CSS3 Parallax
Animated scroll-dependant menu using scrollMonitor
Simplest Parallax effect ever.
CSS 3D Solar System
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!