Rework of the rework with additional events

Developer
Jack
Size
9,314 Kb
Views
28,336
  1. Rework of the rework with additional events Previews
  2. Rework of the rework with additional events HTML Codes
  3. Rework of the rework with additional events CSS Codes
  4. Rework of the rework with additional events JS Codes

How do I make an rework of the rework with additional events?

This is an expansion of cordons original pin. What is a rework of the rework with additional events? How do you make a rework of the rework with additional events? This script and codes were developed by Jack on 16 September 2022, Friday.

Rework of the rework with additional events Previews
IQ Test

Rework of the rework with additional events - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rework of the rework with additional events</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel= "stylesheet" type="text/css" />
<div class="container">	<div id="splitlayout" class="splitlayout">	<div class="intro">	<div class="side side-left">	<div class="intro-content">	<h1><span>Left</span></h1>	</div>	<div class="overlay"></div>	</div>	<div class="side side-right">	<div class="intro-content"><h1><span>right</span></h1>	</div>	<div class="overlay"></div>	</div><!-- /intro -->	<div class="page page-right">	<div class="page-inner"> <div class="scroll-container"> <section class="a-section-container clearfix"> <article class="slide slide-left"> <h2>Explaining the Unexplainable</h2> <p>During the Enlightenment, the French philosopher Voltaire called
superstition a “mad daughter” and likened it to astrology. </p> </article> <fig class="simulate-fig slide slide-right"></fig> </section> <section class="a-section-container clearfix"> <fig class="simulate-fig slide slide-left"></fig> <article class="slide slide-right"> <h2>On The Origin Of Celebrity</h2> <p>My dear friend Koko the sign-language gorilla was there, ice-dancing with Ryan Gosling, who is always good for a laugh.</p> </article> </section> <section class="a-section-container clearfix"> <article class="slide slide-left"> <h2>Monsters, Marvels, and the Birth of Science</h2> <p>We know that reptiles lay eggs, while mammals bear live young; the Earth revolves around the sun every 365.25 days; electrons glom onto protons like bears onto honey. </p> </article><fig class="simulate-fig slide slide-right"></fig> </section> <section class="a-section-container clearfix"> <article class="slide slide-right"> <h2>Bottom of the barrel</h2> <p>We know that reptiles lay eggs, while mammals bear live young; the Earth revolves around the sun every 365.25 days; electrons glom onto protons like bears onto honey. </p> </article> <fig class="simulate-fig slide slide-left"></fig> </section> </div><!-- /scroll container -->	</div><!-- /page-inner -->	</div><!-- /page-right -->	<div class="page page-left">	<div class="page-inner">	<section>	<h2>Attache</h2>	<p>Scenario archetype complementary responsive script pixel sidebar sitemap keep it simple. Complementary visuals footer CSS from alan cooper delightful. Photoshop iconography simplicity user experience affordance narrative ascenders contour. Slab serif interstitial skeuomorphism illustrator design by committee simplicity alan cooper eye tracking. Typography contrast mental model typesetting affordance narrative from CSS. Retina simplicity design by committee typography oblique.</p>	<p>Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.</p>	</section>	<section>	<h2>Responsive</h2>	<p>Card-sorting dropdown constraints alan cooper prägnanz iconography. Stakeholder balsamiq italic vector composition ethnography CSS monospace hierarchy. Eye tracking serif persona focus group.</p>	<p>Typesetting artifact rounded corners eye tracking braindump drawer menu mockup dropdown measure. Jony ive eye tracking script monospace heuristic tabs sketches. Affordance eye tracking scenario usable ligature typesetting clarity responsive. Information architecture golden ratio drawer menu header affordance aspect ratio. Balsamiq slab serif IDEO cognitive dissonance kerning pixel pixel-perfect. Pixel rounded corners header workflow portfolio.</p>	<p>Scenario navigation complementary jony ive helvetica archetype interstitial serif front-end. Constraints pencil usability gestalt design language mockup usability testing affordance jakob nielsen.</p>	</section>	<section>	<h2>Prototype</h2>	<p>Delightful ascenders contrast prototype. Ligature jakob nielsen user measure. Ligature contrast glyph rule of thirds composition interstitial dribbble. Mental model typography urbanized balance. Resolution rounded corners IDEO constraints dribbble persona. Portfolio sketch baseline 66-character line. Usability testing mental model simplicity aspect ratio pencil type. Usable sans-serif visualization leading prägnanz baseline pencil fireworks clarity omnigraffle.</p>	<p>Paper prototype urbanized headroom typography splash screen pencil modal branding. Retina omnigraffle objectified descender navigation adobe ethnography. Innovate design by committee modern hero message. Contrast user-centered color theory keep it simple visuals bevel adobe descender splash screen. From focus group accessibility sans-serif archetype pixel-perfect complementary skeuomorphism. Focus group iconography figure-ground navigation user-centered omnigraffle from.</p>	</section>	<section>	<h2>Typography</h2>	<p>Typesetting artifact rounded corners eye tracking braindump drawer menu mockup dropdown measure. Jony ive eye tracking script monospace heuristic tabs sketches. Affordance eye tracking scenario usable ligature typesetting clarity responsive. Information architecture golden ratio drawer menu header affordance aspect ratio. Balsamiq slab serif IDEO cognitive dissonance kerning pixel pixel-perfect. Pixel rounded corners header workflow portfolio.</p>	<p>Fireworks mobile skeuomorphism sitemap. Workflow iconography interaction design pixel-perfect serif. Mental model monospace typeface behavior change bauhaus from usability testing. Color theory user experience paper prototype narrative palette serif gradient header. Oblique modal 66-character line sketch responsive portfolio. Comic sans fireworks prägnanz monospace gradient design language jakob nielsen. Figure-ground pixel aspect ratio sketches rounded corners jony ive constraints mental model splash screen.</p>	</section>	</div><!-- /page-inner -->	</div><!-- /page-left -->	<a href="#" class="back back-right" title="back to intro">back</a>	<a href="#" class="back back-left" title="back to intro">back</a>	</div><!-- /splitlayout -->	</div><!-- /container --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Rework of the rework with additional events - Script Codes CSS Codes

