JS Tutorial
- Overview
- Documents
What is jQuery ScrollAppear?
jQuery ScrollAppear is a powerful and agile content appear on scroll (or on other event triggers) plugin for jQuery. jQuery ScrollAppear expands on the basic scroll appear functionality to include:
- History of what has been shown as result of the plugin;
- Ability to revert part/all of what has been shown;
- Ability to directly show elements without the user having to trigger a monitored event;
- Ability to prevent mass scroll/appear of content by setting a timeout between events
- Set a pixel offset for your trigger element;
- Set the number of event triggers to be performed before the event is unbound.
Source: domsammut.com
1. INCLUDE JS FILES
<script src="jquery.js"></script> <script src="jquery.scrollappear.source.js"></script>
2. HTML
<div class="boxdiv showthis">
<p class="post-title"><a href="https://www.domsammut.com/blog/review-star-wars-darth-vader-lightsaber-portable-battery-charger" target="_blank">Review: Star Wars Darth Vader Lightsaber Portable Battery Charger</a></p>
<p>A lightsaber. That charges your phone. What more could a Star Wars nerd ask for? But how does it work in day-to-day practice?</p>
</div>
<div class="boxdiv showthis">
<p class="post-title"><a href="https://www.domsammut.com/code/nesting-events-inside-hitcallback-functions-using-google-universal-analytics" target="_blank">Nesting events inside hitCallback functions using Google Universal Analytics</a></p>
<p>An example of how to fire Google Universal Analytics events sequentially by nesting them inside each fired events hitCallback function.</p>
</div>
<div class="boxdiv showthis">
<p class="post-title"><a href="https://www.domsammut.com/code/some-solutions-to-font-face-rendering-poorly-in-windows-google-chrome" target="_blank">Some solutions to font-face rendering poorly in Windows Google Chrome</a></p>
<p>Font-face fonts not rendering correctly in Google Chrome on Windows? Here are a couple of methods to solve this by forcing Chrome to use your SVG font which renders better on Windows. </p>
</div>
<div class="boxdiv showthis">
<p class="post-title"><a href="https://www.domsammut.com/blog/disable-autoplay-videos-on-facebook-in-google-chrome" target="_blank">Disable autoplay videos on Facebook in Google Chrome</a></p>
<p>A quick simple guide on how to disable autoplay videos in Google Chrome without the use of extensions / plugins. This method also allows you to play videos on demand.</p>
</div>
<div class="boxdiv showthis">
<p class="post-title"><a href="https://www.domsammut.com/blog/review-the-curve-wireless-bluetooth-telephone" target="_blank">Review: The ‘Curve’ wireless Bluetooth telephone</a></p>
<p>Sleek and space-age come to mind when I looked at the Native Union Curve wireless Bluetooth phone designed by David Turpin. Its sound clarity is superior and the phone is a nostalgic through-back to the days of when you had a home phone. </p>
</div>
<div class="boxdiv showthis">
<p class="post-title"><a href="https://www.domsammut.com/blog/solution-for-google-authorship-image-not-appearing" target="_blank">Solution for Google authorship image not appearing</a></p>
<p>A solution for Google Authorship images not appearing in Google search results.</p>
</div>
<div class="boxdiv">
<p class="post-title"><a href="https://www.domsammut.com/blog/review-otterbox-defender-case-for-iphone-5-5s" target="_blank">Review: OtterBox Defender case for iPhone 5 / 5s</a></p>
<p>The OtterBox Defender is a beast, in every sense of the word. It’s strong, bulky, durable, overly large and somewhat cumbersome. But this doesn’t detract from what this case is designed to do: protect your iPhone from tough external conditions.</p>
</div>
<div class="boxdiv">
<p class="post-title"><a href="https://www.domsammut.com/code/restrict-all-traffic-except-your-ip-address-and-more-with-htaccess" target="_blank">Restrict all traffic except your IP address and more with .htaccess</a></p>
<p>Using .htaccess you can restrict all traffic to a domain while allowing an alias subdomain to accept traffic via a few simply lines in a .htaccess file.</p>
</div>
<div class="boxdiv">
<p class="post-title"><a href="https://www.domsammut.com/code/add-a-custom-admin-colour-scheme-in-wordpress" target="_blank">Add a custom admin colour scheme in WordPress 3.8</a></p>
<p>Learn how to add your own custom WordPress administration colour scheme and corresponding CSS file.</p>
</div>
<div class="footer" id="thisf">
<p>You have reached the bottom.<br />If you haven't added any elements, the number will be <strong>28</strong>.</p>
<p><small><a href="https://www.domsammut.com">Written by Dom Sammut</a></small></p>
</div>
3. JAVASCRIPT
//Initialise ScrollAppear
jQuery('.footer').ScrollAppear({
ElementAffect : ".boxdiv",
ElementsToShow : 5,
AddClass : 'showthis',
Timeout : 0
});
//Add item numbers
jQuery('.boxdiv').each(function() {
jQuery(this).append('<h2>' + x + '</h2>');
x += 1;
});
4. OPTIONS
AddClass [required]
The default class added will be scrollshow. Multiple classes can be added in the following fashion:
AddClass : 'classname-zero classname-one'
This parameter leverages the built-in jQuery api method .addClass
DelayEffect
Default value is 0 and hence no delay is applied. Change this value to add a delay to each animation.
DelayEffect : 400
EffectDuration
Default value is set to 'fast'. This parameter can be either a number or a string as specified in the jQuery Animate Duration parameter documentation.
Numeric value
DelayEffect : 400
String value
DelayEffect : "slow"
ElementAffect [required]
Pass in the class of the elements that will be modified when the event is triggered.
ElementAffect : ".hiddenElement"
ElementsToShow
This parameter is used to determine how many elements to show (ElementAffect) when the plugin determines thatitemone is in the viewport. This parameter only accepts a number.
ElementsToShow : 5
NumberOfScrolls
This is used to constrain how many times the plugin will successfully execute. Default is set to 100. Only accepts a number value.
NumberOfScrolls: 20
PixelOffset
This can be used to refine when the trigger point for itemone by setting an offset. By setting a negative value the element will need to be visible plus the offset before the event will trigger. By setting a positive offset, the event will trigger before the element is visible plus the offset. Only accepts a number value, no “px” required.
Default value is set to 0.
PixelOffset : 200
Timeout
Used to set how long between monitoring the trigger event. A higher number is generally preferred to prevent mass triggering of the event which can cause undesirable strain on the browser if you have a significant number of hidden elements.
Accepts a number, default is 1000.
Timeout : 2000
TriggerIntent
Set to true by default. This value is used to determine if the plugin should check to see if itemone is in the viewport again after being triggered.
TriggerIntent : false
TriggerType
Accepts a string, default is "scroll". Refer to the following pages in the jQuery API for complete set of options:
5. METHODS
BindEvent
The example below will bind the event to all DOM event types specified when the plugin was initialised.
jQuery(this).ScrollAppear('BindEvent');
An example of calling the meothd with a DOM event type specified.
jQuery(this).ScrollAppear('BindEvent', 'scroll');
Destroy
This method will remove the instance of the plugin from the page.
jQuery(this).ScrollAppear('Destroy');
HideElements
This will hide elements that have been shown as result of jQuery ScrollAppear.
It can be called in two ways:
- Removing the last iteration of elements shown
- Removing a specified number of elements shown by the plugin
Option 1
Option 1 gets the last iteration count from the ElementsToShow parameter.
jQuery(this).ScrollAppear('HideElements');
Option 2
jQuery(this).ScrollAppear('HideElements', 4);
ResetCounter
This will reset the NumberOfScrolls parameter back to 0.
jQuery(this).ScrollAppear('ResetCounter');
ShowElements
This will show the next iteration of elements, allowing you to bypass the event triggers that are in place.
jQuery(this).ScrollAppear('ShowElements');
UnbindEvent
The example below will unbind the event to all DOM event types specified when the plugin was initialised.
jQuery(this).ScrollAppear('UnbindEvent');
An example of calling the meothd with a DOM event type specified.
jQuery(this).ScrollAppear('UnbindEvent', 'scroll');
