How to Use the Mouse Wheel Event in HTML5 Pages. Supporting the mouse wheel can add further interactivity to your HTML5 web pages.
Rather than scrolling the page, you could perform a different action such as zooming in or out. View the mouse wheel demonstration page… Most browsers support the “mousewheel” event for any element. You can register a handling function which is passed an event object. AnimateScroll - jQuery Plugin for Animating Scroll. Web Animations Playback Control in Chrome 39. Earlier this year, Chrome 36 landed the element.animate method as a part of the broader Web Animations spec.
This allows for efficient, native animations written imperatively - giving developers the choice to build their animations and transitions with the most suitable approach for them. For a quick refresher, here’s how you might animate a cloud across the screen, with a callback when done: This alone is incredibly easy and is well worth considering as part of your toolbox when building animations or transitions imperatively. However, in Chrome 39, playback control features have been added to the AnimationPlayer object returned by element.animate. Previously, once an animation was created, you could only call cancel() or listen to the finish event. These playback additions open up the possibilities of what Web Animations can do - turning animations into a general-purpose tool, rather than being prescriptive about transitions, i.e., ‘fixed’ or predefined animations.
Scrubbing the player. Text Selection Color. I have so many topics I want to cover, but very little time right now.
So here is a short one on how to change the color of your selection text (when you drag your cursor over text to copy, as you would on this website!) Normally this color is a blue, but it can be changed to match your design if you want. This is not a super important detail to any web design, but it adds a nice touch. Explanation The background-color property will change your selection color, if you use ::-moz-selection for firefox, or ::selection for other browsers. The idea for this came from the HTML5 Boilerplate website by Paul Irish, who chose to use a hot pink color for selecting. Browser Support This works in all the latest versions of every browser. Text Fade Out / Read More Link. Reader Rob Young sent in a cool effect seen on Newsweek.com: The text fades out at the bottom and has a "More...
" link. Text fade out is nothing new around here. I've had a demo up for that for ages, which uses a transparent PNG file placed overtop the text. But since this is a slightly different idea and the times-are-a-changin' and we can get a bit more progressive with this idea. Let's assume these small boxes of text are used in a sidebar, so our HTML markup will be a div with class of sidebar-box. <div class="sidebar-box"><p>malesuada fames ac turpis egestas. The box will be limited in height by the appropriate property max-height with it's overflow set to hidden.
Which gives us: The "Reveal" with jQuery The simplest way to make this work would be to remove the max-height CSS from the sidebar box on a click. View Demo Download Files Quick note about Transparency & Gradients And don't forget all the other gradient syntaxes. Thanks to @foodgoesinmouth, @sebnitu, @maddesigns and others... Inner Shadows in CSS: Images, Text and Beyond. Shadows in CSS are quick and easy, whether you’re slapping on a box-shadow or a text-shadow.
But how comfortable are you with inner shadows? Can you pull off an inset box-shadow? How do you do the same thing on some text? Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. How to Center Anything With CSS. Recently, we took a dive into the very core concepts behind CSS layout and explored the differences between absolute and relative positioning.
We’re going to follow that up with another CSS layout talk, this time based around a fundamental question that almost every new developer asks: how do you center something? There are a bunch of different types of web elements and layout situations, each calling for a unique solution for centering (both vertically and horizontally). Today we’ll go over a bunch of these scenarios so you can wrap your mind around how they work and come away with the confidence to center anything! Who’s This For? I’ve gotten a lot of commenter feedback lately from designers who struggle with the basic methods and concepts of layout in CSS. Having been there quite a few times myself, I know that this is an immensely frustrating period of your professional growth.
Horizontally Center an Element As you can see, by default, our div pops up in the top left of the viewport. An Introduction To Object Oriented CSS (OOCSS) Advertisement We explore how to craft flexible front-end design patterns and making future-proof and accessible interfaces without extra effort.
Hardcover, 312 pages. Get the book now → Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have.