Languages

scrolling effect to move images using jquery

2 points
Asked by:
Albasti
1020

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
Answered by:
Albasti
1020

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

  1. JavaScript - calculate the center of gravity of the elements

0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join