EN
scrolling effect to move images using jquery
1
answers
2
points
In this figure you can see the images of continents.
the continents are given positon:fixed. So if the document lenght is more than the window height it remains at its fixed position.the task is what when user scroll through document the continents join togeher and when user scrolls up the continents move apart.
can somebody suggest me any idea.
I am new a new developer.
And I can't figure out what should I do ?
1 answer
12
points
Let me know if it is the effect you need.
It is easy to create some similar effects in Vanilla JS.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.continent {
position: fixed;
}
#north-america {
left: 72px; top: 48px; background: green; width: 138px; height: 120px;
}
#south-america {
left: 78px; top: 210px; background: #abe23e; width: 120px; height: 150px;
}
#eurpe {
left: 309px; top: 78px; background: #00c700; width: 120px; height: 54px;
}
#asia {
left: 432px; top: 48px; background: green; width: 180px; height: 150px;
}
#afrika {
left: 282px; top: 192px; background: yellow; width: 138px; height: 162px;
}
#australia {
left: 504px; top: 300px; background: #b9b900; width: 120px; height: 60px;
}
#antarctica {
left: 180px; top: 384px; background: #3879C8; width: 300px; height: 30px;
}
</style>
<script>
function caculateMiddlePoint(elements) {
var sumX = 0;
var sumY = 0;
for (var i = 0; i < elements.length; ++i) {
var element = elements[i];
var middleX = element.offsetLeft + 0.5 * element.offsetWidth;
var middleY = element.offsetTop + 0.5 * element.offsetHeight;
sumX += middleX;
sumY += middleY;
}
return {
x: sumX / elements.length,
y: sumY / elements.length
};
}
function findCurrentPositions(elements) {
var positions = [];
for (var i = 0; i < elements.length; ++i) {
var element = elements[i];
positions.push({
x: element.offsetLeft,
y: element.offsetTop
});
}
return positions;
}
</script>
</head>
<body>
<div id="north-america" class="continent">North America</div>
<div id="south-america" class="continent">South America</div>
<div id="eurpe" class="continent">Eurpe</div>
<div id="asia" class="continent">Asia</div>
<div id="afrika" class="continent">Afrika</div>
<div id="australia" class="continent">Australia</div>
<div id="antarctica" class="continent">Antarctica</div>
<script>
var spaceScope = 0.2; // indicates how far should move continents from common middle point
var scrollScope = 2000; // indicates the range that affects on continents moving
var htmlElement = document.documentElement;
var bodyElement = document.body;
var continentElements = document.querySelectorAll('.continent');
var middlePoint = caculateMiddlePoint(continentElements);
var defaultPositions = findCurrentPositions(continentElements);
document.onscroll = function() {
var scrollY = window.scrollY;
var spaceSize = spaceScope * Math.min(1.0, scrollY / scrollScope);
// var spaceSize = spaceScope * Math.max(0.0, 1.0 - scrollY / scrollScope); // reversed condition
for (var i = 0; i < defaultPositions.length; ++i) {
var defaultPosition = defaultPositions[i];
var continentElement = continentElements[i];
// https://en.wikipedia.org/wiki/Parametric_equation
var continentPositionX = defaultPosition.x + spaceSize * (defaultPosition.x - middlePoint.x);
var continentPositionY = defaultPosition.y + spaceSize * (defaultPosition.y - middlePoint.y);
continentElement.style.left = continentPositionX + 'px';
continentElement.style.top = continentPositionY + 'px';
}
};
// some data that makes page scrollable
for (var i = 0; i < 1000; ++i) {
document.write('Site text here ...<br />');
}
</script>
</body>
</html>
References
0 comments
Add comment