20. Dezember 2023

jQuery:
CSS-Eigenschaften dynamisch übertragen

Bei Animationen oder der responsiven Optimierung kann es praktisch sein dynamisch generierte CSS-Eigenschaften von einem Element dynamisch auf weitere Elemente zu übernehmen:

jQuery(document).ready(function($)
{
	// alle dynamischen Styles übernehmen
	$('#mein_element_2').prop('style', $('#mein_element_1').attr('style'));

	// nur bestimmte dynamische Styles übernehmen
	$('#mein_element_2').css('margin', $('#mein_element_1').css('margin'));
	$('#mein_element_2').css('width', $('#mein_element_1').css('width'));
});

Und so kann eine Funktion aussehen, die beim Scrollen die gewünschten CSS-Eigenschaften automatisch auf weitere Elemente überträgt:

jQuery(document).ready(function($)
{
	// Scroll-Aktionen
	function check_scroll()
	{
		// Prüfen, ob eine Scroll-Animation vorhanden ist
		if($('#scroll_animation').length)
		{
			// Sticky-Eigenschaften des ersten Bildes auf alle anderen Übertragen
			var first_animation_image=$('#scroll_animation .bde-image').eq(0);
			$('#scroll_animation .bde-columns').each(function(index)
			{
				var animation_block=$(this);
				var animation_image=animation_block.find('.bde-image');
				
				if(index>0)
				{
					animation_image.css('position', first_animation_image.css('position'));
					animation_image.css('left', first_animation_image.css('left'));
					animation_image.css('top', first_animation_image.css('top'));
					animation_image.css('margin', first_animation_image.css('margin'));
					animation_image.css('width', first_animation_image.css('width'));
					animation_image.css('height', first_animation_image.css('height'));
					animation_image.css('z-index', 100-index);
				}
			});
		}
	}
	check_scroll();
	$(window).scroll(function() { check_scroll(); });
});