Jump to content

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


Recommended Posts

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']]);

        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.


Link to comment
Share on other sites

  • 2 weeks later...

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
    // Bind event listener
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.