Jump to content

7studio (own studio micro site)


7Studio
 Share

Recommended Posts

Hi everyone, I would like to showcase a small micro site of own studio - 7studio.eu

home-screen.thumb.jpg.7776d08a24c3800ead1b7122667c3aff.jpg

Personally I don't like to design anything for myself (as most projects lands in the trash or on the shelf), but I needed something new and simple quite fast before building a fully fledged portfolio, so I thought to built a small "starting point".

This is more like a work in progress, than a finished site, it contains only basic info, screenshots of some of the latest works and that's it - as for now ๐Ÿ˜‰

Technically, on the front end we have a simple custom HTML5/CSS3/JS code, on the back end site uses only core PW features (there is more features already built in on both backend and frontend but not published yet).

Any comments, suggestions are welcome, hope you will like it and have a great weekend everyone!

P.s. Sorry - there is no english translation yet, PW multilingual features will land in the upcomming weeks ๐Ÿ˜‰

ย 

  • Like 16
Link to comment
Share on other sites

Rally nice work! The design is clean and futuristic and I love the text animations for the headlines or inside the menu.

Kudos that this is all custom coded! Did you use some plugins for the animations or how did you approach it? Just asking because I was switching between aos.js and GSAP lately.

  • Like 1
Link to comment
Share on other sites

@Stefanowitsch thanks a lot!

Regarding to your question about animations - there is no extra animation engine involved in here - these are basic CSS3 transitions and animations triggered by JS via the class change (on the elements or on the parents) + there are few 'ontransitionend' JS listners to control animation state or for example to move focus to correct place after animation end.

This apporach has it's pross and cons - animations/transitions triggered via class change could cause unnecessary browser rendering repaints and affect performance, but if done right are great as you can control almost everything straight from the CSS - timings, easing etc.

I was trying to optimize all of this quite a bit to not affect performance - animating mostly CSS transforms - translateXYZ(not top/right properties or others that cause repaints), using animations not transitions where possible, continuous transitions like mouse cursor are triggered with requestAnimationFrame to avoid drops in frame rate ...

'On scroll' animations are controled by native js Intersection Observer API, I'm using only basics here but this API is amazing and you can do a lot of great things with it.

I guess that it all depends on the project, I'm not plannig to support IE11 here so I choosed native JS. Animations are still quite simple so this approach works well here.

On the other side if you will have many complicated animations running at the same, going with something like GSAP could give a much better results from performance perspective ๐Ÿ˜‰

  • Like 2
Link to comment
Share on other sites

On 11/12/2022 at 8:26 PM, 7Studio said:

continuous transitions like mouse cursor are triggered with requestAnimationFrame to avoid drops in frame rate

On Chrome (and Firefox) on Win10 I do notice that with the browser window wider than about 1,000 pixels my mouse cursor slows down. The wider the window, the slower it gets. At 2560px wide, the mouse is at about half speed. This is with a modern CPU and also a GPU.

  • Like 1
Link to comment
Share on other sites

55 minutes ago, taotoo said:

On Chrome (and Firefox) on Win10 I do notice that with the browser window wider than about 1,000 pixels my mouse cursor slows down. The wider the window, the slower it gets. At 2560px wide, the mouse is at about half speed. This is with a modern CPU and also a GPU.

@taotoo thanks for a notice! I'm also on Win10 (integrated GPU, FHD display) but I can't replicate this issue on Chrome/Firefox. Could you please let me know what kind of GPU is that and what display are you using (hdpi with windows scalling)? will try to debug this further ๐Ÿ˜‰ Thanks!

Link to comment
Share on other sites

50 minutes ago, 7Studio said:

@taotoo thanks for a notice! I'm also on Win10 (integrated GPU, FHD display) but I can't replicate this issue on Chrome/Firefox. Could you please let me know what kind of GPU is that and what display are you using (hdpi with windows scalling)? will try to debug this further ๐Ÿ˜‰ Thanks!

Annoyingly I've just revisited the website and it's no-longer doing it! I'll check it again later. The GPU is a GTX750, and the display is low pixel density, with no scaling involved.

  • Like 1
Link to comment
Share on other sites

1 hour ago, taotoo said:

Annoyingly I've just revisited the website and it's no-longer doing it! I'll check it again later. The GPU is a GTX750, and the display is low pixel density, with no scaling involved.

thanks for all the details, I will keep an eye on it, please let me know if that will happen again ๐Ÿ˜‰

  • Like 2
Link to comment
Share on other sites

Hi @7Studio

Very clean and concise design. Beautiful work. Progressive layout technology.
About multilingualism. I recommend to include multilingual features at the very beginning of the site. Otherwise there may be problems that you will have to solve from the beginning.

  • Like 1
Link to comment
Share on other sites

Hi @Andy thanks for the kind words!

Regarding to the multilingual version, this was taken in to account from the beginning and I think that most things are ready (usage of translation strings, backend config.ย  ... ), site is quite simple, but we will see ๐Ÿ˜‰ thanks for a tip!

  • Like 1
Link to comment
Share on other sites

  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
ร—
ร—
  • Create New...