未加星标

Amazing Texture & Pattern Effects with CSS & JavaScript

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

Textures and patterns have long been a part of web design. Whether used as a subtle background or as a focal point of our content, they help to set the tone for our creations.

But thanks to ever-evolving web technologies, we can usetextures andpatterns to even greater effect. They no longer have to be confined to static display. Now, they can be combined with motion and shading techniques to produce some mind-blowing graphical features.

We have put together a collection of some highly-creative code snippets that use classic assets in new and exciting ways. Enjoy, and be sure not to operate any heavy machinery for a few minutes after viewing! Your eyes may play some tricks on you.

Big Torus, Little Code

The mathematical concept of a torus is a fascinating ring-shaped revolution. This example is simply stunning. It demonstrates the concept better than anyone could possibly explain it. What’s more, it uses a mere 33 lines of javascript to create. You may have the urge to stare at this one for a few hours.

Is That a Petri Dish?

Beyond the beautiful detail of this “circle packing” animation, there could be very useful real-world adaptations. This could be used, say, to demonstrate how bacteria grows or to re-create a pointillistic painting. Regardless, it’s quite mesmerizing to watch.

Night Glow

Textures still make for greatbackgrounds. And this night sky full of glowing (and occasional shooting) stars shows that special effects don’t have to be overbearing. You can create something that has movement while maintaining usability.

Dynamic Disco Ball

This one is quite interesting. It uses reflection mapping withThree.js to create a disco-ball like surface that changes as you move your cursor. Moving up and down results in a change to the smoothing, while sideways movement increases the “bumpiness” of the texture.

Feed the Tree

Here we have an animated tree that is reminiscent of a hand-drawn flipbook. The tree sprouts up and forms leaves as a scribbly background moves furiously about. Even better is that it uses just html5 Canvas and JavaScript no images necessary.

That’s a Lot of Dots

At first, this example could be mistaken for footage of a cosmic event. In reality, it’s a script that uses WebGL2 to create transform feedback particles. There are 500,000 color-shifting particles here that react to your cursor movement. If this is indeed happening in space, we’d better take cover.

Back to Math

Let us not even try to explain the concept of a Logarithm . Just know that, in animated form, it is quite compelling to watch. A colorful, shape-shifting texture gives off an incrediblyretro vibe. As a bonus, clicking on the animation will create a new effect.

Hello, Sunshine

If this doesn’t bring a smile to your face, you might do better studying the mystery math above. With spinning shapes layered on top of an ever-changing background, there is a lot going on here. While probably not a great fit for a page background, it certainly would bring focus to a banner or hero area.

A Pattern of Change

The examples above have taken something basic (a shape, a pattern, etc.) and transformed it into something else completely. These snippets are colorful, interactive and compelling.

It just goes to show what the right mix of coding knowledge and creativity can achieve.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Amazing Texture & Pattern Effects with CSS & JavaScript
本站链接:https://www.codesec.net/view/610931.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(76)