I've attempted at least 25 variations of this code to make it more efficient, but each one seems to cause issues.
In essence, I am assigning different classes to elements in order to trigger a css/keyframes animation when the window width is 1025px or larger.
Additionally, there is another class being added when the width is less than 1024px, which is meant to reveal the element without any animations.
<script type="text/javascript">
var width = $(window).width();
if(width >= 1025) {
$(window).scroll(function() {
$('#about .image img.flex').each(function() {
var position = $(this).offset().top;
var top = $(window).scrollTop();
if (position < top+600) { $(this).addClass("slideLeft"); }
});
// Additional similar blocks for other elements...
});
}
else {
$('#about .image img.flex').addClass('visible');
// Additional lines for other elements...
}
</script>
EDIT
Perhaps it would be better illustrated in this way:
If you have any suggestions on how I can improve the efficiency of this part...
var width = $(window).width();
if(width >= 1025) {
$(window).scroll(function() {
$('#about .image img.flex').each(function() {
var position = $(this).offset().top;
var top = $(window).scrollTop();
if (position < top+600) { $(this).addClass("slideLeft"); }
});
// Similar blocks for other element classes...
});'