7Studio Posted November 11, 2022 Share Posted November 11, 2022 Hi everyone, I would like to showcase a small micro site of own studio - 7studio.eu 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 ? 16 Link to comment Share on other sites More sharing options...
wbmnfktr Posted November 11, 2022 Share Posted November 11, 2022 Super clean! 1 Link to comment Share on other sites More sharing options...
7Studio Posted November 11, 2022 Author Share Posted November 11, 2022 @wbmnfktr Thanks! 1 Link to comment Share on other sites More sharing options...
MateThemes Posted November 11, 2022 Share Posted November 11, 2022 Amazing work! I really like the design! 1 Link to comment Share on other sites More sharing options...
7Studio Posted November 11, 2022 Author Share Posted November 11, 2022 @MateThemes Thanks! Link to comment Share on other sites More sharing options...
DV-JF Posted November 12, 2022 Share Posted November 12, 2022 Really nice site, I like it, thanks for showing. Short notice: There seems to be a little glitch on mobile. Something is causing a minimal horizontal overflow. Can't investigate further cause I'm on mobile ? 1 Link to comment Share on other sites More sharing options...
7Studio Posted November 12, 2022 Author Share Posted November 12, 2022 @DV-JF Thanks a lot and thanks for noticing this, it should now be fixed ? Link to comment Share on other sites More sharing options...
Stefanowitsch Posted November 12, 2022 Share Posted November 12, 2022 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. 1 Link to comment Share on other sites More sharing options...
7Studio Posted November 12, 2022 Author Share Posted November 12, 2022 @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 ? 2 Link to comment Share on other sites More sharing options...
taotoo Posted November 14, 2022 Share Posted November 14, 2022 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. 1 Link to comment Share on other sites More sharing options...
7Studio Posted November 14, 2022 Author Share Posted November 14, 2022 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 More sharing options...
taotoo Posted November 14, 2022 Share Posted November 14, 2022 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. 1 Link to comment Share on other sites More sharing options...
7Studio Posted November 14, 2022 Author Share Posted November 14, 2022 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 ? 2 Link to comment Share on other sites More sharing options...
Andy Posted November 20, 2022 Share Posted November 20, 2022 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. 1 Link to comment Share on other sites More sharing options...
7Studio Posted November 21, 2022 Author Share Posted November 21, 2022 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! 1 Link to comment Share on other sites More sharing options...
heldercervantes Posted May 18, 2023 Share Posted May 18, 2023 This is a particularly good one. Very well designed ???? 1 Link to comment Share on other sites More sharing options...
7Studio Posted May 19, 2023 Author Share Posted May 19, 2023 @heldercervantes thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now