Sequence.js - Sliding Horizontal Parallax
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 - 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); }
});

Developer | Maheshc |
Username | maheshc |
Uploaded | November 28, 2022 |
Rating | 3 |
Size | 4,537 Kb |
Views | 8,092 |
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!
Name | Size |
GTA 5 CSS3 Parallax | 2,754 Kb |
Animated scroll-dependant menu using scrollMonitor | 2,748 Kb |
CSS 3D Solar System | 251,376 Kb |
Simplest Parallax effect ever. | 1,900 Kb |
A Pen by maheshc | 2,586 Kb |
Parallax scrolling background | 3,398 Kb |
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!
Name | Username | Size |
Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Apple website | Jds317 | 1,835 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
Css3 slide | Nakome | 3,190 Kb |
Responsive Pricing Table | Jeremycaris | 2,690 Kb |
Click handler test | Snapson | 2,329 Kb |
3D-box | Parthviroja | 2,346 Kb |
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. Hide Your IP Now!