Jump to content

I cant get this codepen to work on my website

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

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)

image.thumb.png.4422e3d6add5b155e1ff51a0d3ae8fab.png

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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>

Link to comment
  • Solution

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>

 

 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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. 

image.thumb.png.0fa13161f0603378538d7225300240cf.png

Link to comment

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...

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.