Parallax Ribbon

Developer
Myron Schippers
Size
3,240 Kb
Views
34,408
  1. Parallax Ribbon Previews
  2. Parallax Ribbon HTML Codes
  3. Parallax Ribbon CSS Codes
  4. Parallax Ribbon JS Codes

How do I make an parallax ribbon?

NOT FINISHED. What is a parallax ribbon? How do you make a parallax ribbon? This script and codes were developed by Myron Schippers on 15 September 2022, Thursday.

Parallax Ribbon Previews
IQ Test

Parallax Ribbon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax Ribbon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ribbon" data-component="BgEffects" data-effect="parallax">	<div class="ribbon-bg ribbon-bg_sm" data-child="mobileImage" style="background-image: url('http://fillmurray.com/480/800')"></div>	<div class="ribbon-bg" data-child="bgImage" style="background-image: url('http://fillmurray.com/1200/1400')"></div>	<div class="ribbon-fg" data-child="fgImage" style="background-image: url('http://www.placecage.com/c/1200/1400'); opacity: 0.5;"></div>	<!-- CONTENT -->	<div class="ribbon-content" data-child="content">	<div class="wrap wrap_cntSample">	Some very lovely text :D	</div>	</div>
</div>
<!-- /.ribbon -->
<div class="ribbon mix-ribbon_stacked">	<div class="ribbon-bg ribbon-bg_paintFlatDrk"></div>	<!-- CONTENT -->	<div class="ribbon-content" data-child="content">	<div class="wrap wrap_cntSample">	Some very lovely text :D	</div>	</div>
</div>
<!-- /.ribbon -->
<div class="ribbon mix-ribbon_stacked">	<div class="ribbon-bg ribbon-bg_paintFlatDrk"></div>	<!-- CONTENT -->	<div class="ribbon-content" data-child="content">	<div class="wrap wrap_cntSample">	Some very lovely text :D	</div>	</div>
</div>
<!-- /.ribbon -->
<div class="ribbon mix-ribbon_stacked">	<div class="ribbon-bg ribbon-bg_paintFlatDrk"></div>	<!-- CONTENT -->	<div class="ribbon-content" data-child="content">	<div class="wrap wrap_cntSample">	Some very lovely text :D	</div>	</div>
</div>
<!-- /.ribbon -->
<div class="ribbon mix-ribbon_stacked">	<div class="ribbon-bg ribbon-bg_paintFlatDrk"></div>	<!-- CONTENT -->	<div class="ribbon-content" data-child="content">	<div class="wrap wrap_cntSample">	Some very lovely text :D	</div>	</div>
</div>
<!-- /.ribbon -->
<div class="ribbon mix-ribbon_stacked">	<div class="ribbon-bg ribbon-bg_paintFlatDrk"></div>	<!-- CONTENT -->	<div class="ribbon-content" data-child="content">	<div class="wrap wrap_cntSample">	Some very lovely text :D	</div>	</div>
</div>
<!-- /.ribbon -->
<div class="ribbon mix-ribbon_stacked">	<div class="ribbon-bg ribbon-bg_paintFlatDrk"></div>	<!-- CONTENT -->	<div class="ribbon-content" data-child="content">	<div class="wrap wrap_cntSample">	Some very lovely text :D	</div>	</div>
</div>
<!-- /.ribbon --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Parallax Ribbon - Script Codes CSS Codes

/* ----------------------------------
Wrap
---------------------------------- */
.wrap { width: 80%; max-width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;
}
.wrap_cntSample { min-height: 400px;
}
/* ----------------------------------
Ribbon
---------------------------------- */
.ribbon { display: block; width: 100%; margin: 0; padding: 20px 0; position: relative; box-sizing: border-box;
}
.ribbon-bg,
.ribbon-fg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: transparent none fixed no-repeat 50% 0; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.ribbon-content { position: relative;
}
/**
PAINT BACKGROUND
---------------
*/
.ribbon-bg_paintFlatDrk { background-color: #999999;
}
/**
BORDERS
---------------
*/
.mix-ribbon_stacked + .mix-ribbon_stacked { border: 1px solid #777777; border-width: 1px 0 0 0;
}
/**
BREAKPOINT ALTERATIONS
---------------
*/
.ribbon-bg_sm { display: none;
}

Parallax Ribbon - Script Codes JS Codes

var $ = jQuery;
var ScrollService;
var BpService;
/** * ParallaxClass */
var BgEffectsClass = function($element) {	this.$element = $element;	this.init();
};
var protoBg = BgEffectsClass.prototype;
protoBg.init = function() {	this.createChildren();
};
protoBg.createChildren = function() {	this.$bg = this.$element.find('[data-child="bgImage"]');	this.$fg = this.$element.find('[data-child="fgImage"]');	return this;
};
/** * ScrollClass */
var ScrollServiceClass = function() {
};
var protoScroll = ScrollServiceClass.prototype;
/** * Breakpoint Detection */
var BreakpointServiceClass = function() {
};
var protoBP = BreakpointServiceClass.prototype;
var $jsElements = $('[data-component="BgEffects"]');
var $elm;
var EffectModules = [];
if ($jsElements.length > 0) {	BpService = new BreakpointServiceClass();	ScrollService = new ScrollServiceClass();	for (var i = 0; i < $jsElements.length; i++) {	$elm = $($jsElements[i]);	EffectModules.push(new BgEffectsClass($elm));	}
}
Parallax Ribbon - Script Codes
Parallax Ribbon - Script Codes
Home Page Home
Developer Myron Schippers
Username chbymnky
Uploaded September 15, 2022
Rating 3
Size 3,240 Kb
Views 34,408
Do you need developer help for Parallax Ribbon?

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!

Myron Schippers (chbymnky) Script Codes
Name
Vertical List CSS Module
Breadcrumb Challenge v1
Custom Form Fields
Breadcrumb Challenge v2
JQuery UI Tab Face Lift
Collapsible plugin
Loading Dots
Buttons with style
Sliding with CSS
Bicycle
Create amazing Facebook ads 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!