Javascript Content Controlling

Image Zooming Without JS

The CSS "transform: scale()" function feels little bit like Javascript, because it has its benefits of showing an image clearly:

This is a simply way to make your content friendly for visitors on your site, since some people are indeed older and eye health can vary alot here.

Image Previewing

This function is similar to the last code, but more effective - Make the image large with 1 click:

You can make something else preview the image, like a custom button. This technique is widely used in store websites and other media, where detail is essential.

Lazy Media Loading

Thanks to the 'loading="lazy"' attribute, you can make all of your media load lazily, making the website faster with no doubt:

This system uses Intersection Observer to detect images when you are only near them, then it starts loading the images. It makes the lazy loading technique even faster, because you are controlling when to load the images.

Tuning Video Player

When using the "video" element, you can fully customize it's appearance with the mix of CSS and JavaScript:

Note that the "video" tag is always costumizable, but the "iFrame" element is not, because its only meant to embed media from media sites like Youtube, Vimeo, Facebook, Dailymotion, Twitch, Instagram, Twitter etc.

Animation Customization

When making an animation for your site/game, then its usually pretty tuneable. Canvas is a popular example for both browser games and animations:

This is the classic DVD animation, where people would freak out when the plate hits a corner.