Css/js on scroll animation bug.Kindly help a learner

Jangga · Oct 27, 2017

Please guys. I'm working on making an animation on an element as soon as the user sroll his browser window downwards but I've tried countless times and it refuse to work . I'm giving up already pls help me....pls help watever way u can

Html page structure

Code:

<! Document>
<html>
<head>

<Script type="text/javascript" src="styles/js/jquery-1.11.1.min.js">
<Script type="text/javascript" src="styles/js/script.js">

<Script>

//on or scroll, detect elements in view
$window.on('scroll resize', check_if_in_view);

//trigger our scroll event on initial load $window.trigger('scroll');
</script>
</head>
<body>
<div class="container-fluid">
<div class="well col-sm-6 col-xs-12">
<div class="animation-element slide-left">

MY TEXT GOES HERE
</div></div></div>

My css here

Code:

/*animation element*/

.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

My Js Here

Code:

var $animation_elements = $('.animation-element');
var $window = $(window);

function check_if_in_view() {
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
    
       $element.removeClass('in-view');
    } else {
     $element.addClass('in-view');
    }
  });
}

Jangga · Oct 27, 2017

PS: When i load the page the particular text i want to animate is not found which suggests that the css opacity works but i don't know what's stopping the animation

Jangga · Oct 27, 2017

Please guys. I need ur help

GoDesain · Oct 27, 2017

Jangga said:
Please guys. I need ur help

i'm not good in js.. but you can try this :

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>Page Title</title>
    <style>
        .animation-element {
            opacity: 0;
            position: relative;
        }
        .animation-element.slide-left {
            opacity: 0;
            -moz-transition: all 500ms linear;
            -webkit-transition: all 500ms linear;
            -o-transition: all 500ms linear;
            transition: all 500ms linear;
            -moz-transform: translate3d(-100px, 0px, 0px);
            -webkit-transform: translate3d(-100px, 0px, 0px);
            -o-transform: translate(-100px, 0px);
            -ms-transform: translate(-100px, 0px);
            transform: translate3d(-100px, 0px, 0px);
        }
        .animation-element.slide-left.in-view {
            opacity: 1;
            -moz-transform: translate3d(0px, 0px, 0px);
            -webkit-transform: translate3d(0px, 0px, 0px);
            -o-transform: translate(0px, 0px);
            -ms-transform: translate(0px, 0px);
            transform: translate3d(0px, 0px, 0px);
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="well col-sm-6 col-xs-12">
            <div class="animation-element slide-left">
                MY TEXT GOES HERE
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        var animation_elements = $.find('.animation-element');
        var windows = $(window);
        function check_if_in_view() {
            var window_height = windows.height();
            var window_top_position = windows.scrollTop();
            var window_bottom_position = (window_top_position + window_height);

            $.each(animation_elements, function() {
                var element = $(this);
                var element_height = $(element).outerHeight();
                var element_top_position = $(element).offset().top;
                var element_bottom_position = (element_top_position + element_height);

                if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
                    element.addClass('in-view');
                } else {
                    element.removeClass('in-view');
                }
            });
        }
        $(window).on('scroll resize', function() {
            check_if_in_view()
        })
        $(window).trigger('scroll');
    </script>
</body>
</html>

hope that code like what you looking for..

Jangga · Oct 27, 2017

GoDesain said:
i'm not good in js.. but you can try this :
hope that code like what you looking for..

Thanks for Posting a comment here. I'm almost giving up already and it's actually a school project for me...
Anyway, i tried it yet not working.... I don't know why

GoDesain · Oct 27, 2017

Jangga said:
Thanks for Posting a comment here. I'm almost giving up already and it's actually a school project for me...
Anyway, i tried it yet not working.... I don't know why

can you paste in here debug error what you got ?
also try add your js bellow your css if you put in header..
again.. i'm not expert.. give much error log what you got will give really helpful..

Jangga · Oct 27, 2017

GoDesain said:
can you paste in here debug error what you got ?

I ran it with xampp. It didn't give any error upon opening the browser. The text didn't just animate when i scroll down

GoDesain · Oct 27, 2017

Jangga said:
I ran it with xampp. It didn't give any error upon opening the browser. The text didn't just animate when i scroll down

what browser you use ?
try https://pastebin.com/YMZ4xQ3A save as html and run with console enable.. what you got.

Jangga · Oct 27, 2017

GoDesain said:
what browser you use ?
try https://pastebin.com/YMZ4xQ3A save as html and run with console enable.. what you got.

I'm using chrome browser. I'm Not familiar with pastebin so dont know how to walk myself around it.

GoDesain · Oct 27, 2017

try this : https://jsfiddle.net/cf1hfbtr/
test with latest firefox and chrome..

Jangga · Oct 27, 2017

GoDesain said:
try this : https://jsfiddle.net/cf1hfbtr/
test with latest firefox and chrome..

It clearly works on jsfiddle but doesn't work in my script. I don't know why

Jangga · Oct 27, 2017

GoDesain said:
try this : https://jsfiddle.net/cf1hfbtr/
test with latest firefox and chrome..

Netbeans keep saying I'm missing two semi-colons. See where i added them as netbeans instructed

Code:

$(window).on('scroll resize', function() {
  check_if_in_view();
});

However, on adding them it still didn't work

GoDesain · Oct 27, 2017

Jangga said:
It clearly works on jsfiddle but doesn't work in my script. I don't know why

my final answer is.. you must submit your full code.. so we can take a look what code is missing in your script..
just change the word, but keep your code structure..

Jangga · Oct 27, 2017

GoDesain said:
my final answer is.. you must submit your full code.. so we can take a look what code is missing in your script..
just change the word, but keep your code structure..

Thanks. I'll do That as soon as I get home

cmasex · Oct 27, 2017

For start, put the javascript

HTML:

<Script type="text/javascript" src="styles/js/script.js">

at the end of the document (before </html>). Not always, but you need it here because it is referencing an element not defined yet.

For second, try to debug in Chrome (press F12).

Then you will see that the assignment

HTML:

var $animation_elements = $('.animation-element');

is being set to not defined in the code now, because that javascript is executed before the element itself is defined in the document.

I did not try any more to get it to run, try moving the script first. That might be the reason it works in jsFiddle, the order is different.

Css/js on scroll animation bug.Kindly help a learner

Jangga

Junior Member

Jangga

Junior Member

Jangga

Junior Member

GoDesain

Regular Member

Jangga

Junior Member

GoDesain

Regular Member

Jangga

Junior Member

GoDesain

Regular Member

Jangga

Junior Member

GoDesain

Regular Member

Jangga

Junior Member

Jangga

Junior Member

GoDesain

Regular Member

Jangga

Junior Member

cmasex

Newbie

Main Menu

Marketplace

Making Money

BlackHat World