CODEWITHSUNDEEP
javascripthtmlcss
Saturi
Saturi

Reputation: 1416

Scroll-controlled text animation

How do I trigger and control text animation with scrolling?

<p class="class">TEXT</p>


transform:translateX(-500px);opacity:0;
transform:translateX(0px);opacity:1;

Upvotes: 2

Views: 352

Answers (2)

aleha_84
aleha_84

Reputation: 8539

  1. You must set your initial style values.
  2. Modify style values by:
    a. Adding Class
    b. Adding inline style property
    c. use css3 animation style property

or

  1. Use external js library.

do not forget cross-browser compability by using prefixes.

Example (using jQuery):

//css
.class {
    -moz-transform: translateX(-500px);
    -ms-transform: translateX(-500px);
    -o-transform: translateX(-500px);
    -webkit-transform: translateX(-500px);
    transform:translateX(-500px);
    opacity:0;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.class.animated {
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1;
}

//html
<p class="class">TEXT</p>

//js - animate on scrol event
$( "#target" ).scroll(function() {
    $(".class").toggleClass("animate");
});

Upvotes: 0

Khalil
Khalil

Reputation: 845

You can use Skrollr.

Import the library, then something like

<p class="class" data-X_start=" transform:translateX(-500px);opacity:0;" data-X_end=" transform:translateX(0px);opacity:1;">
            TEXT</p>

would start the animation when your scroll bar is at X_start and finish it when you reach X_end.

Upvotes: 2

Related Questions