Im trying to use scrollReveal.js after reading THIS tutorial and using their code, i still cant get my divs to fade in when my viewport is on them.
Html
<head>
<script src="scrollreveal-master/dist/scrollreveal.min.js"></script>
</head>
<div data-sr>This is the first div</div>
<div data-sr>This is the second div</div>
<div data-sr>This is yet another div</div>
javascript
new scrollReveal();
When i view the console on my web page it says
"Uncaught ReferenceError: scrollReveal is not defined"
Im trying to use scrollReveal.js after reading THIS tutorial and using their code, i still cant get my divs to fade in when my viewport is on them.
Html
<head>
<script src="scrollreveal-master/dist/scrollreveal.min.js"></script>
</head>
<div data-sr>This is the first div</div>
<div data-sr>This is the second div</div>
<div data-sr>This is yet another div</div>
javascript
new scrollReveal();
When i view the console on my web page it says
"Uncaught ReferenceError: scrollReveal is not defined"
Share Improve this question edited Nov 16, 2016 at 15:24 asked Nov 16, 2016 at 15:17 user5635857user5635857 8-
Are you getting any other errors like a 404 error? Where is your code? Does it e after you load
scrollreveal.min.js? Also, that site appears to have a typo. It should benew ScrollReveal()– Mike Cluck Commented Nov 16, 2016 at 15:19 - I am only getting one error (the "reference error"). And my code is at the end of my body tag and i load scrollReveal at the start of my head. – user5635857 Commented Nov 16, 2016 at 15:21
- @RhysEdwards Try to load the library before your script at the end of the page – Alexis Commented Nov 16, 2016 at 15:25
- I am doing that, i load the library at the top of the page in the head. – user5635857 Commented Nov 16, 2016 at 15:29
- @RhysEdwards Read my ment "try at the end, before your script". – Alexis Commented Nov 16, 2016 at 15:30
1 Answer
Reset to default 6Try like this to add an animation on scroll using scrollReveal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<div data-sr> one </div>
<div data-sr> two </div>
<div data-sr> three </div>
</div>
<script src="https://unpkg./[email protected]/dist/scrollreveal.min.js"></script>
<script>
// Changing the defaults
window.sr = ScrollReveal({ reset: true });
// Customizing a reveal set
sr.reveal('div', {opacity: 0.9,duration:3000});
</script>
</body>
</html>
Working example : https://plnkr.co/edit/qC33zle0fafyAL0RjkVl?p=preview