Tags: scroll

36

sparkline

Monday, July 1st, 2019

8 DOM features you didn’t know existed - LogRocket Blog

If you ignore the slightly insulting and condescending clickbaity title, this is a handy run-down of eight browser features with good support:

  1. extra arguments in addEventListener(),
  2. scrollTo(),
  3. extra arguments in setTimeout() and setInterval(),
  4. the defaultChecked property for checkboxes,
  5. normalize() and wholeText for strings of text,
  6. insertAdjacentElement() and insertAdjacentText(),
  7. event.detail, and
  8. scrollHeight and scrollWidth.

Wednesday, June 19th, 2019

Using Hamburger Menus? Try Sausage Links · Bradley Taunt

Another take on the scrolling navigation pattern. However you feel about the implementation details, it’s got to better than the “teenage tidying” method of shoving everything behind a hamburger icon.

Saturday, April 6th, 2019

Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective · An A List Apart Article

This is a fascinating insight into what it’s like to use the web if you’ve got vertigo (which is way more common than you might think):

Really, there are no words to describe just how bad a simple parallax effect, scrolljacking, or even background-attachment: fixed would make me feel. I would rather jump on one of those 20-G centrifuges astronauts use than look at a website with parallax scrolling.

Every time I encountered it, I would put the bucket beside me to good use and be forced to lie in bed for hours as I felt the room spinning around me, and no meds could get me out of it. It was THAT bad.

Sunday, February 17th, 2019

Work and life of Stanley Kubrick

The scrollurbation is so excessive on this site that Reader Mode is pretty much a requirement. A shame, because the actual content buried underneath is pretty great.

Friday, January 18th, 2019

Creating distraction-free reading experiences — Adrian Zumbrunnen

It’s our job as designers to bring clarity back to the digital canvas by crafting reading experiences that put readers first.

Friday, November 2nd, 2018

The CSS Working Group At TPAC: What’s New In CSS? — Smashing Magazine

Rachel gives us the run-down on what’s coming soon to Cascading Style Sheets near you, including an aspect-ratio unit and a matches selector (as originally proposed by Lea).

Tuesday, June 26th, 2018

The Layouts of Tomorrow | Max Böck - Frontend Web Developer

A walkthrough of the process of creating a futuristic interface with CSS (grid and animation).

While this is just one interpretation of what’s possible, I’m sure there are countless other innovative ideas that could be realized using the tools we have today.

Friday, April 6th, 2018

Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers

Jeremy Wagner offers a deep dive into lazy loading images (and video) with some advice for considering the no-JavaScript situation too.

Wednesday, March 7th, 2018

Parallax scrolling with CSS variables | basicScroll

Don’t let the title fool you—this isn’t just for parallax scrolling (thank goodness!)—it’s for triggering any CSS updates based on scroll position. Using CSS custom properties makes a lot of sense. The JavaScript/CSS bridge enabled by custom properties is kind of their superpower. (That’s one of the reasons why I don’t like calling them “CSS variables” which makes them sound like Sass variables—they’re so much more than that!)

Thursday, March 1st, 2018

Your Interactive Makes Me Sick - Features - Source: An OpenNews project

Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick.

Guidelines to consider before adding swooshy parallax effects:

  1. Respect the Physics
  2. Remember that We Call Them “Readers”
  3. Ask for Consent

Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through?

Sunday, January 14th, 2018

russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.

This looks like a handy JavaScript library for scroll-based events. But “scrollytelling?” No. Just …no.

Thursday, September 21st, 2017

Understanding the WebView Viewport in iOS 11 - Ayogo Health Inc.

One more reason not to use sticky headers on mobile.

Tuesday, September 5th, 2017

thebaer/MMRA: Make Medium Readable Again — a browser extension

I’ve gotten a little tired of showing up to a Medium-powered site on a non-medium.com domain and getting badgered to Sign Up! or Get Updates! when I’m already a Medium user.

A Chrome extension to Make Medium Readable Again by:

  • Keeping the top navigation bar from sticking around
  • Hiding the bottom “Get Updates” bar completely
  • (Optionally) hiding the clap / share bar
  • (Optionally) loading all post images up front, instead of lazy loading as you scroll

Shame there isn’t a mobile version to get rid of the insulting install-our-app permabutton.

Sunday, July 2nd, 2017

Sticky headers

A three-part series by Remy looking at one interface pattern (a sticky header) and how his code evolved and changed:

  1. Sticky headers
  2. Smooth scroll & sticky navigation
  3. CSS sticky nav & smooth scroll

Friday, March 24th, 2017

Scrolling on the web: A primer - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

A ludicrously deep dive by Nolan into how scrolling works in web browsers. No, wait, come back! It’s more interesting than it sounds …and it certainly isn’t as simple as you might think.

For instance, do you know the difference between the following scenarios?

  • User scrolls with two fingers on a touch pad
  • User scrolls with one finger on a touch screen
  • User scrolls with a mouse wheel on a physical mouse
  • User clicks the sidebar and drags it up and down
  • User presses up, down, PageUp, PageDown, or spacebar keys on a keyboard

If you ask the average web user (or even the average web developer!) they might tell you that these interactions are all equivalent. The truth is far more interesting.

This comes complete with lovely animated illustrations by Rachel.

Wednesday, August 3rd, 2016

CSS only scroll indicator

This is witchcraft. I’ve been deconstructing the CSS to figure out how this works and it’s really clever.

(Hint: try commenting out some of the CSS and see what happens.)

