Gazley Posted May 23, 2015 Share Posted May 23, 2015 Hi there, First, sorry, this isn't a PW question but something I'd love to do in PW if I could figure out how! Looking at this following page: http://www.vogue.co.uk/news/2015/05/22/nicholas-hoult-laura-bailey-interview-june-issue-2015-british-vogue Sizing the browser at min 1200px wide, if you scroll the page, there is a fantastic effect where the main content to the right scrolls and the image in the narrower left columns stays fixed until the copy underneath it, nudges the image out of fixed position and the copy itself assumes fixed position. That is until the next image in the left column comes into view where it assumes the fixed position and the copy moves up. This effect toggles between the image and the copy until the end of the scroll. Is this done using javascript? The effect is really awesome and I'd love to know how to do this! Cheers! Link to comment Share on other sites More sharing options...
tpr Posted May 23, 2015 Share Posted May 23, 2015 Yes, it is JavaScript. If an element is in the viewport, another element is set to fixed position until the element goes offscreen. In UIkit it is called the "sticky" component (the linked site does not use this one): http://getuikit.com/docs/sticky.html 1 Link to comment Share on other sites More sharing options...
Gazley Posted May 23, 2015 Author Share Posted May 23, 2015 Hi @tpr - thanks for pointing out the Uikit capability. I use the fixed/sticky option in Foundation but it isn't nearly as good as what you have pointed out in Uikit. The example at http://getuikit.com/docs/sticky.html#sticky-boundary is not unlike the effect from the Vogue article but I'll have to study that a little more. In the Vogue page, all of the markup seems to be more or less stacked with the left-side elements absolutely positioned. If you collapse the width of the page, all the items just stack. I don't know whether the same effect is achievable with Uikit's sticky. Very impressed with what I have just seen in Uikit -- maybe time to change. Thanks again Link to comment Share on other sites More sharing options...
tpr Posted May 23, 2015 Share Posted May 23, 2015 Check the "Responsive behaviour" section above sticky bounder. You can add media queries like so to limit the effect: <div data-uk-sticky="{boundary: true, top: 20, media: '(min-width: 960px)'}"> Link to comment Share on other sites More sharing options...
mr-fan Posted May 24, 2015 Share Posted May 24, 2015 Is this done using javascript? The effect is really awesome and I'd love to know how to do this! the whole site breaks if js is off...for my personal minds it is always not right if js is off that the whole site is not usable...there should always be a fallback...especially on a big player's site.. e.g. without js works: http://www.nytimes.com/ http://www.bild.de/ but it seems on the "fashion side of life" there is nothing to see without js: http://www.cosmopolitan.com/ (menu works no pictures) http://www.elle.com/ (the same not usable) only http://www.vogue.de/ seems to look good without JS on... just my 2 cents...JS is nice for fancy things, applications, tracking, shops and ajax stuff....but a website should always tell a story even JS is off. regards mr-fan 2 Link to comment Share on other sites More sharing options...
horst Posted May 24, 2015 Share Posted May 24, 2015 OT: @mr-fan, thanks for the "reminder"! Forgot to implement this myself. (I need to add some noscript - background url images!) 2 Link to comment Share on other sites More sharing options...
tpr Posted May 24, 2015 Share Posted May 24, 2015 the whole site breaks if js is off... Which site you are talking about? The one in the first post seems OK in this regard. Link to comment Share on other sites More sharing options...
diogo Posted May 24, 2015 Share Posted May 24, 2015 @mr-fan one point less for linking to bild 3 Link to comment Share on other sites More sharing options...
mr-fan Posted May 24, 2015 Share Posted May 24, 2015 Which site you are talking about? The one in the first post seems OK in this regard. http://www.vogue.co.uk/news/2015/05/22/nicholas-hoult-laura-bailey-interview-june-issue-2015-british-vogue without JS the sidemenu doesn't work you could go nowhere...the newsticker shows some loading...but nothing else @mr-fan one point less for linking to bild you've got me for my i've to link to the great bildblog.de that take some serious facts on german yellow press... (great video but just in german is there for all others how watch - the counter on the top is for every lie of this couple - last headline is like "Every lie needs one brave to tell"....) @horst: i break my own good practice rules if time is running out very often, too... Link to comment Share on other sites More sharing options...
qtguru Posted May 24, 2015 Share Posted May 24, 2015 At this day and time, i don't expect anyone to turn off JavaScript, and if they do it's obvious they are not interested in browsing alot of sites esp Angular and SPAs Link to comment Share on other sites More sharing options...
LostKobrakai Posted May 25, 2015 Share Posted May 25, 2015 The problem aren't people who actively turn off their javascript, but rather all the cases where it's execution breaks. Just be on a train with bad network, then you're happy if a page is "accessable" without js. No need to fully support all fancyness, but make the html base usable without js. 2 Link to comment Share on other sites More sharing options...
Recommended Posts