当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Simple js add for 3d

问题描述:

Im not sure why its not working, I've tried many different ways but it doesnt want to work, what am i doing wrong?

Im trying to add 3D inset parallax Effect

my html

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>TITLE</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<link href="3d.js" type="text/javascript" />

</head>

<body>

<div class="inset" style="margin:0 auto">

TEXT HERE

</div>

<h1>3D Inset Parallax Effect</h1>

<p class="inset">The following is an example of how you can create the illusion of a 3D inset block-level element (with parallax on scroll position) using some basic CSS and jQuery. To see the effect in action, just scroll the page.</p>

<h2>Example Form:</h2>

<form>

<label>

First Name:

<input class="inset" type="text" placeholder="Enter First Name" />

</label>

<label>

Last Name:

<input class="inset" type="text" placeholder="Enter Last Name" />

</label>

</body>

</html>

my 3d.js file contains this

var insets = $('.inset'),

origBorderWidth = parseInt(insets.css('border-top-width')),

win = $(window);

function set3D() {

var windowHeight = win.height();

insets.each(function() {

var self = $(this),

scrollHeight = win.scrollTop(),

elementPosition = self.position(),

positionPercentTop = Math.round((elementPosition.top - scrollHeight) / windowHeight * 100),

positionPercentBottom = Math.round((elementPosition.top + self.outerHeight() - scrollHeight) / windowHeight * 100);

self.css({

'border-top-width' : origBorderWidth - (origBorderWidth * (positionPercentTop / 100)) + 'px',

'border-bottom-width' : origBorderWidth * (positionPercentBottom / 100) + 'px'

});

});

};

win.on('load scroll resize', function() {

set3D();

});

The issue im having is obviosly conecting the js code with the page, ive tried putting it between in the head, body. It just doest work.

The CSS works percetly and it all appears fine its just the JS

网友答案:

You're not referencing the script properly. The JavaScript file that you're trying to include needs to be in an opening and closing <script></script> tag. Here's the reference to the documentation

http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.1

You should put your JavaScript file like so, making sure it's within the opening and closing <head></head> tags. Which from your code I can see it already is.

<script type="text/javascript" src="3d.js"></script>
网友答案:

I spotted at least 3 errors in your html:

  • As said by Kiz, <link> can't be used to insert Javascript in a page. You should use <script>:
<script type="text/javascript" src="3d.js"></script>
  • You are using methods from the JQuery lib, but don't seem to include it in your page.
  • As your JS is right now, if you insert it before the DOM elements you want to manipulate, it won't work. Your script won't be able to "see" them, as they aren't added to the DOM tree yet. You should either:
    • Insert your JS inside <body>, at its end.
    • Encapsulate your script into a method called when the page is ready, using the handler for the "ready" event. With JQuery: $(document).ready(function() { /* your code */ });

Hope it helps. Bye!

分享给朋友:
您可能感兴趣的文章:
随机阅读: