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(); });
});