Categories
Article scrolling

Doom Damage Flash on Scroll

The video game Doom famously would flash the screen red when you were hit. Chris Johnson not only took that idea, but incorporated a bunch of the UI from Doom into this tounge-in-cheek JavaScript library called Doom Scroller. Get it? Like, doom scrolling, but like, Doom scrolling. It’s funny, trust me. I extracted bits from Chris’ cool project to focus on the damage animation itself. The red flash is done in HTML and CSS. First, we create a full screen overlay: #doom-damage { background-color: red; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } Note that it’s not display: none. It’s much harder to animate that as we have to wait until the animation is completed to apply it. That’s because display isn’t animatable. It’s doable, just annoying. To flash it, we’ll apply a class that does it, but only temporarily. const damage = document.getElementById(“doom-damage”); function doomTakeDamage() { damage.classList.add(“do-damage”); setTimeout(function () { damage.classList.remove(“do-damage”); }, 400); } When that class activates, we’ll immediately turn the screen red (really giving it that shock appeal) and then fade the red away: .do-damage { background-color: red; animation: 0.4s doom-damage forwards; } @keyframes doom-damage { 0% { opacity: 1; } 100% { opacity: 0; } } The next bit calls the function that does the damage flash. Essentially it tracks the current scroll position, and if it’s past the nextDamagePosition, it will red flash and reset the next nextDamagePostition one full screen height length away. If you want to see all that, I’ve abstracted it into this Pen: CodePen Embed Fallback The post Doom Damage Flash on Scroll appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Doom Damage Flash on Scroll

Read at the original Source: css tricks.

Categories
Article scrollbars scrolling ux

That’s Just How I Scroll

How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that’s a pretty good indication. You might still have to scrapple with your client about “the fold” or whatever, but I don’t think anyone is confused at what a scrollbar is or what it indicates. But let’s say there is no scrollbar. That’s super common. macOS hides scrollbars by default and only shows them during scroll. Most mobile browsers don’t have scrollbars, even if you attempt to force them with something like overflow: scroll;. Why does this matter? If you don’t know an area is scrollable, you might miss out on important content or functionality. I regularly think about the Perfectly Cropped story from Tyler Hall. There is a screen on iOS that has important functionality you need to scroll down to, but there is no indicator whatsoever that you can scroll there. The result of that was Tyler’s mom literally not being able to find functionality she was used to. Not great. There is an elaborate way to detect visible scrollbars and force them to be visible, but something about that rubs me the wrong way. It doesn’t honor a user’s preference (assuming it is the user’s preference), requires DOM manipulation tests, and uses vendor-prefixed CSS (which will probably live a long time, but has been standardized now, so maybe not forever). I enjoy these approaches and by Chris Smith and his thinking: CodePen Embed Fallback My favorite are the shadow-based techniques. To me an inset shadow is a really clear indicator, as it makes it appear that content is flowing underneath and the shadow follows an edge that as a hint that you can scroll in that direction. Plus, you’ve got CSS control there so I’d think it could match whatever UI situation you’re in fairly easily. It should be known though that it can be done entirely in CSS though, no JavaScript, and is one of the great CSS tricks. The post That’s Just How I Scroll appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest That’s Just How I Scroll

Read at the original Source: css tricks.

Categories
animation background-image layout Playground scrolling smooth scrolling

Smooth Scrolling Image Effects



Smooth Scrolling Image Effects

Check out some more great posts over at: codrops

Categories
animation effect Playground scrolling typography

Scrolling Letters Animation



Scrolling Letters Animation

Check out some more great posts over at: codrops

Categories
Link scrolling

Scrolling on the Web: A Primer



Scrolling on the Web: A Primer

Check out some more great posts over at: css tricks