Auto scroll to element offset 2

Developer
Rodrigo Hernando
Size
2,620 Kb
Views
32,384
  1. Auto scroll to element offset 2 Previews
  2. Auto scroll to element offset 2 HTML Codes
  3. Auto scroll to element offset 2 CSS Codes
  4. Auto scroll to element offset 2 JS Codes

How do I make an auto scroll to element offset 2?

An extension of a previous pen: http://codepen.io/rhernando/pen/bjLxeAuto scroll to an element's offset top position using Greensock Animation Platform's scrollTo plugin.. What is a auto scroll to element offset 2? How do you make a auto scroll to element offset 2? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.

Auto scroll to element offset 2 Previews
IQ Test

Auto scroll to element offset 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Auto scroll to element offset 2</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="element" id="element1"></div>
<div class="element" id="element2" style="height:150%;"></div>
<div class="element" id="element1"></div>
<div class="element" id="element2"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Auto scroll to element offset 2 - Script Codes CSS Codes

body{	margin:0;	height:100%;	background:#a1a1a1;
}
.element{	width:80%;	height:100%;	margin:0 10%;	position:absolute;	display:block;
}
#element1{	background:#00f;
}
#element2{	background:#f0f;
}

Auto scroll to element offset 2 - Script Codes JS Codes

$(document).ready(function(){
var elemHeight = [], elemOffset = [], currentElement = 0,//the first element previousScroll, scrollPos, timerObject = {a:0};
$("div.element").each(function(index)
{	var prevHeight = $(this).prev().outerHeight(), prevOffset = $(this).prev().offset();	if(index > 0)	{	TweenMax.set($(this), {top:(prevHeight + prevOffset.top)});	}	elemHeight.push($(this).outerHeight());	elemOffset.push($(this).offset().top);
});
$(window).scroll(function()
{	scrollPos = $(this).scrollTop();	//check scroll direction	if(previousScroll < scrollPos)//scrolling down	{	if(scrollPos > ( (elemHeight[currentElement] / 2) + elemOffset[currentElement]) )	{	currentElement++;//we passed to the next element of the collection because more than 50% of that element is visible now	}	}	else if(previousScroll > scrollPos)//scrolling up	{	if(scrollPos < ( (elemHeight[currentElement - 1] / 2) + elemOffset[currentElement - 1]) )	{	currentElement--;//we passed to the previuos element of the collection because more than 50% of that element is visible now	}	}	previousScroll = scrollPos;	TweenMax.to(timerObject, .5, {a:1, onComplete:timerComplete});
});
function timerComplete()
{	//We scroll the window, or other element with an overflow property, to the top offset position of the current element	//that has more than 50% showing on the screen.	TweenMax.to(window, .75, {scrollTo:{y:elemOffset[currentElement]}, ease:Power4.easeOut});
}
});
Auto scroll to element offset 2 - Script Codes
Auto scroll to element offset 2 - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 3
Size 2,620 Kb
Views 32,384
Do you need developer help for Auto scroll to element offset 2?

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!

Rodrigo Hernando (rhernando) Script Codes
Name
Z Index Tween
Simple Interactive 3D Cube
Greensock Swipe Slides
Greensock Draggable latest update
Auto scroll to element offset
Spinning Images
Circular Progress Bar
Transform Orign
Circular Bezier
GSAP Scramble Text Plugin
Create amazing love letters 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!