Scrolling is among the most boring necessities of digital design. Or is it? It’s easy for both designers and users to ignore. Yet, we spend much of our days moving up, down, and all around. There’s something to be said for going the extra mile.

Thankfully, there is an opportunity to do more. Scroll effects can add an element of fun to the mix. They’re also great for adding context and drawing attention to important content. Some effects even create a sense of immersion.

Web developers have found all manner of creative use cases. We scoured the CodePen archives to find eight prime examples of how CSS and JavaScript level up the user experience. We were quite impressed with the results.

Below, you’ll find everything from basic elements to jaw-dropping visual presentations. You’re sure to find inspiration for your next project. Let’s get started!

Premium ScrollTrigger Panels

Created by Ashish Ranjan

Here’s a unique way to scroll through the sections of a webpage. This pen creates a “stacking” effect, where each new section is layered on top of the last. The previous section zooms and fades out, allowing you to read the current content distraction-free.

Impressively, scrolling up reverses the effect. The technique uses GSAP scroll trigger and makes a long page seem shorter.

See the Pen PinStack Showcase – Premium ScrollTrigger Panels by Ashish Ranjan

Scrolling Text & Rotating 3D Gallery

Created by Luis Alberto Martinez Riancho

This 3-D gallery turns the classic carousel on its head. It combines scrolling text with a rotating cube that syncs in perfect harmony. Notice the shading and textures used to create a photorealistic feel.

The button-based navigation lets you avoid scrolling altogether, if that’s your thing.

See the Pen Six Faces / Walking The Cow by Luis Alberto Martinez Riancho

Stars Scroll Effect

Created by Aleksa Rakocevic

Scroll effects don’t have to be bold. There are times when subtlety is called for and appreciated by visitors. This starry background features a parallax motif with a hint of sparkles.

The result is a fun, yet classy, trip down the page. Consider it for blogs or other long-form content.

See the Pen Stars scroll effect by Aleksa Rakocevic

Smooth Scroll Behavior

Created by Margarita

Staying with the subtle aesthetic, the on-scroll effects of this pen are a great way to dress up an article. Text gently appears as you make your way down the page.

HTML scroll-behavior is used to ensure a smooth ride and add some flair to static content. This one is appropriate for virtually everyone.

See the Pen It Was Never A Competition — Full Story by Margarita

Infinite Loop Spiral

Created by Toc

Are you looking for a completely twisted take on a photo gallery? This spiral masterpiece will certainly grab attention. Scroll down, and this 3-D ribbon-shaped gallery spins through each image.

Use your mouse or finger to change perspectives. The effect is silky-smooth and will enhance your portfolio projects.

See the Pen Infinite loop spiral by Toc

CSS Scroll-Timeline Word Highlight

Created by Daniel Haim

Here’s a way to list your services and/or accomplishments with style. The text on the left stays put as you scroll, while the right side jumps to the next word or phrase.

It uses the scroll-snap-align and scroll-snap-type CSS properties to keep the presentation tidy. JavaScript sets properties based on user action. The result is an attractive method for making an impact with typography.

See the Pen CSS Scroll-Timeline Word Highlight by Daniel Haim

Springy Section Edges

Created by Tom Miller

Scrolling from one page section to another doesn’t have to be boring. A small effect, like this “springy” animation, adds context and entertainment value to the process. Reach the bottom of a section, and you’re welcomed with a bounce.

Here’s an idea: maybe add some confetti when you reach the end of the page. After all, loyal visitors should be celebrated!

See the Pen Springy Section Edges by Tom Miller

Reverse Scrolling Columns

Created by Ryan Yu

This photo gallery’s multi-column scrolling is reminiscent of a slot machine. The columns are synced, but the middle section moves in the reverse direction. It’s fun and immersive without overwhelming users.

Once again, GSAP scroll trigger serves as the secret sauce to the effect.

See the Pen Reverse scrolling columns by Ryan Yu

Use Scroll Effects To Enhance User Experience

Scrolling doesn’t have to be an afterthought in your design projects. The examples above demonstrate what’s possible with a little code and imagination.

In some cases, these effects can be the star of the show. Consider the photo galleries in our roundup. They become more interesting and interactive when you go beyond the default grid layout. You get high-end form and functionality.

On the other hand, subtlety also has a place when adding scroll effects to more traditional pages. A hint of elegance can transform static content into something more memorable.

The decision is yours to make. Consider your audience and accessibility needs, then choose the effect that makes the most sense.

Want to see even more awesome scroll effects? Check out our CodePen collection!

More CSS Effects Snippets

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post 8 CSS & JavaScript Snippets for Adding Scroll Effects to Your Website appeared first on The NOKIA Blog.

Every season has a distinct vibe. People celebrate them by wearing seasonal colors and delighting in traditional flavors. Autumn appears to have taken over as a favorite time of year for many. Pumpkin spice, anyone?

Yes, the fall season is being celebrated like never before – and for good reason. It’s when we embrace cooler weather, colorful leaves, and ugly sweaters. We’re also preparing for the upcoming holidays.

