How to implement js within a Webflow project?

I would love to know how to add this into one of my Webflow projects. Does anybody in the community know? I’m happy to pay for your help.

2 Likes

https://bens-fresh-project-a41f0d.webflow.io/

Got it :wink: Okay, so, do you know a thing or two about how to add a block of custom code and host a few js and css files?

2 Likes

No way have you done it this quick! :smiley: That’s magic.

I think so,

Custom code using the embed block
Host js and css files on the webflow project. Is that correct? @Ozone

The custom code should be placed inside body tag on the page settings. It needs to be inside of body due to the script’s need to render the DOM. So don’t paste it in the head.

The thing is, this is a pure javascript effect. It uses openGL and is written in a couple of scripts that need to be hosted externally - you cannot just import into webflow. Do you have some web hosting or cloud hosting to host a couple of files on?

Gotcha, yes I can host these files elsewhere and link to them. Which files do I need to host? Or is it all of them?

What code do I need to paste into the page settings? Also would you do this on the page itself or in the custom code settings on the dashboard? @Ozone

You can download the repo as a zip file. The css and js folder sshould go on your external hosting.

Once uploaded, in webflow create the following structure:

divblock (classname=“content” & id=“content”)

  • divblock (classname=“app” & id=“app”)

2020-01-20 19_20_21-Webflow - Ben's Fresh Project 2020-01-20 19_20_33-Webflow - Ben's Fresh Project

Copy this line into the “head” section of your page custom code settings:

<link rel="stylesheet" type="text/css" href="https://yourhost.com/css/base.css />

And this into the body section of your page custom code settings:

<script src="https://yourhost.com/js/three.min.js"></script>
<script src="https://yourhost.com/js/postprocessing.min.js"></script>
<script src="https://yourhost.com/js/InfiniteLights.js"></script>
<script src="https://yourhost.com/js/Distortions.js"></script>

		<script>
		(function() {

			const container = document.getElementById('app');

			const options = {
				onSpeedUp: (ev) => {					
				},
				onSlowDown: (ev) => {
				},
				// mountainDistortion || LongRaceDistortion || xyDistortion || turbulentDistortion || turbulentDistortionStill || deepDistortionStill || deepDistortion
				distortion: mountainDistortion, 
				
				length: 400,
				roadWidth: 9,
				islandWidth: 2,
				lanesPerRoad: 3,

				fov: 90,
				fovSpeedUp: 150,
				speedUp: 2,
				carLightsFade: 0.4,

				totalSideLightSticks: 50,
				lightPairsPerRoadWay: 50,

				// Percentage of the lane's width
				shoulderLinesWidthPercentage: 0.05,
				brokenLinesWidthPercentage: 0.1,
				brokenLinesLengthPercentage: 0.5,

				/*** These ones have to be arrays of [min,max].  ***/
				lightStickWidth: [0.12, 0.5],
				lightStickHeight: [1.3, 1.7],

				movingAwaySpeed: [60, 80],
				movingCloserSpeed: [-120, -160],

				/****  Anything below can be either a number or an array of [min,max] ****/

				// Length of the lights. Best to be less than total length
				carLightsLength: [400 * 0.05, 400 * 0.15],
				// Radius of the tubes
				carLightsRadius: [0.05, 0.14],
				// Width is percentage of a lane. Numbers from 0 to 1
				carWidthPercentage: [0.3, 0.5],
				// How drunk the driver is.
				// carWidthPercentage's max + carShiftX's max -> Cannot go over 1. 
				// Or cars start going into other lanes 
				carShiftX: [-0.2, 0.2],
				// Self Explanatory
				carFloorSeparation: [0.05, 1],

				colors: {
					roadColor: 0x080808,
					islandColor: 0x0a0a0a,
					background: 0x000000,
					shoulderLines: 0x131318,
					brokenLines: 0x131318,
					/***  Only these colors can be an array ***/
					leftCars: [0xff102a, 0xEB383E, 0xff102a],
					rightCars: [0xdadafa, 0xBEBAE3, 0x8F97E4],
					sticks: 0xdadafa,
				}
			};

			const myApp = new App(container, options);
			myApp.loadAssets().then(myApp.init)
		})()
		</script>
3 Likes

Yes, custom code in page settings. Not an embed component. If it works you can pass me a tip on paypal if you still want to :grin:

1 Like

Did you get any of that? I’ll keep the files up on my server for a while.

Thanks for your help on this @Ozone, I’ve done everything you mentioned and it all appears to be working. One small thing is the fonts are now different in places where its a text block. How do I set the default text block style without adding a classname to everywhere I have used a text block element? It was fine before i added this code.

Is it to do with this part?

<link rel="stylesheet" **type="text/css"** href="https://yourhost.com/css/base.css />

Original

!
Updated
Screenshot 2020-01-21 at 11.08.15|690x219

I think its to do with this file

base.css

But I’m not sure what to delete

*,

*::after,
*::before {
box-sizing: border-box;
}

:root {
font-size: 18px;
}

