I cant get this codepen to work on my website

Im so new to using custom code, im learning slowly though. 

Basically ive copied this code into a custom code box with the css in <style></style> and java in <script></script> but it doesnt seem to work. Is there anything else i should be doing here?

https://codepen.io/oneplusuniverse/pen/mRLozp

thanks in advance

Where did you insert CSS? Did you use CSS or SCSS?

Where did you insert JavaScript?

Have you inserted JS library yet? (jQuery, Dat-Gui)

thanks for answering,

hm, i've done none of that 😞

could you please guide me on roughly what i should do? 

this is what i have:

<p>
.scene
  .layer#first Can you C#?
  .layer#second Can you C#?
  .layer#third Can you C#?
  .layer#fourth Can you C#?
  .layer#fifth Can you C#?
  .layer#sixth Can you C#?
  .layer#seventh Can you C#?
  .layer#eighth Can you C#?
  .layer#ninth Can you C#?
</p>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(https://fonts.googleapis.com/css?family=Barrio);
@import url(https://fonts.googleapis.com/css?family=Barrio|Open+Sans+Condensed:300);

$step : 0.5px;
html{
  overflow: hidden;
  height:100vh;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}
body{
  background: #333;
    font-size: 80px;
  line-height: 160px;
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
    &:after{
    position:absolute;
    background-color: rgba(66, 134, 244,1);
    text-shadow: 1px 1px 2px rgba(0, 0, 0,0.5);
    // box-shadow: 2px 2px 10px 1px rgba(255,255,255,0.3);
    height:45px;
    padding:0 9px;  
    border-radius: 0 6px 6px 0;
    border: 1px solid rgba(0, 0, 0,0.5);
    top:10vh;
    text-align: center;
    content:'Scroll to focus';
    line-height: 45px;
    font-size:30px;
    // font-family: 'Barrio', cursive;
    font-family: 'Open Sans Condensed', sans-serif;
    color:rgba(255,255,255,1);
    animation-name:pulse;
    animation-duration: 5s; 
    animation-iteration-count: infinite;
  }
}

.scene {
  // margin: auto auto;
  // position:absolute;
  height: 60vh;
  // bottom:0;
  top:5vh;
  left: 0;
  right: 0;
//   -webkit-perspective: 1px;
//   perspective: 1px;
  // perspective:1px,2px;
}

.layer {
  position: absolute;
  // top: 80vh;
  left: 0;
  right: 0;
  text-align: center;
}
$factor:1;
@for $i from 1 to 10 {
  .layer:nth-child(#{$i}) {
    color: hsla(0, 0%, 100-$i*5%, 1);
    filter: blur($i*2px);
    // transform: translate3d(0px,($i*-60px),((-1)*$i*$step));
    top:60vh/$factor;
    transform: scale(1/($factor))/*  translateY($i+300px) */;
    $factor:$factor + 0.5;
    // transform:translateY($i+1px);
  }
}
.layer:nth-child(1){
    filter: blur(0px);
}

@keyframes pulse{
  0%{
    transform: scale(1);
  }
  10%{
    transform: scale(1.02);
  }
  20%{
    transform: scale(1);
  }
  30%{
    transform: scale(1.02);
  }
  40%{
    transform: scale(1);
  }
}
</style>
<script>
var BlurObject = function(){
  this.elements = [$('#first'), $('#second'), $('#third'), $('#fourth'), $('#fifth'), $('#sixth'), $('#seventh'), $('#eighth'), $('#ninth')];
  this.blur = [8, 7, 6, 5, 4, 3, 2, 1, /*focus >*/ 0 /* < focus*/ , 1, 2, 3, 4, 5, 6, 7, 8];  
  this.focus = 8;
  this.factor = 2;
  this.changeBlur = function() {
      for (var i = 0; i < this.elements.length; ++i) {
        this.elements.css('filter', 'blur(' + this.blur[this.focus - i]*this.factor + 'px)');
      }
    }
  this.handleScroll = function(delta){
    if (delta < 0) {
      if (this.focus < 16) {
        this.focus++;
        this.changeBlur(this.focus);
      }
    } else {
      if (this.focus > 😎 {
        this.focus--;
        this.changeBlur(this.focus);
      }
    }
  }
}

$(document).ready(function() {
  
  var instance = new BlurObject();
  var gui = new dat.GUI();
  gui.add(instance, 'factor', 1, 4).onChange(function(){
    instance.changeBlur(instance.focus);
  }).name("Blur factor");
  
  wheelEvt = "onwheel" in document.createElement("div") ? "wheel" : 
          document.onmousewheel !== undefined ? "mousewheel" : 
          "DOMMouseScroll";
  
  $('.scene').bind(wheelEvt, function(event) {
    var delta = event.originalEvent.detail || event.originalEvent.deltaY;
    instance.handleScroll(delta);
  });
  
});

</script>

Use this HTML

<div class="scene">
  <div class="layer" id="first">Can you C#?</div>
  <div class="layer" id="second">Can you C#?</div>
  <div class="layer" id="third">Can you C#?</div>
  <div class="layer" id="fourth">Can you C#?</div>
  <div class="layer" id="fifth">Can you C#?</div>
  <div class="layer" id="sixth">Can you C#?</div>
  <div class="layer" id="seventh">Can you C#?</div>
  <div class="layer" id="eighth">Can you C#?</div>
  <div class="layer" id="ninth">Can you C#?</div>
</div>

CSS

<style>
  @import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(https://fonts.googleapis.com/css?family=Barrio);
@import url(https://fonts.googleapis.com/css?family=Barrio|Open+Sans+Condensed:300);
html {
  overflow: hidden;
  height: 100vh;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

body {
  background: #333;
  font-size: 80px;
  line-height: 160px;
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
}
body:after {
  position: absolute;
  background-color: #4286f4;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  height: 45px;
  padding: 0 9px;
  border-radius: 0 6px 6px 0;
  border: 1px solid rgba(0, 0, 0, 0.5);
  top: 10vh;
  text-align: center;
  content: 'Scroll to focus';
  line-height: 45px;
  font-size: 30px;
  font-family: 'Open Sans Condensed', sans-serif;
  color: white;
  animation-name: pulse;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

.scene {
  height: 60vh;
  top: 5vh;
  left: 0;
  right: 0;
}

.layer {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

.layer:nth-child(1) {
  color: #f2f2f2;
  filter: blur(2px);
  top: 60vh;
  transform: scale(1);
}

.layer:nth-child(2) {
  color: #e6e6e6;
  filter: blur(4px);
  top: 40vh;
  transform: scale(0.6666666667);
}

.layer:nth-child(3) {
  color: #d9d9d9;
  filter: blur(6px);
  top: 30vh;
  transform: scale(0.5);
}

.layer:nth-child(4) {
  color: #cccccc;
  filter: blur(8px);
  top: 24vh;
  transform: scale(0.4);
}

.layer:nth-child(5) {
  color: #bfbfbf;
  filter: blur(10px);
  top: 20vh;
  transform: scale(0.3333333333);
}

.layer:nth-child(6) {
  color: #b3b3b3;
  filter: blur(12px);
  top: 17.1428571429vh;
  transform: scale(0.2857142857);
}

.layer:nth-child(7) {
  color: #a6a6a6;
  filter: blur(14px);
  top: 15vh;
  transform: scale(0.25);
}

.layer:nth-child(8) {
  color: #999999;
  filter: blur(16px);
  top: 13.3333333333vh;
  transform: scale(0.2222222222);
}

.layer:nth-child(9) {
  color: #8c8c8c;
  filter: blur(18px);
  top: 12vh;
  transform: scale(0.2);
}

.layer:nth-child(1) {
  filter: blur(0px);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.02);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.02);
  }
  40% {
    transform: scale(1);
  }
}

</style>

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script>
  var BlurObject = function(){
  this.elements = [$('#first'), $('#second'), $('#third'), $('#fourth'), $('#fifth'), $('#sixth'), $('#seventh'), $('#eighth'), $('#ninth')];
  this.blur = [8, 7, 6, 5, 4, 3, 2, 1, /*focus >*/ 0 /* < focus*/ , 1, 2, 3, 4, 5, 6, 7, 8];  
  this.focus = 8;
  this.factor = 2;
  this.changeBlur = function() {
      for (var i = 0; i < this.elements.length; ++i) {
        this.elements[i].css('filter', 'blur(' + this.blur[this.focus - i]*this.factor + 'px)');
      }
    }
  this.handleScroll = function(delta){
    if (delta < 0) {
      if (this.focus < 16) {
        this.focus++;
        this.changeBlur(this.focus);
      }
    } else {
      if (this.focus > 8) {
        this.focus--;
        this.changeBlur(this.focus);
      }
    }
  }
}

$(document).ready(function() {
  
  var instance = new BlurObject();
  var gui = new dat.GUI();
  gui.add(instance, 'factor', 1, 4).onChange(function(){
    instance.changeBlur(instance.focus);
  }).name("Blur factor");
  
  wheelEvt = "onwheel" in document.createElement("div") ? "wheel" : 
          document.onmousewheel !== undefined ? "mousewheel" : 
          "DOMMouseScroll";
  
  $('.scene').bind(wheelEvt, function(event) {
    var delta = event.originalEvent.detail || event.originalEvent.deltaY;
    instance.handleScroll(delta);
  });
  
});


</script>

thanks dude, this kind of worked, but the whats happening is i cant scroll my page anymore. it's just stuck. this happened to me before on something else and i couldnt work it out. 

this is what its looking like. 

try remove this

html {
  overflow: hidden;
  height: 100vh;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

if it still doesn't work, will need to check carefully...

sweet! that solved it, thank you so much 

ahh man, your answer solved quite a few of my other issues too! ❤️