Naturally, web developers want to get in on the fun. They’re creating homages to the season that also show off their skills. They combine the latest in CSS and JavaScript with fun snapshots of fall life.

It all convinced us to collect some of the best autumn-inspired effects for your enjoyment. Their creativity will keep you cozier than a blanket and a warm cup of cider.

Virtual Autumn Corn Maze

Created by Kit Jenson

Nothing screams “autumn” like getting lost in a corn maze. This virtual maze challenges you to guide your pumpkin to safety. The game has a fun retro look and is powered by JavaScript. It’s also a more comfortable experience for those of us who are claustrophobic.

See the Pen Autumn Corn Maze by Kit Jenson (@kitjenson)
on CodePen.

Autumn Leaf Fall Preloader

Created by Nicolas

This snippet is proof that loading graphics don’t have to be boring. You can add seasonal flavor like this leaf animation. Watch as CSS animation spirals leaves into a virtual black hole.

See the Pen autumn leaf fall preloader by Nicola

Hexagonal Autumn Leaves Animation

Created by Philip Warkentien II

How about something a bit more abstract? This mesmerizing presentation uses SVG hexagon shapes to represent leaves. The fall color scheme is beautiful. And it’s hard to take your eyes off the sparkly animation.

See the Pen Autumn Leaves by Philip Warkentien II

Animated Glowing Spooky Spectral Ghost

Created by Filip Zrnzevic

We can’t forget about Halloween! The spooky season is well-represented by this glowing ghost presentation. Move your cursor and watch as the spirit follows you. WebGL and Three.js are the forces behind the animation – not magic.

See the Pen [webgl/threejs] ❍ Spooky Spectral Ghost by Filip Zrnzevic

Autumnal Sweater Weather

Created by McCambley

The chilly weather is a perfect excuse to dig out those old sweaters. You know, the ones with the wild patterns and scratchy fabric. Or, you might enjoy this garment built with CSS. The light-up diamonds are a nice touch.

See the Pen Sweater Weather by McCambley

Single Div CSS Pumpkin Spice Latte

Created by Greg Robleto

Pumpkin spice has become a phenomenon. Coffee shops pump out lattes before the first leaf hits the ground – and people can’t get enough. The flavor of the season is recreated here with a single DIV element. CSS gradients are used to create the various shading effects.

See the Pen Pumpkin Spice Latte – Single Div CSS Art (Divtober 2023 :Day 1 :Fall) by Greg Robleto

Falling Autumn Leaves Shader

Created by CeramicSoda

Raking leaves is perhaps the least popular autumn ritual. Watching them fall, on the other hand, is great fun. Here, you can shake a virtual tree and make the yellow-and-orange foliage fly. The best part? No cleanup!

See the Pen Falling autumn leaves shader by CeramicSoda

Snickers Bar Pure CSS

Created by Zerde Turdybek

Technically, you can eat a Snickers bar any time of the year. But there’s something special about receiving one when trick-or-treating. You can almost smell the chocolate and peanuts emanating from this CSS-rendered candy bar.

See the Pen Snickers by Zerde Turdybek

The Colors, Flavors, and Code of Fall

Web developers are always looking for a reason to build something fun. The colors and flavors of fall offer plenty of inspiration. The snippets above allow us to explore the season and sharpen our skills.

We hope you enjoyed this fresh harvest of autumn-themed code in all its glory! Please check out our CodePen collection for even more examples.

here. He recently started a writing service for WordPress products: WP Product Writeup. He also has an opinion on just about every subject. You can follow his rants on Bluesky @karks.com.

Read more articles by Eric Karkovack

The post 8 Autumn-Inspired CSS & JavaScript Effects appeared first on The NOKIA Blog.

Their style has also crept into web design. We see it in bold colors, outrageous typography, and unique layouts.

Advancements in both CSS and JavaScript allow designers to bring these styles to life. There is no shortage of ways to add comic-inspired flair to your website.

So, how are web designers bringing comic styles online? Let’s check out a few examples of what a combination of code and creativity can do.

Comic Style Text Bubbles – CSS

Created by Josetxu

This snippet demonstrates a classic comic book style. Large, bold text screams on top of colorful backgrounds. CSS Grid is used to line up the various layout pieces. Bonus: click on a word to edit the text. Wow! That was cool.

See the Pen Comic Style Text Bubbles – CSS by Josetxu

Side Scroller Comic Web Template

Created by Terry Scrimsher

Here’s an example that adds movement to the mix. The side-scrolling hero area makes for an attention-grabbing experience. The animated text provides contrast and an element of fun.

See the Pen Side Scroller Web Template by Terry Scrimsher

Comic Book Style CSS UI

Created by Gabriele Corti

This experiment ponders a comic book UI. It’s a small starting point inspired by Spider-Man. However, imagine expanding it to cover every element of a website. That’s a way to stand out from the mere mortals.

See the Pen Comic Book UI by Gabriele Corti

Style Stage Comic Book CSS

Created by Katherine Kato

Let’s go a step further with a comic-inspired UI. This page manages to balance bold styling and legibility. The layout is fun but remains super clean. It shows that “comic” doesn’t have to mean inaccessible.

