CODEWITHSUNDEEP
javascripthtmlcsskeyframe
Bart Lorenzo
Bart Lorenzo

Reputation: 23

How can I trigger a keyframe when the user scrolls to a certain part of a page

is it possible to detect where a user scrolls on a page to trigger a keyframe using pure javascript ?

    .animations {
    opacity: 0;
    animation: animations-keyframes 2s ease forwards;
    -webkit-animation: animations-keyframes 2s ease forwards;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
@keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}
@-webkit-keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}

I want javascript to trigger this event when the user gets to a certain part of a page for example a content section. I don't know where to start

Upvotes: 1

Views: 2103

Answers (2)

Troy Thompson
Troy Thompson

Reputation: 371

Waypoints can be used to trigger events when scrolling to certain parts of a page. http://imakewebthings.com/waypoints/

In simple terms, event listeners are created for scroll events - The distance scrolled down the page and distance of the element from the top of the page are compared. Events are triggered if the user has scrolled beyond the element ( distance scrolled > distance of element from top of page )

Upvotes: 1

Dom
Dom

Reputation: 40461

Using javascript, you could add the class animations to an element on mouseenter event and remove the class on mouseleave. Since you didn't mention jQuery, I will use simple JS, but I recommend using jQuery if you plan on doing a bunch of DOM manipulation since it is easier to maintain.

EXAMPLE: http://jsfiddle.net/dirtyd77/z6xmuwse/2/

JAVASCRIPT:

var el = document.getElementById("animation");

el.onmouseenter = function (){
    this.classList.add("animations");
};

el.onmouseleave = function (){
    this.classList.remove("animations");
};

However, you can also accomplish this using just CSS and the pseudo :hover.

EXAMPLE: http://jsfiddle.net/dirtyd77/z6xmuwse/3/

CSS:

.animations:hover {
    opacity: 0;
    animation: animations-keyframes 2s ease forwards;
    -webkit-animation: animations-keyframes 2s ease forwards;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
@keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}
@-webkit-keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}

Hope this helps and let me know if you have any questions!

Upvotes: 1

Related Questions