When the page is scrolled on my website, I want table_area-left to move from left to right to its current position, table_area-right to move from right to left to its current position, and morph button to move from down to up. I am struggling to find the jQuery code for this as I am not very familiar with jQuery. Can someone please assist me?
I have also added the jQuery UI library:
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"
integrity="sha256-lCF+55kMUF+3fO/3BiXui4eiUKcQmtr7ecKSeLVDxIQ="
crossorigin="anonymous"></script>
<section id="services">
<!-- services page -->
<div class="wrapper">
<div class="general_content">
<div class="table_area-left">
<h2>ROLL SLITTING CUTTING MACHINES</h2>
<p>
Materials of every quality hot and decap (RP) group are cut to any desired size from 1.50 mm to 25.00 mm and served. All cold and galvanized materials from 0.50 mm to 3.00 mm are carefully cut to any desired size and meticulously packaged.
</p>
</div>
<div class="table_area-right">
<h2>ROLL SLICING MACHINES</h2>
<p>
Various cold and galvanized materials from 0.18 mm to 2.50 mm are sliced within precise tolerances and packaging is done with care. Hot and decap(RP) group materials from 1.50 mm to 8.00 mm are precisely sliced with the desired width tolerances and meticulously packaged.
</p>
</div>
<div class="morph-button morph-button-overlay morph-button-fixed morph-button">
<button type="button" style="border-radius:10px; border:inset black; margin-top:50px;" title="More Information">More Information</button>
</div>
</div>