See the Pen Style Stage – Comic by Katherine Kato

Pure CSS Comic Coder Cat

Created by Annie Bombanie

This humorous bit pokes fun at developers. It also shows some impressive use of CSS. The black-and-white comic takes advantage of clip paths, gradients, and flexbox. The strip is also responsive.

See the Pen Comic Coder Cat – Pure CSS by Annie

Generate Comic-Style Typography

Created by Antoinette Janus

Use this snippet to generate comic-style text. Click into the box and then start typing. You’ll get a classic comic book font on top of a halftone background.

See the Pen Comic Types by Antoinette Janus

Responsive & Accessible Comic Page

Created by Sarah Frisk

It can be a challenge to make an accessible comic strip. The fonts aren’t always legible. And what if you’re using images? This snippet aims to fix these issues. It offers a “CC” mode that provides text descriptions of each panel. The result is an improved user experience.

See the Pen Responsive and Accessible Comic Page by Sarah Frisk

Comic Style Crystal Field

Created by Tibix

It’s easy to admire the groundbreaking illustrations in our favorite comics. This example combines beautiful artwork with the power of code. Click on the presentation to regenerate a new version of this crystal field.

See the Pen Comic Style Crystal Field by Tibix

Adding Some Pop to the Web

Not every website requires a staid corporate look. Comic styles offer an alternative for these sites. You can use this technique to create a fun and memorable UX.

What’s more, you don’t have to go over the top to find success. Even subtle elements of comic design can make a positive impact. Look no further than some of the examples above for proof.

Want to see even more examples of comic styles? Use your superpowers and head on over to our CodePen collection!

Top

The post 8 Comic-Inspired Snippets Powered by CSS & JavaScript appeared first on The NOKIA Blog.

Hyperlinks don’t always get the attention they deserve from web designers. Sure, we might make a few tweaks. However, we don’t always go the extra mile to make them stand out.

Perhaps that’s because the styling options used to be limited. Link color and underlining were the primary options. Hover and focus states seemed to be where most of the creativity occurred. Other enhancements tended to require add-ons like JavaScript.

CSS has changed the game in recent years. Several properties are available to customize the look of hyperlinks. They also provide a higher level of control regarding details like spacing and sizing.

It’s a whole new world of possibilities. Let’s check out some CSS properties that help make hyperlinks more attractive.

A Default Link

We’ll start with a default link configuration. A link color and CSS states were added – but that’s it. It will serve as a baseline as we explore the CSS properties below.

See the Pen Link Styling:Plain by Eric Karkovack

It used to be that a link’s underline had to be the same color as its text. The text-decoration-color property allows us to choose a separate hue. It also works with overlines, strikethroughs, and anything else set by the text-decoration property.

We’ve added a brown underline to compliment our green link text.

See the Pen Link Styling:text-decoration-color by Eric Karkovack

This niche property determines how the link’s text decoration interacts with glyphs. The default setting is auto, where the browser interrupts underlines and overlines so they don’t touch a glyph. You’ll notice this with lowercase letters that go below the baseline.

Setting the property to none means the underline or overline draws a straight line – regardless of where glyphs are located.

See the Pen Link Styling:text-decoration-skip-link by Eric Karkovack

The thickness of a link’s underline typically follows what’s defined in the font-weight property. That is, bold text will result in a thicker underline. This property lets us set a consistent value for every link in the cascade.

See the Pen Link Styling:text-decoration-thickness by Eric Karkovack

Text decorations don’t have to be a straight line. This property lets you change the style to dashed, dotted, double, or wavy lines.

See the Pen Link Styling:text-decoration-style by Eric Karkovack

Here’s a way to specify how closely (or not) an underline is to the text above. Adding a few pixels of space between them can improve legibility.

Note that this property doesn’t impact instances of the HTML underline tag (<u>). It only affects instances where the text-decoration property is set.

See the Pen Link Styling:text-underline-offset by Eric Karkovack

Another niche property, text-underline-position specifies the position of the underline relative to its text. Setting it to under is ideal for mathematical and scientific formulas. It makes subscript characters easy to read – even when underlined.

See the Pen Link Styling:text-underline-under by Eric Karkovack

Going Further with Link Styles

Hyperlinks don’t have to be bland. There are now plenty of ways to make them as much a part of your brand as other design elements.

The properties above are all worth considering when styling links. They’re relatively simple to implement and can make links more attractive and accessible. Best of all, they’re native CSS and won’t impact page load performance.

You can also use them beyond default styles. Style them for various states, such as changing the link’s underline color during a hover event. In addition, there’s an opportunity to add animation and transitions to create all sorts of fun micro-interactions.

Just beware – it’s possible to take things a little too far. Always keep best practices in mind to enhance the user experience. Anything that makes links harder to read or use isn’t worth doing.

It’s time to get creative! Experiment with these CSS properties and see how you can bring a little life to your links.

Top

The post CSS Properties to Make Hyperlinks More Attractive appeared first on The NOKIA Blog.