Streaming live at 10am (PST)

How to use code from codrops?


#1

Hi Guys,

i just want to know how to use code from codrops like this here?
http://tympanus.net/Development/SelectInspiration/index4.html

i cant code, i just want to understand how to insert especially code from codrops.
there are so many nice effects out there i cant use because i m not into code.
is it possible to use it with only "copy&paste"???

i hope some of u can / wil help me.

(sorry for my english)


#2

Hello @MDMR, it is possible to enable some of those animations on codrop, each is different, so you have to check those out individually, but as an example integration of an effect from codrops, you can check out this post, where I have integrated one particular effect into an example Webflow page:

Check that out, to give you and idea, what need to be done. Depending on the custom code you are using, if you are needing to add script, you add that to your Before Body section of Custom Code settings, or css style related code to your HEAD. There are also exceptions from time to time, where you may need to put script also in the HEAD, but generally, put that in your Before Body section. CSS can always be put in the HEAD of the Custom Code section of your site settings.

I hope this give you a direction to look in. Cheers!


#3

hello @cyberdave,
thank you for the quick reply.
i checked your example and understand it better wink
now its my turn to try it out with an other codrop.

Thank You.


#4

Hi @MDMR, Great, that codrops.com site is great, and creating those styles and custom code is fun to do in Webflow. If you get hung up on something, let us know, maybe we can help, and that way, we also learn how to make some nice codrops effect smile


#5

Dear @cyberdave,

Did you tried more examples of codrops? any success with replicating the classes names in webflow and to use only the css like you mentioned?
I'll be happy to hear more about it and the ability to work fluently in webflow,it will help me allot to implant certain things,for example i really want to be able to implant this:


But i don't have a clue to tell you the truth.
Can you please help?

Best,
Guy


#6

Hey Guy,

This is super simple to implement.

Add the tabs widget, then add an image above or below the tab title.

Best,
Naweed


#7