Ivan Bogachev

Full screen sliders with various background animations based on the standard geometries are very popular nowadays. Recently I found a question about them on Habr Q&A and I thought “why not create it?”. And I created an example of such animations with anime.js. It’s easy, but the effect looks pretty nice and contemporary.

The Pen by Ivan Bogachev (@sfi0zy).

How to obtain the mouse within a shader using Three.js? How to load multiple textures with promises? How to calculate ratios of everything to create full screen backgrounds with non-distorted parts? How to create amazing transitions between images in WebGL? Check out my new demos on CodePen to find the answers!

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

This time I shared a pen with an example of usage of the noise generator. This pen includes a sea of particles with the random waves on it. The usage of such generators is a very important technique for the creative frontend developers, so, despite the fact that it’s only one pen here, I think this part of shaders collection is as important as the other parts.

The Pen by Ivan Bogachev (@sfi0zy).

The show goes on! Three more examples are on CodePen now. These pens are the examples of usage of the shader material with the point cloud. Also, you can find a nice trick in them - I used third dimension to create 2D animations. It’s much easier than puzzle out all the math to calculate such animations in two-dimensional space.

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

I continue posting beautiful shader examples to CodePen. I started with colorful ones and now the time has come for the monochrome ones. They look very futuristic, and I associate them with Sci-Fi movies.

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

I played with vertex shaders recently and in addition to my main task I got a number of beautiful effects for the default geometries in Three.js. I don’t know where I can use them in production and I made a decision to share them to CodePen.

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

This time I created an example of the responsive infographics with hexagons. Probably you’ve already seen the similar design concepts. This one doesn’t work in IE/Edge because I used clip-path with polygon to create the hexagonal elements, but if you need to support these browsers, you can simply replace the clip-path solution with SVG images.

The Pen by Ivan Bogachev (@sfi0zy).

A couple of days ago I found an interesting question on Habr Q&A. A man asked how to create a design concept with HTML and CSS. It’s a common question for this website and the concept looked simple, but nobody knew how to create it. The thing is the sides of the triangles in the concept must be parallel on all screen sizes, not only on fullhd. I accepted the challenge and created a prototype for the modern browsers. It looks like we can’t create such design using CSS only, even for evergreen browsers, so I used some JS to calculate the widths of the triangles based on the heights of the cards. But maybe someone will invent a new CSS trick for this type of calculations.

The Pen by Ivan Bogachev (@sfi0zy).

Today I would like to present my new article about the Golden Canon grid. It’s not about the golden ratio, not about the history of the book printing, but about websites. The modern CSS gives us a possibility to work with such grids without pain. CSS grid layout is a very powerful tool in this case. I explained how to use it when building promotional websites.

I answer questions on Habr Q&A and every week I see the questions about the interactive maps there. A lot of beginners don’t understand how to create them. So I wrote a tutorial for them. I used SVG, leader-line and hammer.js to create an interactive plan with some hover effects, arrows and popups. I hope it’ll be helpful.

The Pen by Ivan Bogachev (@sfi0zy).