Stefan Vitasovic

A creative showcase of my work portfolio - designed and developed as engaging fullscreen layouts with scroll-based effects featuring video showreels of featured projects.

As a creative lead, I've agreed with the designer to go for a more interactive approach and breathe some life into existing designs. This project is full of timed bezier-based loading effects, nice UI hover effects, as well as other more innovative features.

I’ve really enjoyed developing a custom fullscreen carousel which incorporates more interactive slide transitions. Another interesting functionality is the

Creative front-end programming for a premium WordPress theme, featuring custom landing page concept I’ve created to showcase the dual skin feature along with custom parallax scrolling effect for homepage items.

To emphasize modern design tendencies within this project I’ve developed multiple highly interactive layouts which include a custom fullscreen scroll-triggered slider with images crossfading inside a laptop frame synced with the corresponding textual description, parallax scrolling portfolio lists, and full-page interactive links layout.

Featured:
- Case Study Slider: http://penumbra.edge-themes.com/case-study-slider
- Interactive Links: http://penumbra.edge-themes.com/interactive-links

The idea I had with this project was to introduce contemporary and interactive content behavior into each homepage. I’ve worked as a creative lead here closely co-operating with the designer. We wanted to showcase the dynamic nature of motion blending theatre and performing arts with modern web design. Each homepage was carefully tailored in that sense. The result is a premium WordPress theme featuring smooth parallax scrolling elements, custom content loading animation, and modern hover effects.

I’ve teamed up with product designer to carefully build on the existing UI characteristics by introducing modern animation. My work here includes UI hover effects and behavior with the focus being the landing page where I've developed a custom hero layout used as loading sequence - editable text and image content with scroll-based interactivity.

I've developed page loading sequences, UI hovers, and interactivity with scroll-based loading effects etc. The most eye-catching features would be custom blur in-out hover for portfolio lists, horizontal scrolling portfolio list, dynamic background colors. Honorable mention on Awwwards.

Featured
- Horizontal Scrolling List: http://sahel.elated-themes.com/nyiri/
- Blur/Focus Hover: http://sahel.elated-themes.com/kalahari/
- Dynamic Background Color: http://sahel.elated-themes.com/danakil/

The goal of this project was to make a strong first impression. I’ve developed highly interactive layouts for multiple pages including a split screen slider. The landing page showcases synced content starting with an editable textual loading spinner. The most interesting bits of code are the marquees – both text and image marquee I’ve custom developed to preserve 60fps rendering performance.

Featured:
- Split Screen Slider: http://makoto.elated-themes.com/split-screen-slider/
- Text Marquee http://makoto.elated-themes.com/text-marquee/

Aiming to keep the distinct design palette from the start, I’ve stayed away from color-based interactivity and went for motion. The highlights of this project are dynamic intro section – loading animation, fullscreen showcase, and Passepartout slider. All of them are fullscreen, scroll-based layouts.

Featured:
- Passepartout slider - http://orkan.edge-themes.com/passepartout-slider/
- Fullscreen showcase slider - http://orkan.edge-themes.com/full-screen-showcase/

The aesthetics of this project are strong, vivid, and urban. To preserve these traits, I’ve custom developed a hero progress loader for a landing page, interactive background-text elements, scroll-triggered intro section and a variety of well-balanced modern hover effects and transitions.

Featured:
- Interactive homepage example: http://aoki.select-themes.com/interactive-links/

Using a characteristic color palette with mild overtones, the designer introduced a soft and gentle atmosphere that needed a touch of dynamics. I’ve focused on distinct UI behavior with characteristic button animations and subtle hover effects on various elements which combined with longer crossfades between pages preserve the comfortable flow. As always, landing page was carefully tailored from start to finish to showcase theme features including a custom video frame shortcode.

A black and white theme with minimal content and delicate photography inspired me for something special. I’ve developed custom cursor behavior along with complementary hover effects to give this theme more character and fluency using distinct page transitions.

- Intro Panels:
Developed a split-like loading sequence with engaging panels layout featuring dynamic background color and full-screen call-to-action functionality:
http://brynn.elated-themes.com/landing

- Modern shop layouts
Three custom-developed layouts for this shop theme - split tile slider, parallax list, divided list.
http://bazz.select-themes.com/split-tile-slider/
http://bazz.select-themes.com/parallax-shop/
http://bazz.select-themes.com/divided-store/

- SVG animation
Custom SVG animations throughout this project with SnapSVG.
http://blomma.select-themes.com/landing

- Glitchy Intro
A two-screen intro section custom developed for theme presentation.
http://haar.edge-themes.com/landing

- Uncovering Slider
A boutique slider layout with a powerful unveiling loading effect fit for multiple homepages:
http://sarto.edge-themes.com/
http://sarto.edge-themes.com/agency-home/
http://sarto.edge-themes.com/design-studio/

- Horizontal Parallax Slider
A fullscreen bordered carousel which adds a tailored dose of interactivity to this very stripped-down theme:
http://fierce.edge-themes.com/stack