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