• Home
  • Your ChampionChip
    • Your ChampionChip
    • Purchase Your ChampionChip
    • Register Your ChampionChip
    • Find Your ChampionChip Code
  • About ChampionChip
    • About ChampionChip
    • Our Partners
  • Contact Us

We are proud to be a company that contributed to a major change in how events are timed and results produced in South Africa and the African continent.

  • 8A Old Main Road, Gillitts, Durban, KwaZulu Natal, South Africa, 3610
  • Office: 082 056 9412
  • info@championchip.co.za
  • 08:00am - 17:00pm
    • Home
    • Your ChampionChip
      • Your ChampionChip
      • Purchase Your ChampionChip
      • Register Your ChampionChip
      • Find Your ChampionChip Code
    • About ChampionChip
      • About ChampionChip
      • Our Partners
    • Contact Us
Championchip
Championchip
  • Home
  • Your ChampionChip
    • Your ChampionChip
    • Purchase Your ChampionChip
    • Register Your ChampionChip
    • Find Your ChampionChip Code
  • About ChampionChip
    • About ChampionChip
    • Our Partners
  • Contact Us

Scroll Reveal

Championchip > Scroll Reveal

Our Scroll Reveal feature is powered by the script found here: https://github.com/julianlloyd/scrollReveal.js. The script allows you to add “data-scroll-reveal” to HTML elements for on page scroll animations. We recommend adding to DIVs over SPAN etc as DIVs can move vs SPAN tags just fading in. Once you add the code to a DIV refresh a page or scroll down and it will animate in. It will only do this once until you refresh the page again. The great feature about the script is you can use plain English to describe how you’d like to animate your HTML element.

Example of this in action (refresh this page if you didn’t see it already):

Enter from the left and move up 50px in 1.33 seconds.
Enter from the bottom after 1 second.
Wait 2.5 seconds and then ease-in-out 100px.

Code used for the above:

<div data-scroll-reveal=”enter left and move 50px over 1.33s”> Enter from the left and move up 50px in 1.33 seconds. </div>

<div data-scroll-reveal=”enter from the bottom after 1s”> Enter from the bottom after 1 second. </div>

<div data-scroll-reveal=”wait 2.5s and then ease-in-out 100px”> Wait 2.5 seconds and then ease-in-out 100px. </div>

Usage:

For a lengthier explanation on this visit the following page: https://github.com/julianlloyd/scrollReveal.js

Championchip

ChampionChip Africa (Pty) Ltd
8A Old Main Road, Gillitts, Durban, KwaZulu Natal, South Africa, 3610
T: 082 056 9412
E: info@championchip.co.za
P.O. Box 1332, Westville, Kwazulu Natal, South Africa, 3630

ChampionChip

  • Purchase Your ChampionChip
  • Register Your ChampionChip
  • Find Your ChampionChip Code

About Us

  • About ChampionChip
  • Our Partners

© Copyright 2024. ChampionChip Africa. All Rights Reserved.