html, body,
main {	position: relative;	width: 100%;	height: 100%; margin:0;padding:0; font-family:'lato';
}
a{text-decoration:none;}
html{background:rgba(0,0,0,0);	width: 100%;	height: 100%;z-index:1; margin:0;padding:0;}
.splitlayout {	position: relative;	overflow-x: hidden;	min-height: 100%;	width: 100%;
}
/* Intro sides */
.side {	position: fixed;	top: 0;	z-index: 100;	width: 50%;	height: 100%;	text-align: center; -webkit-transition: all .2s ease-in-out;	transition: all 2s ease-in-out;	-webkit-backface-visibility: hidden;
}
.open-left .side,
.open-right .side {	cursor: default;
}
.centerlogo{ background:red;position:absolute;top:30%;left:45%; border-radius:50%;widtH:140px;height:140px; z-index:9999;display:block;transition:all .4s ease-in-out}
}
.open-right div.centerlogo{webkit-transform: translateY(00%) translateX(50%);transform: translateY(0%) translateX(50%);}-
.overlay {	position: absolute;	top: 0;	left: 0;	z-index: 499;	visibility: hidden;	width: 100%;	height: 100%;	opacity: 0;
}
.side-left .overlay {	background: #30cbf2; opacity:.5;
}
.side-right .overlay {	background: #30cbf2; opacity:.5;
}
.side-left {	left: 0;	background: #30cbf2;	color: #34495e;	outline: 5px solid #30cbf2; /* avoid gap */
}
.side-right {	right: 0;	background: #30cbf2;	color: #34495e;	outline: 5px solid #30cbf2;/* avoid gap */
}
/* Intro content, profile image and name, back button */
.intro-content {	position: absolute;	top: 50%;	padding: 10em 1em;	width: 50%;	cursor: pointer;	-webkit-transform: translateY(-50%) translateX(-50%);	transform: translateY(-50%) translateX(-50%);
}
.profile {	margin: 0 auto;	width: 140px;	height: 140px;	border-radius: 50%;	background: #30cbf2;
}
.profile img { height:100%; overflow:hidden; max-width:100%;	border-radius: 50%;	opacity: 0.6;
}.side-right .intro-content{ -webkit-transform: translateY(-50%) translateX(50%);transform: translateY(-50%) translateX(50%);}
.side-left .intro-content{ -webkit-transform: translateY(-50%) translateX(50%);transform: translateY(-50%) translateX(50%);}
.intro-content h1 > span {	display: block;	white-space: nowrap;
}
.avatar { z-index:9; left:50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; max-width: 350px; height: 350px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; border-radius: 150px; background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box;
}
.side-right .intro-content h1 > span {	position: relative;	padding: 0.8em;	text-transform: uppercase;	letter-spacing: 1px;	font-size: 0.8em;
}
.side-right .intro-content h1 > span:before {	background:#34495e; position: absolute;	bottom: 0;	left: 25%;	width: 50%;	height: 2px;	content: '';
}
.side-left .intro-content h1 > span{	position: relative;	padding: 0.8em;	text-transform: uppercase;	letter-spacing: 1px;	font-size: 0.8em;
}
.side-left .intro-content h1 > span:before {	background: #34495e; position: absolute;	bottom: 0;	left: 25%;	width: 50%;	height: 2px;	content: '';
}
.back {	position: fixed;	top:0px;	z-index: 500;	display: block;	visibility: hidden;	width: 15%;	height: 100%;	color: white;	text-align: center;	font-size:1em;	line-height: 4em;	opacity: 0; font-weight:900;	pointer-events: none;
}
.back:hover {	color: #004887; background:#ccdae7; opacity:.5;
}
.mobile-layout .back { /* fixed positioning will make this not clickable after scrolling on some mobile devices */	position: absolute;
}
.back-left {	left: 0px; /* IE9 SVG, needs conditional override of 'filter' to 'none' */	-webkit-transform: translateX(-0%);	transform: translateX(-0%);
}
.back-right {	right: 0px; /* IE9 SVG, needs conditional override of 'filter' to 'none' */	-webkit-transform: translateX(00%);	transform: translateX(0%);
}
.open-right .back-left,
.open-left .back-right {	visibility: visible;	opacity: .5; -webkit-transition: all 0.6s ease-in-out;	transition: all 0.3s ease-in-out;	pointer-events: auto;
}
/* Pages */
.page {	position: relative;	top: 0;	overflow: auto;	min-height: 100%;	width: 85%;	height: auto;	font-size: 1.4em;	-webkit-backface-visibility: hidden;
}
.page-right {	left: 15%; /* avoid rounding gaps */	background: #ecf0f1;	color: #97a8b2;	-webkit-transform: translateX(100%);	transform: translateX(100%);
}
.page-left {	left: 0;/* avoid rounding gaps */	background: #34495e;	color: #fff;	text-align: right;	-webkit-transform: translateX(-130%);	transform: translateX(-130%);
}
.splitlayout.open-right {	background: #34495e;
}
.splitlayout.open-left {	background: #34495e;
}
/* Inner page content */
.page-inner {	padding: 0em;
}
.page-inner section {	padding: 1em;
}
.page-inner h2 {	margin: 0 0 1em 0;	font-weight: 300;	font-size: 2.4em;
}
.page-inner p {	font-weight: 300;	font-size: 1.2em;
}
/* All transitions */
.side,
.page {	-webkit-transition: -webkit-transform .5s;	transition: transform .5s ease-in-out;
}
.overlay {	-webkit-transition: opacity 0.2s, visibility 0.1s 0.2s;	transition: opacity 0.2s, visibility 0.1s 0.6s;
}
.intro-content {	-webkit-transition: -webkit-transform .5s, top 0.6s;	transition: transform .5s, top 0.6s;
}
.intro-content h1,
.back {	-webkit-transition: opacity 0.3s;	transition: opacity 0.3s;
}
/* Open and close */
/* We need to set the position and overflow for the respective page scroll */
.reset-layout .page,
.splitlayout.open-right .page-left,
.splitlayout.open-left .page-right,
.splitlayout.close-right .page-left,
.splitlayout.close-left .page-right {	position: absolute;	overflow: hidden;	height: 100%;
}
.splitlayout.open-right .page-right,
.splitlayout.open-left .page-left {	position: relative;	overflow: auto;	height: auto;
}
.open-right .side-left .overlay,
.open-left .side-right .overlay {	visibility: visible;	opacity: 1;	-webkit-transition: opacity 0.6s;	transition: opacity 0.6s;
}
/* Right side open */
.open-right .side-left {	-webkit-transform: translateX(-100%);	transform: translateX(-100%);
}
.open-right .side-right {	z-index: 200;	-webkit-transform: translateX(-170%);	transform: translateX(-170%);
}
.close-right .side-right {	z-index: 200;
}
.open-right .side-right .intro-content {	-webkit-transform: translateY(-50%) translateX(110%) scale(0.8);	transform: translateY(-50%) translateX(110%) scale(0.8);
}
.open-right .page-right {	-webkit-transform: translateX(0%);	transform: translateX(0%);
}
/* Left side open */
.open-left .side-right { width:10%;	-webkit-transform: translateX(100%);	transform: translateX(100%);
}
.open-left .side-left {	z-index: 200;	-webkit-transform: translateX(170%);	transform: translateX(170%);
}
.close-left .side-left {	z-index: 200;
}
.open-left .side-left .intro-content {	-webkit-transform: translateY(-50%) translateX(-20%) scale(0.8);	transform: translateY(-50%) translateX(-20%) scale(0.8);
}
.open-right .side-right .intro-content .avatar{	-webkit-transform: scale(0.6);	transform: scale(0.6);
}
.open-left .side-left .intro-content .avatar{	-webkit-transform: scale(0.6);	transform: scale(0.6);
}
.open-left .page-left {	-webkit-transform: translateX(0%);	transform: translateX(0%);
}
/* Media Queries */
/* Media Queries */
@media screen and (max-width: 83em) {	.intro-content { font-size: 60%; }
}
@media screen and (max-width: 58em) {	body { font-size: 90%; }
}
@media screen and (max-width: 640px) { .open-right .side-right .intro-content {	-webkit-transform: translateY(-50%) translateX(100%) scale(0.8);	transform: translateY(-50%) translateX (100%) scale(0.8);
}	body { font-size: 50%; }
}
.clearfix:before, .clearfix:after { content: ""; display: table;
}
.clearfix:after { clear: both;
}
.scroll-container { margin-top: 50px; overflow: hidden;
}
.a-section-container { margin-bottom: 15vh; position: relative; transform: translateZ(0);
}
.a-section-container h2 { font-size: 1.5em; font-weight: 400; font-family:'lato'; line-height: 1.45em; color: black;
}
.a-section-container p { font-size: 1em; line-height: 1.2em; font-weight: 300; font-family: 'lato'; color:black;
}
.slide { box-sizing: border-box; width: 50%; float: left; margin: 0; padding: 0 4%; min-height: 12em;
}
.slide-right { text-align: left;
}
.slide-left { text-align: right;
}
.simulate-fig { height: 300px; background-color: #ed7059;
}
.simulate-fig.slide-right { float: right;
}
.simulate-fig.slide-left { float: left;
}
.init .slide { opacity: 0; transition: none; -webkit-transition: none;
}
.init .slide-left { transform: translateX(-80px); -webkit-transform: translateX(-80);
}
.init .slide-right { transform: translateX(80px); -webkit-transform: translateX(80);
}
.animate > .slide { transform: translateX(0); -webkit-transform: translateX(0); opacity: 1; transition: all 0.5s; -webkit-transition: all 0.5s;
}

