Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Add animation to your css

       <section class="bg-primary">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2 class="section-heading">Sloo Pay?&#46;&#46;&#46; <br>of your billing pain points! </h2>
                    <hr class="light">
                    <p class="text-faded">blah blah blah.</p>
                </div>
            </div>
        </div>
    </section>

Open in new window


How can I add a fade-in animation to this?
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Have a look at this. It's CSS3 so will only work in the newer browsers.

.fade {
    opacity: 0;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
    opacity: 1;
}

Open in new window

Just add the fade class to your element and it will fade in when you mouse over.

You can see a working demo here:

https://jsfiddle.net/ChrisStanyon/r2v0ge2n/

You could also look at a Javascript solution - jQuery already has a fadeIn() method that should do what you want:

http://api.jquery.com/fadein/
Avatar of Jazzy 1012
Jazzy 1012

ASKER

No I want as Im scrolling the page for it to fade in something like this:

https://blackrockdigital.github.io/startbootstrap-creative/

How it does with its buttons and the at your service area, they just fade in as your scroll
OK. That effect is done by using a Javascript file called ScrollReveal.js

You can download it and read the online documentation here -> https://github.com/jlmakes/scrollreveal
this is the only way?
No. You can do fade-ins with CSS as I've already shown you. You can do fade-ins with jQuery, as I've already mentioned, or you can use a pre-made script as I've already linked to. Failing that, you could write your own script to do it (no idea why you'd want to though!)

If you want to have the same effect as on the site you've linked to, then why not just use the same script that they've used? It's literally an 8kb file that you include, plus a couple of lines of code to hook up your page.
I put this but it didnt work <script>
window.sr = ScrollReveal();
sr.reveal('.section-heading');
sr.reveal('.text-faded');

window.sr = ScrollReveal({ reset: true });

sr.reveal('.section-heading', { duration: 200 });
origin: 'bottom',
distance: '20px',
duration: 500,
delay: 0,
rotate: { x: 0, y: 0, z: 0 },
opacity: 0,
scale: 0.9,
easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',
container: window.document.documentElement,
mobile: true,
reset: false,
useDelay: 'always',
viewFactor: 0.2,
viewOffset: { top: 0, right: 0, bottom: 0, left: 0 },
beforeReveal: function (domEl) {},
beforeReset: function (domEl) {},
afterReveal: function (domEl) {},
afterReset: function (domEl) {}
</script>

Open in new window

I just want the words to fade in like the icons do in the service area, I tried copying the code but I couldnt find the right one or it just didnt work
I used this exact code, and now my text just disappears lol
https://jsfiddle.net/tcloninger/e5qaD/
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
If you're already including jQuery, then you can load the script at the top and your code can go in the document ready block, instead of at the bottom of your page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Chris Stanyon</title>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="https://unpkg.com/scrollreveal@3.3.2/dist/scrollreveal.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            window.sr = ScrollReveal();
            sr.reveal('.section-heading');
            sr.reveal('.text-faded');
        });
        </script>    
    </head>
    <body>
        ...

Open in new window

Thank youu soo much, it worked perfectly!
No worries :)