Skip to content

Commit 1898595

Browse files
jlmakesjlmakes
committed
✨ ScrollReveal v3.0.4 ✨
1 parent a216cb2 commit 1898595

File tree

5 files changed

+55
-46
lines changed

5 files changed

+55
-46
lines changed

‎README.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44

55
***
66

7-
[![ScrollReveal version](http://img.shields.io/badge/scrollreveal.js-v3.0.3-1a2434.svg)](https://scrollrevealjs.org) [![License](http://img.shields.io/badge/License-MIT-1a2434.svg)](http://opensource.org/licenses/MIT)
7+
[![NPM version][npm-image]][npm-url]
8+
[![NPM downloads][downloads-image]][downloads-url]
89

910
- 2.9KB minified and Gzipped
1011
- No dependencies
@@ -16,10 +17,10 @@
1617

1718
#### 1.1. Installation
1819

19-
The simplest method is to copy paste this snippet just before your closing `</body>` tag (thanks to jsDelivr)
20+
The simplest method is to copy paste this snippet just before your closing `</body>` tag.
2021

2122
```html
22-
<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.0.3/scrollreveal.min.js"></script>
23+
<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.0.4/scrollreveal.min.js"></script>
2324
```
2425

2526
But you can also:
@@ -338,3 +339,8 @@ Want to see your page here? Please send me your work (or of others) using Scroll
338339
#### 5.4. Special Thanks
339340

340341
ScrollReveal was inspired by the talented [Manoela Ilic](https://twitter.com/crnacura) and her [cbpScroller.js](http://tympanus.net/codrops/2013/07/18/on-scroll-effect-layout/).
342+
343+
[npm-image]: https://img.shields.io/npm/v/scrollreveal.svg?style=flat
344+
[npm-url]: https://npmjs.org/package/scrollreveal
345+
[downloads-image]: https://img.shields.io/npm/dm/scrollreveal.svg?style=flat
346+
[downloads-url]: https://npmjs.org/package/scrollreveal

‎dist/scrollreveal.js

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
/ ___/______________ / / / __ \___ _ _____ ____ _/ /
1515
\__ \/ ___/ ___/ __ \/ / / /_/ / _ \ | / / _ \/ __ `/ /
1616
___/ / /__/ / / /_/ / / / _, _/ __/ |/ / __/ /_/ / /
17-
/____/\___/_/ \____/_/_/_/ |_|\___/|___/\___/\__,_/_/ v3.0.3
17+
/____/\___/_/ \____/_/_/_/ |_|\___/|___/\___/\__,_/_/ v3.0.4
1818
1919
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
2020
Copyright 2014–2016 Julian Lloyd (@jlmakes) Open source under MIT license
@@ -57,8 +57,8 @@ ______________________________________________________________________________*/
5757

5858
if ( sr.tools.isMobile() && !sr.defaults.mobile ) {
5959
return false;
60-
} else if ( !sr.tools.browserSupports('transform') ) {
61-
return console.warn('Your browser does not support CSS transform.');
60+
} else if ( !sr.tools.isSupported('transform') || !sr.tools.isSupported('transition') ) {
61+
return console.warn('ScrollReveal is not supported in this browser.');
6262
}
6363

6464
sr.store = {
@@ -72,7 +72,7 @@ ______________________________________________________________________________*/
7272
return sr;
7373
}
7474

75-
ScrollReveal.prototype.reveal = function( selector, config, sync ){
75+
ScrollReveal.prototype.reveal = function( selector, config, sync ) {
7676
var elements, container, elem, elemId;
7777

7878
if ( config && config.container ) {
@@ -83,7 +83,7 @@ ______________________________________________________________________________*/
8383

8484
elements = Array.prototype.slice.call( container.querySelectorAll( selector ) );
8585
if ( !elements.length ) {
86-
console.warn( 'reveal(\'' + selector + '\') failed: no elements found.' );
86+
console.warn('reveal(\'' + selector + '\') failed: no elements found.');
8787
return sr;
8888
}
8989
for ( var i = 0; i < elements.length; i++ ) {
@@ -115,8 +115,8 @@ ______________________________________________________________________________*/
115115
}
116116
if ( !sync ) {
117117
sr.record( selector, config );
118+
sr.init();
118119
}
119-
sr.init();
120120
return sr;
121121
};
122122

@@ -165,12 +165,12 @@ ______________________________________________________________________________*/
165165
elem.styles.transition.delayed = '-webkit-transition: ' + elem.styles.computed.transition + '-webkit-transform ' + config.duration / 1000 + 's ' + config.easing + ' ' + config.delay / 1000 + 's, opacity ' + config.duration / 1000 + 's ' + config.easing + ' ' + config.delay / 1000 + 's; ' +
166166
'transition: ' + elem.styles.computed.transition + 'transform ' + config.duration / 1000 + 's ' + config.easing + ' ' + config.delay / 1000 + 's, opacity ' + config.duration / 1000 + 's ' + config.easing + ' ' + config.delay / 1000 + 's; ';
167167

168-
elem.styles.transform.initial += ' -webkit-transform:';
169-
elem.styles.transform.target += ' -webkit-transform:';
168+
elem.styles.transform.initial = ' -webkit-transform:';
169+
elem.styles.transform.target = ' -webkit-transform:';
170170
generateTransform( elem.styles.transform );
171171

172-
elem.styles.transform.initial = 'transform:';
173-
elem.styles.transform.target = 'transform:';
172+
elem.styles.transform.initial += 'transform:';
173+
elem.styles.transform.target += 'transform:';
174174
generateTransform( elem.styles.transform );
175175

176176
function generateTransform( transform ) {
@@ -221,7 +221,7 @@ ______________________________________________________________________________*/
221221
sr.store.containers[ i ].addEventListener( 'scroll', sr.handler );
222222
sr.store.containers[ i ].addEventListener( 'resize', sr.handler );
223223
}
224-
if ( !sr.initialized ){
224+
if ( !sr.initialized ) {
225225
window.addEventListener( 'scroll', sr.handler );
226226
window.addEventListener( 'resize', sr.handler );
227227
sr.initialized = true;
@@ -262,7 +262,7 @@ ______________________________________________________________________________*/
262262
elem.seen = true;
263263
queueCallback( 'reveal', elem );
264264

265-
} else if ( !visible && elem.config.reset && elem.revealed ){
265+
} else if ( !visible && elem.config.reset && elem.revealed ) {
266266
elem.domEl.setAttribute( 'style',
267267
elem.styles.inline
268268
+ elem.styles.transform.initial
@@ -305,19 +305,19 @@ ______________________________________________________________________________*/
305305
}
306306
};
307307

308-
ScrollReveal.prototype.getContainerSize = function( container ){
308+
ScrollReveal.prototype.getContainer = function( container ) {
309309
if ( !container ) {
310310
container = window.document.documentElement;
311311
}
312-
var w = container['clientWidth'] || 0;
313-
var h = container['clientHeight'] || 0;
312+
var w = container.clientWidth;
313+
var h = container.clientHeight;
314314
return {
315315
width: w,
316316
height: h
317317
};
318318
};
319319

320-
ScrollReveal.prototype.getScrolled = function( container ){
320+
ScrollReveal.prototype.getScrolled = function( container ) {
321321
if ( !container ) {
322322
return {
323323
x: window.pageXOffset,
@@ -333,8 +333,10 @@ ______________________________________________________________________________*/
333333
};
334334

335335
ScrollReveal.prototype.getOffset = function( domEl ) {
336-
var offsetTop = 0;
337-
var offsetLeft = 0;
336+
var offsetTop = 0;
337+
var offsetLeft = 0;
338+
var offsetHeight = domEl.offsetHeight;
339+
var offsetWidth = domEl.offsetWidth;
338340

339341
do {
340342
if ( !isNaN( domEl.offsetTop ) ) {
@@ -346,46 +348,46 @@ ______________________________________________________________________________*/
346348
} while ( domEl = domEl.offsetParent );
347349

348350
return {
349-
top: offsetTop,
350-
left: offsetLeft
351+
top : offsetTop,
352+
left : offsetLeft,
353+
height : offsetHeight,
354+
width : offsetWidth
351355
};
352356
};
353357

354-
ScrollReveal.prototype.isElemVisible = function( elem ){
355-
358+
ScrollReveal.prototype.isElemVisible = function( elem ) {
356359
var offset = sr.getOffset( elem.domEl );
357-
var container = sr.getContainerSize( elem.config.container );
360+
var container = sr.getContainer( elem.config.container );
358361
var scrolled = sr.getScrolled( elem.config.container );
359362
var vF = elem.config.viewFactor;
360363

361-
var elemHeight = elem.domEl.offsetHeight;
362-
var elemWidth = elem.domEl.offsetWidth;
364+
var elemHeight = offset.height;
365+
var elemWidth = offset.width;
363366
var elemTop = offset.top;
364-
var elemBottom = elemTop + elemHeight;
365367
var elemLeft = offset.left;
368+
var elemBottom = elemTop + elemHeight;
366369
var elemRight = elemLeft + elemWidth;
367370

368371
return ( confirmBounds() || isPositionFixed() );
369372

370-
function confirmBounds(){
371-
373+
function confirmBounds() {
372374
var top = elemTop + elemHeight * vF;
373-
var bottom = elemBottom - elemHeight * vF;
374375
var left = elemLeft + elemWidth * vF;
376+
var bottom = elemBottom - elemHeight * vF;
375377
var right = elemRight - elemWidth * vF;
376378

377379
var viewTop = scrolled.y + elem.config.viewOffset.top;
378-
var viewBottom = scrolled.y - elem.config.viewOffset.bottom + container.height;
379380
var viewLeft = scrolled.x + elem.config.viewOffset.left;
380-
var viewRight = scrolled.x - elem.config.viewOffset.right + container.width;
381+
var viewBottom = scrolled.y - elem.config.viewOffset.bottom + container.height;
382+
var viewRight = scrolled.x - elem.config.viewOffset.right + container.width;
381383

382384
return ( top < viewBottom )
383385
&& ( bottom > viewTop )
384386
&& ( left > viewLeft )
385387
&& ( right < viewRight );
386388
}
387389

388-
function isPositionFixed(){
390+
function isPositionFixed() {
389391
return ( window.getComputedStyle( elem.domEl ).position === 'fixed' );
390392
}
391393
};
@@ -396,6 +398,7 @@ ______________________________________________________________________________*/
396398
var record = sr.history[ i ];
397399
sr.reveal( record.selector, record.config, true );
398400
};
401+
sr.init();
399402
} else {
400403
console.warn('sync() failed: no reveals found.');
401404
}
@@ -413,8 +416,8 @@ ______________________________________________________________________________*/
413416
};
414417

415418
Tools.prototype.forOwn = function( object, callback ) {
416-
if ( !this.isObject( object ) ){
417-
throw new TypeError( 'Expected \'object\', but received \'' + typeof object + '\'.' );
419+
if ( !this.isObject( object ) ) {
420+
throw new TypeError('Expected \'object\', but received \'' + typeof object + '\'.');
418421
} else {
419422
for ( var property in object ) {
420423
if ( object.hasOwnProperty( property ) ) {
@@ -446,27 +449,27 @@ ______________________________________________________________________________*/
446449
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent );
447450
};
448451

449-
Tools.prototype.browserSupports = function( feature ) {
452+
Tools.prototype.isSupported = function( feature ) {
450453
var sensor = document.createElement('sensor');
451454
var cssPrefix = 'Webkit,Moz,O,'.split(',');
452455
var tests = ( feature + cssPrefix.join( feature + ',' ) ).split(',');
453456

454-
for ( var i = 0; i < tests.length; i++ ){
457+
for ( var i = 0; i < tests.length; i++ ) {
455458
if ( !sensor.style[ tests[ i ] ] === '' ) {
456459
return false;
457460
}
458461
}
459462
return true;
460463
};
461464

462-
function Tools(){};
465+
function Tools() {};
463466
return Tools;
464467

465468
})();
466469

467-
var _requestAnimationFrame = this.requestAnimationFrame ||
468-
this.webkitRequestAnimationFrame ||
469-
this.mozRequestAnimationFrame;
470+
var _requestAnimationFrame = window.requestAnimationFrame ||
471+
window.webkitRequestAnimationFrame ||
472+
window.mozRequestAnimationFrame;
470473

471474
}).call( this );
472475

0 commit comments

Comments
 (0)