1

I'm trying to adapt this script on CodePen to work with the body tag instead of the container id.

I've modified this line:

TweenLite.set("#container",{perspective:600})

With this line:

TweenLite.set("body",{perspective:600})

This change seems to work, adding a "perspective:600;" to the body tag.

Then I replaced this line:

var container = document.getElementById("container"),   w = window.innerWidth , h = window.innerHeight;

With this line:

var container = document.getElementsByTagName("body"),  w = window.innerWidth , h = window.innerHeight;

I've checked SO and Google and while it seems that getElementsByTagName instead of getElementById is the correct way to do it, for some reason it isn't working.

How can I correctly apply the change from id to tag in order for the script to work?

Here's a JSFiddle for you to play with.

Krishna Prashatt
  • 631
  • 9
  • 18
SporeDev
  • 608
  • 1
  • 8
  • 26

2 Answers2

2

document.getElementsByTagName returns an array of all the elements with the tag you specify.

In this case, it will just have one entry because you are looking for the body tag (there is only one element with the body tag). However, in other cases there might be more elements, e.g. you could also go for document.getElementsByTagName('p').

To select the first and in this case only element, go for:

document.getElementsByTagName("body")[0]

daudprobst
  • 132
  • 8
  • Tried both solutions from the answers and both offered the same unexpected behaviour: https://jsfiddle.net/gxjy012g/ (the leaves fall just UNDER the image in the body, not on the whole screen). – SporeDev Apr 26 '18 at 11:43
  • Nevermind, I fixed it, it was CSS related. Thank you! – SporeDev Apr 26 '18 at 11:51
  • Yeah, sorry I did not try the whole thing since I just had a minute. Happy that you managed to fix it. – daudprobst Apr 26 '18 at 16:25
1

You can simply use document.querySelector():

var container = document.querySelector('body');
Yosvel Quintero
  • 18,669
  • 5
  • 37
  • 46
  • 1
    Both solutions offered the same result. I think your solution is better but it's nice that now I learned both ways. However, both solutions have this unexpected behaviour: https://jsfiddle.net/gxjy012g/ (the leaves fall just UNDER the image in the body, not on the whole screen). – SporeDev Apr 26 '18 at 11:43
  • 1
    Nevermind, I fixed it, it was CSS related. Thank you! – SporeDev Apr 26 '18 at 11:51