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 |
Parallax scrolling background | 3,398 Kb |
A Pen by maheshc | 2,586 Kb |
GTA 5 CSS3 Parallax | 2,754 Kb |
Animated scroll-dependant menu using scrollMonitor | 2,748 Kb |
Simplest Parallax effect ever. | 1,900 Kb |
CSS 3D Solar System | 251,376 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 |
Javascript Welcome | Peterlewicki | 1,573 Kb |
A Pen by Alexandru Pora | Axpro | 1,615 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Hovers with popups | Zacharyolson | 2,380 Kb |
Twitch TV | Natester13 | 4,488 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Twitch API | Coderpilot | 3,412 Kb |
Main page display | BarryKe | 4,562 Kb |
LeMandinque | Aadesida | 9,046 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 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!