Sunday, June 26th, 2016

Sticky headers

I made a little tweak to The Session today. The navigation bar across the top is “sticky” now—it doesn’t scroll with the rest of the content.

I made sure that the stickiness only kicks in if the screen is both wide and tall enough to warrant it. Vertical media queries are your friend!

But it’s not enough to just put some position: fixed CSS inside a media query. There are some knock-on effects that I needed to mitigate.

I use the space bar to paginate through long pages. It drives me nuts when sites with sticky headers don’t accommodate this. I made use of Tim Murtaugh’s sticky pagination fixer. It makes sure that page-jumping with the keyboard (using the space bar or page down) still works. I remember when I linked to this script two years ago, thinking “I bet this will come in handy one day.” Past me was right!

The other “gotcha!” with having a sticky header is making sure that in-page anchors still work. Nicolas Gallagher covers the options for this in a post called Jump links and viewport positioning. Here’s the CSS I ended up using:

:target:before {
    content: '';
    display: block;
    height: 3em;
    margin: -3em 0 0;
}

I also needed to check any of my existing JavaScript to see if I was using scrollTo anywhere, and adjust the calculations to account for the newly-sticky header.

Anyway, just a few things to consider if you’re going to make a navigational element “sticky”:

  1. Use min-height in your media query,
  2. Take care of keyboard-initiated page scrolling,
  3. Adjust the positioning of in-page links.

Friday, April 8th, 2016

Scroll Magazine, Edition 1

I wrote the foreword to this inaugural edition of Scroll Magazine which was published for the Respond conference down under. You can get your digital edition here, featuring interviews with Karen, Ethan, and Sara.

Foreword to Scroll Magazine: Respond Edition

First published in the April 2016 issue of Scroll Magazine.

I remember.

I remember when I was trying to make my first website. I was living in Germany and playing in a band. We decided the band should have its own little corner of the World Wide Web. I said I’d give it a go.

I remember finding everything I needed. It was all on the web. Designers, developers, webmasters …whatever you want to call them, they were selflessly sharing everything that they had learned. I lapped it up. I learned the lovely little language of HTML. I learned about using tables for layout and using 1 pixel by 1 pixel blank .gifs for fine-grained control. I even learned some Perl just so that people could fill in a form to contact us. Before long, our band had its own website.

I remember showing the web to the singer in my band. I showed him fan sites dedicated to his favourite musicians, sites filled with discographies and lyrics. I remember how impressed he was, but I also remember him asking “Why? Why are these people sharing all of this?”

I suppose it was a good question but it was one I had never stopped to ask. I had just accepted the open flow of ideas and information as being part and parcel of the World Wide Web. When I decided to make a personal website for myself, I knew that it would be a place for sharing. I use my website to share things that I’ve learned myself, but I also use it to point to wonderful things that other people are sharing. It feels like the hyperlink was invented for just that purpose.

One section of my site is simply called “links”. I add to it every day. The web is a constant source of bounty. There seems to be no end to the people who want to share what they’ve learned. “Here”, they say, “I made something. You can use it if you like.” I try to remember just how remarkable that is.

This spirit of generosity has even spilled over into the world beyond the web. I remember when Web Essentials was the first conference outside the US dedicated to sharing the knowledge and skills of the web’s practitioners. Later it became Web Directions. It served as a template and an inspiration for people all over the world.

It’s hard to imagine now in this age of wall-to-wall conferences, but there was a time when the idea of a web conference was untested. Without the pioneering—and risky—work of the Web Directions crew, who knows where we would be today?

A good event reflects the best qualities of the web itself. Designers, developers, UXers …whatever you want to call them, they conquer their fears to get up in front of their peers and share what they’ve learned. “Here”, they say, “you can use this if you like.” I remember how intimidating that can be.

I remember how honoured I was to be asked to speak at Web Directions in 2006. A decade can feel like a century on the web, but my memories of that event are still fresh in my mind. Not only was it my first trip to the Southern hemisphere, it was the furthest from home I had ever travelled in my life. I remember how warmly I was welcomed. I remember the wonderful spirit of sharing that infused my time in Australia. It reminded me of the web.

And now that same spirit of the web is spilling over into these pages. Designers, developers, baristas …whatever you want to call them, they’ve written down words for you. “Here”, they say, “you can read this if you like.”

I try to remember—but sometimes I forget—to say “thank you.”

I try to remember to say “thank you” to those early pioneers on the web who shared their experience with me: Steve Champeon, Jeffrey Zeldman, Molly Holzschlag, Jeff Veen, Eric Meyer, and of course, John Allsopp. I try to remember to say “thank you” to anyone who has ever put on an event—it’s hard work (just ask John). I try to remember to say “thank you” to the people who are making the web a better place for all of us through their incredible work: Ethan Marcotte, Sara Soueidan, Karen McGrane, and so many more.

And when I’m filling up the “links” section of my website on a daily basis, I try to remember to say “thank you” to everyone who has ever shared anything on the web.

I never did come up with an answer to that question my bandmate asked. “Why? Why are these people sharing all of this?” After all these years, I don’t think the answer matters. What matters is that I don’t forget how remarkable this spirit of the web is.

I remember.

Scroll Magazine

Monday, March 7th, 2016

Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce – Smashing Magazine

A good side-by-side comparison of loading techniques, with some clear advice. But pay attention to this note:

While the debate over “Load more” versus infinite scrolling versus pagination has been debated for years, the product loading method shouldn’t be the first thing that most e-commerce vendors spend their development resources on.