Can you change Skrollr javascript positioning based on screen resolution (i.e. css media queries)?

[galvin]

Wasnt sure whether to put this in Javascript or CSS, sorry...

 

I'm using Skrollr at this dev URL (http://workwave.joomlatest01.mms-dev.com/)  to make all the desk items "slide away"  NOTE:  things are messy currently but you get the gist of what happens (i.e. the clutter moves away and the software on the monitor replaces it)

I'm using this "helper" function, found here (https://www.bram.us/2014/01/01/skrollr-css-animations-linked-to-scroll-position/)...
 

    var setSkrollr = function($el, data) {
    for (var i = 0, l = data.length; i < l; i++) { // loop all data entries (scroll positions + css property & value)
        var d = data[i], // the current data entry
            px = d[0]; // the scroll position (in pixels)
            css = d[1]; // the css property + value to set
        $el.attr('data-' + px, css);
    }
}

So the skrollr code for these moving desk items looks like this currently...
 

    jQuery(function($) {
    setSkrollr($('#t3-mainnav'), [[0, 'height: 100px'], [300, 'height: 50px']]);
    setSkrollr($('#t3-mainnav .container'), [[0, 'top: 25px; height: 100px'], [300, 'top: 0px; height: 50px ']]);

    setSkrollr($('#filecabinet'), [[0, 'top: -60px; left: 60%; display: block;'], [300, 'top: 280px; left: 200%; display: none']]);
    setSkrollr($('#calculator'), [[0, 'top:520px; left:0%'], [300, 'top:700px; left:-200%']]);
    setSkrollr($('#stapler'), [[0, 'top:440px; left:12%'], [300, 'top:700px; left:-200%']]);
    setSkrollr($('#pens'), [[0, 'top:280px; left:38%;'], [300, 'top:580px; left:-200%; ']]);
    setSkrollr($('#postits'),  [[0, 'top:470px; left:70%; display: block;'], [200, 'top:700px; left:200%; display: none;']]);
    setSkrollr($('#cup'),   [[700, 'top:640px'], [1800, 'top:-500px'] ]);
    setSkrollr($('#map'), [[0, 'top:530px; left:73%; display: block'], [200, 'top:700px; left:200%; display: none; ']]);
    setSkrollr($('#calendar'), [[0, 'top:500px; left:22%;display: block'], [300, 'top:740px; left:-200%; ']]);

    setSkrollr($('#monitor'), [[0, 'display:none'], [100, 'display:block; top: 100%'], [300, 'top:11%; position: fixed'],  [700, 'top:11%'], [1600, 'top:-100%'] ]);
   setSkrollr($('#headline'), [[700, 'top:90px'], [1800, 'top:-400px'] ]);
    setSkrollr($('#desk'), [[700, 'top:560px'], [1800, 'top:-500px'] ]);

    setSkrollr($('.toplink'), [[0, 'display:block'], [10, 'display:none']]);



    skrollr.init({
        smoothScrolling: false
    });

I can change the size of the images based on screen resolution using CSS Media Queries and "scale" to reduce the size of the images as the screen width decreases.

But right now things are POSITIONED using that skrollr helper function above and I can't change the positions based on screen resolutions. In other words, whatever position I specify in the helper function is the position always.  So I can say start the map 85% from the left and it will always be 85% from the left regardless of screen size.  So visually it starts in different spots, i.e. if things are positioned OK on a 1920 monitor, when you go down to a 1024 monitor, things are not ideally positioned.  

It would be a lot of work, but if I could adjust starting/ending positions in media queries, I could make things look perfect at pretty much every resolution.

Anyone know if this is possible?  I'm new to Skrollr so may just be missing something.

Or if anyone has other ideas on how to do this animation easier/more efficiently, please let me know.

Thanks!

[pr0c3ss]

You can simply change the position of elements within a width checking function...soemthing like

 

$(document).ready(function() {
function checkWidth() {
  var windowSize = $(window).width();

if (windowSize < 580){
...position changes here
}
else if (windowSize > 580 && <720){
...position changes here
}
}
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});