First complete Webflow creation

Community resources Show & Tell
1

http://marlondequevedo.webflow.com/
What can I say. I am in love. Webflow has made it fun to code. I look forward to continue creating with it.

7 Likes
2

WOW! This is all in webflow? O_O Great Stuff mak! I am puzzled how you did that in WF :smiley:

1 Like
3

In a nutshell:
Created a grid for the two main levels:
Level 1:

Level 2:

Added a border radius of 50% on each level and overflow:hidden:

Each image is specially cut to size:

The levels rotate with the help of jQuery: (thanks to velocity.js)

$(document).ready(function(){
$(".level1").velocity({ rotateZ: 360 }, {
  duration: 80000, loop:true,
  easing: [ 0.80, 0.80, 0.80, 0.80 ]
});
});

Hovers are created with WF interactions.
When a link in a level is clicked, the site waits x amount of time before changing the URL with the help of this jQuery:

$( "#section" ).click(function() {
  setTimeout(function() {
       window.location.href = "://url/here";
      }, 2000);
    });

In this pause a curtain is raised with a loading gif, once it goes to the next URL it starts with such a curtain which waits for all assets to be loaded before it opens up to reveal the content.

That is basically it.
Pretty simple huh?

Cheers

3 Likes
4

My God. That’s some unique thinking and implementation for a portfolio website. Wow.

I admire your solution and creativity, although I’m not sure that I would choose the same approach for clients to have a look on my website. Still, well built.

Question: why don’t you use a personal domain for branding, say www.MarlonDeQ.com and use a info@marlondeq.com mail address instead of Gmail?

5

I know it is a bit out there. I am planning a more commercial version. I really just got this idea into my head and wanted to make it in order to learn WF and how to combine it with jQuery.

The domain name is already part of the plan :smile:

Thanks for the feedback

6

You, sir, are sick human. I am totally saving this as the most unique and innovative use of webflow. Your tutorial is also great.

Thank you very much and happy new year. Jarda

7

WOW… Blown away. Hat’s off to you sir! =)

8

I think this is possible in pure Webflow… and without needing the images to be cut to size. I will have a play and get back to you.

9

I tried to get WF to do the 360º turn and was unable to do it.
The images could be cut using a mask

10

Outstanding, my jaw dropped !!!
you show us newbies the power of WF !!!
Congratulations !!!

11

Found this post by accident, great Webflow layout! :smile:

@makloon what’s your webflow designer page?

edit: was hard Makloon | freelance web designer

12

Sorry. I took so long to answer it seems you answered your question yourself. Cheers Vincent