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?... <br>of your billing pain points! </h2>
<hr class="light">
<p class="text-faded">blah blah blah.</p>
</div>
</div>
</div>
</section>
How can I add a fade-in animation to this?
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
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 /scrollrev eal
You can download it and read the online documentation here -> https://github.com/jlmakes
ASKER
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.
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.
ASKER
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>
ASKER
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
ASKER
I used this exact code, and now my text just disappears lol
https://jsfiddle.net/tcloninger/e5qaD/
https://jsfiddle.net/tcloninger/e5qaD/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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>
...
ASKER
Thank youu soo much, it worked perfectly!
No worries :)
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/Chris
You could also look at a Javascript solution - jQuery already has a fadeIn() method that should do what you want:
http://api.jquery.com/fade