Rework of the rework with additional events - Script Codes JS Codes

var viewportHeight = $(window).height();
// Total height the page has been scrolled so far
var getYOffset = function(){ return $(window).scrollTop();
}
// Offset of an element with relative
// to the document
// A wrapper over jQuery's offset() method
// to make the code readable
var getOffsetFromDocument = function(el) { return $(el).offset().top;
}
var flyOnScroll = function(percentOfEl){ self = flyOnScroll; self.percentOfEl = percentOfEl; self.init(); $(document).on('scroll', function(){ self.iterate(); });
};
flyOnScroll.init = function(){ this.hideElNotInView();
};
flyOnScroll.isElementInView = function(el, percentInView){ // elTopOffset -> vertical seperation of the element's top corner from // documents top corner var elTopOffset = getOffsetFromDocument(el); var elHeight = $(el).height(); // height of the element var elBottomOffset = elTopOffset + elHeight; var vScrolled = getYOffset(); // height scrolled till now // docViewed -> total height of scrolled document till the // end of the current view var docViewed = viewportHeight + vScrolled; percentInView = percentInView || 0; // Return false when the element is beneath the present view // or above the present view if ( ((elTopOffset + (percentInView/100) * elHeight) <= docViewed) && ( docViewed <= (elTopOffset + elHeight + viewportHeight))) { console.log((elTopOffset + (percentInView/100) * elHeight), docViewed); return true; }
}
flyOnScroll.hideElNotInView = function(){ var self = this; $('.a-section-container').each(function(index, el){ if (!self.isElementInView(el, self.percentOfEl)) { $(el).removeClass('animate'); $(el).addClass('init'); } });
};
flyOnScroll.animateElInView = function(){ var self = this; $('.a-section-container').each(function(index, el){ if (self.isElementInView(el, 10)) { $(el).removeClass('init'); $(el).addClass('animate'); } });
};
flyOnScroll.iterate = function() { this.hideElNotInView(); this.animateElInView();
};
flyOnScroll(7);
/*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); };
}
else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); };
}
function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c );
}
var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) { // AMD define( classie );
} else { // browser global window.classie = classie;
}
})( window );
/** * cbpSplitLayout.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * https://www.opensource.org/licenses/mit-license.php * * Copyright 2013, Codrops * http://www.codrops.com */
(function() {	'use strict';	// http://stackoverflow.com/a/11381730/989439	function mobilecheck() {	var check = false;	(function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);	return check;	}	var splitlayout = document.getElementById( 'splitlayout' ),	leftSide = splitlayout.querySelector( 'div.intro > div.side-left' ),	rightSide = splitlayout.querySelector( 'div.intro > div.side-right' ), centerlogo = splitlayout.querySelector( 'div.intro > div.logo' ),	pageLeft = splitlayout.querySelector( 'div.page-left' ),	pageRight = splitlayout.querySelector( 'div.page-right' ),	eventtype = mobilecheck() ? 'touchstart' : 'click',	transEndEventNames = {	'WebkitTransition': 'webkitTransitionEnd',	'MozTransition': 'transitionend',	'OTransition': 'oTransitionEnd',	'msTransition': 'MSTransitionEnd',	'transition': 'transitionend'	},	transEndEventName = transEndEventNames[Modernizr.prefixed( 'transition' )];	function init() {	if( mobilecheck() ) {	classie.add( splitlayout, 'mobile-layout' );	}	classie.add( splitlayout, 'reset-layout' );	leftSide.querySelector( 'div.intro-content').addEventListener( eventtype, function( ev ) {	reset();	classie.add( splitlayout, 'open-left' );	} );	rightSide.querySelector( 'div.intro-content' ).addEventListener( eventtype, function( ev ) {	reset();	classie.add( splitlayout, 'open-right' );	} );	// back to intro	// after transition ends:	var onEndTransFn = function() {	this.removeEventListener( transEndEventName, onEndTransFn );	classie.add( splitlayout, 'reset-layout' );	document.body.scrollTop = document.documentElement.scrollTop = 0;	},	backToIntro = function( ev ) {	ev.preventDefault();	ev.stopPropagation();	var dir = classie.has( ev.target, 'back-right' ) ? 'left' : 'right',	page = dir === 'right' ? pageRight : pageLeft;	classie.remove( splitlayout, 'open-' + dir );	classie.add( splitlayout, 'close-' + dir );	page.addEventListener( transEndEventName, onEndTransFn );	};	splitlayout.querySelector( 'a.back-left' ).addEventListener( eventtype, backToIntro );	splitlayout.querySelector( 'a.back-right' ).addEventListener( eventtype, backToIntro );	}	function reset() {	classie.remove( splitlayout, 'close-right' );	classie.remove( splitlayout, 'close-left' );	classie.remove( splitlayout, 'reset-layout' );	}	init();
})();
var viewportHeight = $(window).height();
// Total height the page has been scrolled so far
var getYOffset = function(){ return $(window).scrollTop();
}
// Offset of an element with relative
// to the document
// A wrapper over jQuery's offset() method
// to make the code readable
var getOffsetFromDocument = function(el) { return $(el).offset().top;
}
var flyOnScroll = function(percentOfEl){ self = flyOnScroll; self.percentOfEl = percentOfEl; self.init(); $(document).on('scroll', function(){ self.iterate(); });
};
flyOnScroll.init = function(){ this.hideElNotInView();
};
flyOnScroll.isElementInView = function(el, percentInView){ // elTopOffset -> vertical seperation of the element's top corner from // documents top corner var elTopOffset = getOffsetFromDocument(el); var elHeight = $(el).height(); // height of the element var elBottomOffset = elTopOffset + elHeight; var vScrolled = getYOffset(); // height scrolled till now // docViewed -> total height of scrolled document till the // end of the current view var docViewed = viewportHeight + vScrolled; percentInView = percentInView || 0; // Return false when the element is beneath the present view // or above the present view if ( ((elTopOffset + (percentInView/100) * elHeight) <= docViewed) && ( docViewed <= (elTopOffset + elHeight + viewportHeight))) { console.log((elTopOffset + (percentInView/100) * elHeight), docViewed); return true; }
}
flyOnScroll.hideElNotInView = function(){ var self = this; $('.a-section-container').each(function(index, el){ if (!self.isElementInView(el, self.percentOfEl)) { $(el).removeClass('animate'); $(el).addClass('init'); } });
};
flyOnScroll.animateElInView = function(){ var self = this; $('.a-section-container').each(function(index, el){ if (self.isElementInView(el, 10)) { $(el).removeClass('init'); $(el).addClass('animate'); } });
};
flyOnScroll.iterate = function() { this.hideElNotInView(); this.animateElInView();
};
flyOnScroll(10);
Rework of the rework with additional events - Script Codes
Rework of the rework with additional events - Script Codes
Home Page Home
Developer Jack
Username jackmoran
Uploaded September 16, 2022
Rating 3
Size 9,314 Kb
Views 28,336
Do you need developer help for Rework of the rework with additional events?

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!

Jack (jackmoran) Script Codes
Name
Design-Thru
Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin
Svg Icons of my personal logo-moranideas
Social Bar
MENU to Close Arrow
NAVIGATION
Unify Test Example of Panorama
Sliding Blocks
CSS Google Now
A Pen by jack
Create amazing art & images 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!