Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Why my viewport based script doesn't add classes

I have built a code that should add a class to a div, yet nothing happens. Maybe you could help me troubleshoot. I actually have copied exactly the code from codePen, and on codePen it is working, while on my website it isn’t. Maybe it’s because I am using WordPress? How can I tell the browser to execute this code?

Here is a link to the file I have worked on:
https://michalkuczek.pl/afsgdtj/

The way it should be working: the second div should fade in when it appears in the view-port.

NEW CODE:

jQ

<script>
function isScrolledIntoView(elem) {
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

jQuery(window).scroll(function () {
    jQuery('.anim').each(function () {
        if (isScrolledIntoView(this) === true) {
            jQuery(this).addClass('anima').removeClass('viss')
        }
    });

});
</script>

CSS

.anima span{
    display: inline-block;
    transition: 3s;
    opacity: 0;
    animation-duration: 1s;
    animation-name: fInUpSmall;
    animation-fill-mode: forwards;
}
@keyframes fInUpSmall{
    0%{
        opacity:0;
        transform:translateY(15px)}
    100%{
        opacity:1;
        transform:translateY(0)}
}

.anima span:nth-child(1) {
    animation-delay: .1s;
}
.anima span:nth-child(2) {
    animation-delay: .25s;
}.anima span:nth-child(3) {
    animation-delay: .4s;
}.anima span:nth-child(4) {
    animation-delay: .55s;
}.anima span:nth-child(5) {
    animation-delay: .7s;
}.anima span:nth-child(6) {
    animation-delay: .85s;
}
.anima span:nth-child(7) {
    animation-delay: 1s;
}
.anima span:nth-child(8) {
    animation-delay: 1.15s;
}
.anima span:nth-child(9) {
    animation-delay: 1.3s;
}
.viss{
    visibility: hidden;
}

HTML

<div class="anim">
<span>Set</span> <span>a</span> <span>path</span> <span>and</span> <span>get</span> <br><span class="highlight">to&nbsp;</span><span class="highlight">your&nbsp;</span><span class="highlight">destination&nbsp;</span></div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok, I got it. The right code is in the question, here is just the additional code that gets rid of the flashing. In order for the flashing to go away you have to use an additional class on the same element(let's name it: viss), add this css to it:

    .viss{
    visibility: hidden;
}

    and then remove it when in viewport using:

    .removeClass('viss')

    After that everything is smooth and works flawlessly.


  2. 0

    I have updated the code please check snippet. Make Sure you check the snippet in fullpage.

    function istScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}


$(window).scroll(function(event){
   $('.textbox').each(function () {
        if (istScrolledIntoView(this) === true) {
            $(this).addClass('visible');
        }
    });
});
    .textbox {
    opacity: 0;
    transition: all .5s;
        background:red;
        height:300px;
}
.textbox.visible {
    opacity: 1;
}
.anotherdiv {
    width:100%;
    background:blue;
    height:100vh;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="anotherdiv">

</div>
<div class="textbox">

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search