Home>

Please write your question in detail here.
"Question"
http://www.pointedge.work/

This is an animation in which content is displayed from right to left after scrolling this site
I would like to ask you how is it made?

Would you tell me whether i am a front engineer or a back end expert?
Thank you very much.

The following error message occurred while implementing a function.

Error message

I made jQuery but the same animation is repeated.
I want to slide to the right when the hidden animation is executed at the left edge when scrolling
I want to implement an image.

I want to display it once it is executed.

Error message
Applicable source code
Source code

This is the code I made with jQuery.
/ * jQuery */
$(function () {
$(window) .scroll (function () {
$('.message-wrap'). toggleClass ('open');
var top = $(this) .offset (). top;
if (scrollTop ()>500) {
console.log ('once');
used = true;
}
});
})

/* css */
Hiding content at the left edge with this css
.message-wrap {
background: url (../ img/about/m-bg.png);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
height: 440px;
margin-top: 150px;
position: relative;
top: 0;
left: -100%;
}

Slide right in this css animation
.message-wrap.open {
transform: translateX (100%);
transition: 1.2s;
}

Tried

Please describe what you tried for the problem here.

I did not know the cause after investigating the cause and making various trials and errors on the net.
Please tell me the cause.
Thank you very much.

Supplemental information (FW/tool version etc.)

Please provide more detailed information here.

  • Answer # 1

    It's better to answer all, but I can't say anything because I can't see the whole source.

    Animation has created a sample.
    [Sample]
    jsfiddle-Animation only

    The websites listed use TweenMax and use the same library.
    tweenmax

    transform: scaleX (0);
    transform-origin: 0% 50%;


    Animation is performed by changing the value of transform.

    The rest is the process of firing the animation according to the scroll position. I think it can be easily implemented by usingscrollmagic, so please check it once.
    scrollmagic