Streaming live at 10am (PST)

Showcase | Great UI / UX for sprint contact engagement


#1

Found a great little snipped of getting the user to engage with you on the next step / contacting you

look at bottom of page

http://madeawkward.com/about.html

anyone know if this is possible and what interactions it would be in webflow?


#2

it's just a form. So you can achieve this look in Webflow. Although I don't know how you can make the automatic focus on the field.

@bartekkustra an opinion? Also look at how the bg colors cycle, nice.


#3


I.am.literally.awesome.

http://awesome-form.webflow.com/


Public link: click me!

code in <head> tag:

<style>
    /* input blink! */
    @-moz-keyframes inputblink {
        0% { opacity: 1; }
        30% { opacity: 1; }
        40% { opacity: 0; }
        90% { opacity: 0; }
        100% { opacity: 1; }
    }
    @-webkit-keyframes inputblink {
        0% { opacity: 1; }
        30% { opacity: 1; }
        40% { opacity: 0; }
        90% { opacity: 0; }
        100% { opacity: 1; }
    }
    @keyframes inputblink {
        0% { opacity: 1; }
        30% { opacity: 1; }
        40% { opacity: 0; }
        90% { opacity: 0; }
        100% { opacity: 1; }
    }

    /* bg color changer */
    @-moz-keyframes bgchange {
       0% { background-color: skyblue; }
       33% { background-color: mediumslateblue; }
       66% { background-color: #f3a578; }
       100% { background-color: skyblue; }
    }
    @-webkit-keyframes bgchange {
        0% { background-color: skyblue; }
       33% { background-color: mediumslateblue; }
       66% { background-color: #f3a578; }
       100% { background-color: skyblue; }
    }
    @keyframes bgchange {
        0% { background-color: skyblue; }
       33% { background-color: mediumslateblue; }
       66% { background-color: #f3a578; }
       100% { background-color: skyblue; }
    }


    .cta {
        -webkit-animation: bgchange 60s infinite forwards linear;
        -moz-animation: bgchange 60s infinite forwards linear;
        animation: bgchange 60s infinite forwards linear;
    }
    .blink-of-awesomeness {
        text-indent: -999px;
        -webkit-animation: inputblink 1.2s infinite forwards linear;
        -moz-animation: inputblink 1.2s infinite forwards linear;
        animation: inputblink 1.2s infinite forwards linear;
    }
    .cta-in-form-input {
        outline: none !important;
    }
    .cta-in-form-input:focus {
        border-color: white;
    }
    .cta-in-form-input::-webkit-input-placeholder {
        color: white;
    }
    .cta-in-form-input:-moz-placeholder {
        color: white;
    }
    .cta-in-form-input::-moz-placeholder {
        color: white;
    }
    .cta-in-form-input:-ms-input-placeholder {
        color: white;
    }
</style>

code before </body> tag:

<script>
    $(document).ready(function() {
        $(document).on('keypress', function(e) {
            if($('[name=projectname]').val() == '') {
                $('.blink-of-awesomeness').fadeOut();
                $('[name=projectname]').focus();
            }
        });
        $('[name=projectname]').focus(function(e) {
            $('.blink-of-awesomeness').fadeOut();
        });
        $('[name=projectname]').blur(function(e) {
            $('.blink-of-awesomeness').fadeIn();
        });
    });
</script>

I am sooooooo going to use this on my website ;D


#4

You kick llamas asses on a daily basis for sure! Also classname .blink-of-awesomeness haha

I am SO using this for the company page I'm currently building too, you're warned (:

Now can you explain to me how this the bgchange works? What are the % represent, and if adding a line will just add a step, and are how durations controlled?


#5

Sure I can explain!

.cta {
    -webkit-animation: bgchange 60s infinite forwards linear;
    -moz-animation: bgchange 60s infinite forwards linear;
    animation: bgchange 60s infinite forwards linear;
}

This part in CSS code represents the name of the animation bgchange, a time the animation will run 60s. It states that the animation is infinite so it will loop. It goes forward so from 0% to 100% of the keyframe, not backwards. And that it's linear which is the same as linear, ease-in, ease-out, ease-in-out settings etc. Since we want to have a smooth fade between different colors, it should be linear for a better experience.

@keyframes bgchange {
    0% { background-color: skyblue; }
   33% { background-color: mediumslateblue; }
   66% { background-color: #f3a578; }
   100% { background-color: skyblue; }
}

The next stop is a @keyframe CSS element. It has a name of our animation bgchange and it has some awesome settings inside. The percentage states for the percentage in time of the whole animation. So 0% is at the beginning, 33% is in one-third part of the animation which in 60s that we set up earlier is around 20th second. In each percentage we can set up different CSS styles to have a nice smooth change of colors, position or whatever else. We're using background-color here for a nice bg change. As you can see there is a skyblue color at 100% mark. This is so once the animation goes to the end it has the same color as it has at the beginning. Thanks to this feature and because the animation is infinite, the colors will fade from one to another.

The blink-of-awesomeness is actually a class in the link provided by @clickryan ;). I've just read the whole code on that page, took what is important and rewrite it for and in webflow.

I'm glad you like it :)


#6

My question is..

Is it possible inside Webflow? I mean, i'm completely blind for codes...


#7

I've done it in Webflow :)
See: http://awesome-form.webflow.com/ :)


#8

Oh!... Now i got the custom codes.

Definitely gonna try sometime.


#9

Cześć Bartek

I shall call you the Robert Lewandowski of JS ninja's wink

thanks wink


#10