body {
margin: 0;
–color-text: #fff;
–color-bg: #000;
–color-link: #5a5a5a;
–color-link-hover: #3eaaf1;
–color-alt: #3ba2e5;
–color-info: #e93f3b;
color: var(–color-text);
background-color: var(–color-bg);
font-family: ltc-bodoni-175, serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.demo-2 {
–color-link-hover: #53C2C6;
–color-alt: #53C2C6;
–color-info: #FF5F73;
}

.demo-3 {
–color-link-hover: #DFD98A;
–color-alt: #DFD98A;
–color-info: #A90519;
}

.demo-4 {
–color-info: #D856BF;
}

.demo-5 {
–color-link-hover: #334BF7;
–color-alt: #334BF7;
–color-info: #DC5B20;
}

.demo-6 {
–color-info: #FF322F;
}

.demo-7 {
–color-link-hover: #7686BF;
–color-alt: #7686BF;
–color-info: #E2173C;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
content: ‘’;
position: fixed;
z-index: 1000;
}

.js .loading::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(–color-bg);
}

.js .loading::after {
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
opacity: 0.4;
background: var(–color-link);
animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
to {
opacity: 1;
transform: scale3d(0.5,0.5,1) rotate3d(0,0,1,180deg);
border-radius: 50%;
}
}

a {
text-decoration: none;
color: var(–color-link);
outline: none;
}

a:hover,
a:focus {
color: var(–color-link-hover);
outline: none;
}

.message {
background: var(–color-text);
color: var(–color-bg);
padding: 1rem;
text-align: center;
}

.frame {
padding: 3rem 5vw;
text-align: center;
position: relative;
z-index: 1000;
}

.frame__title {
font-size: 1rem;
margin: 0 0 1rem;
font-weight: normal;
}

.frame__links {
display: inline;
}

.frame__links a {
display: block;
margin: 0 1rem 0.5rem;
}

.frame__demos {
margin: 1rem 0;
}

.frame__demo {
display: block;
padding-top: 0.5rem;
}

.frame__demo–current,
.frame__demo–current:hover {
color: var(–color-link-hover);
}

.frame__info {
color: var(–color-info);
}

.content {
display: flex;
flex-direction: column;
width: 100vw;
height: calc(100vh - 13rem);
position: relative;
justify-content: flex-start;
align-items: center;
}

.content__title-wrap {
position: relative;
text-align: center;
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.content__title-wrap a {
pointer-events: auto;
}

.content__pretitle {
color: var(–color-alt);
font-size: 1.35rem;
}

.content__title {
font-size: 6vw;
font-weight: normal;
margin: 0.5rem 0 1.5rem;
font-family: azo-sans-uber, sans-serif;
}

.content__link {
text-decoration: underline;
font-family: azo-sans-uber, sans-serif;
font-size: 1.1rem;
color: inherit;
}

#app {
width: 100%;
height: 100vh;
overflow: hidden;
position: absolute;
}

canvas {
width: 100%;
height: 100%;
}

@media screen and (min-width: 53em) {
.message {
display: none;
}
.frame {
position: fixed;
text-align: left;
z-index: 100;
top: 0;
left: 0;
display: grid;
align-content: space-between;
width: 100%;
max-width: none;
height: 100vh;
padding: 2.5rem 4.5rem;
pointer-events: none;
grid-template-columns: 75% 25%;
grid-template-rows: auto auto auto;
grid-template-areas: ‘title info’
‘… …’
‘… demos’;
}
.frame__title-wrap {
grid-area: title;
display: flex;
}
.frame__title {
margin: 0 8vw 0 0;
}
.frame__demos {
margin: 0;
grid-area: demos;
justify-self: end;
}
.frame__links a {
display: inline-block;
}
.frame__info {
justify-self: end;
}
.frame a {
pointer-events: auto;
}
.content {
height: 100vh;
justify-content: center;
}
}

I think you only need to keep these

Sorry not sure I understand what I need to do here.
If I just require the background without no text or links, what should the code be in the base.css?

@Ozone How do I pay you for your time btw?

I can do this for you, but I want you to consider if you want this. It is a block of custom code that also needs a few files hosted on an external server. You will therefore only see the result once published. Do you have a clear vision on how you want to implement this?

That’s fine, Ive already set this up so it’s working, but the base.css sheet is bringing in loads of extra details which I don’t need. Mainly fonts and the background colour is black.

See link to my design.

https://beyond-lights.webflow.io/

It would be great if I understood what to leave in the css file. could you help with this? @Ozone

@Ozone not sure you’ve seen my below message? Would you be able to help me with this? Happy to pay.

That’s fine, I’ve already set this up so it’s working, but the base.css sheet is bringing in loads of extra details which I don’t need. Mainly fonts and the background colour is black.

See link to my design.

https://beyond-lights.webflow.io/

It would be great if I understood what to leave in the css file. could you help with this?

Just delete the line that calls the base.css file, you don’t need any line of it.

  1. Drag a new div block, make position absolute, give it any name or class
  2. set width 100vw and height 100vh, or whatever that suits your implementation.
  3. Go to the div block settings and Set its id= app

Voilà. :slightly_smiling_face:

Hi guys! Glad I came across this info, working on this now. Do you know of any setbacks of having multiple three.js sections on the site? Is it a killer for performance? I’m looking to have a few full screen divs containing different Thee JS scenes.

Thanks!

Hello @SeeingRed,

Do you know how many fps your three scenes take, if it is under 60fps you should be good. But using more than one scene on the same page might cause performance issues. If it is the same scene/effect in multiple containers and it is under 60 fps, you should be fine.

60fps! I wonder if it’ll be too clunky, perhaps I should buckle up and build the HTML css directly on my editor instead. I love Three JS! Looking for the cleanest way to build full sites from it.

1 Like