Scroll interaction that even beginners can create. Part 1 JavaScript

hello. :)

 

Added supplementary lessons on the formulas used in Section 12. ^^..

Also, a bonus example has been added in Section 12, which you may find useful.

 

thank you. :)

Hello~! These days.. prices are rising so much and it seems like everyone is having a hard time in many ways ㅠㅠ..

I've added a bonus example to hopefully help you out a little!

 

PS. If you don't know anything, please ask and I'll tell you.

Thank you :D

hello :)

I have uploaded the completed vanilla JS code attached.

All video lessons have been uploaded

Vanilla classes only cover sections 2 through 6 :)

The reason is

The jquery patterns that appear in sections 7 through 11 are

Because it is a duplicate class that appears in all of Sections 2 to 6, it is not particularly necessary!

If there are any difficult parts, please ask a question and I will create additional ones :)

thank you

hello!!

I am announcing this today as well.

1. Mac Chrome bug patch

Section 5-2 Mac Chrome bug does not occur in the Chrome browser in the development stage . (Directly confirmed on 2022.1.30)

The Chrome browser in development stage is not yet officially released, so bugs may occur, but will be fixed later when the official version is released.

Safari Chrome bug is not expected to occur. Google is fast after all :)

 

2. Edge browser smooth scrolling

Yesterday, we informed you that a bug occurred in section 5-2 when using smooth scrolling, a native feature of the Edge browser!

I'm uploading a bug fix video today

I also checked to see if there were any problems with the auto slide I had created before.

I used similar logic in SJ AUTO SLIDE !

But there was no bug in auto slide.

So I looked into the reason

There is a smooth scroll function that I developed myself when I was making UI FR.

This feature has prevented any bugs from occurring.

But if you remove this feature, you'll get a bug.

In other words, it is a clear fact that there is a problem with the scrolling technology currently implemented in the Edge browser.

I think Edge browser will definitely patch this issue when it updates.

If a patch is released, it would be good to keep in mind that you don't have to deal with bugs.

 

For functions like smooth scrolling, you have to create various formulas.

Because it is FR, it is intertwined here and there

I think it would be practically difficult to make it into a class.

 

Still, I hope that the various bug handling patterns will be of some help.

 

thank you :)

Have a nice Lunar New Year holiday :D

 

 

hello :)

 

Here's an update :)

 

1. All classes have been added with additional hands-on practice and explanation of how to create scroll interactions using jquery.

If there are people who find the class difficult, it would be good to first refer to the practical part where you explain while writing code, and then use the explanation part to understand the pattern again.

 

 

2. I found a bug in the section 5-2 section movement interaction . This bug occurred when using the trackpad in the Chrome browser on a MAC environment (the iMac Magic Mouse was fine).

The bug content is

If you use a trackpad or similar to quickly scroll when the section you want to move one space at a time is placed at the top of the browser,

The first section movement animation does not run, but the animation runs after that. (This happens intermittently)

 

After analyzing the bug, we found that in the case of Macs, there is a problem when entering the section to be moved.

Specifies that scroll events will not fire when entering a section.

In other words, we solved this by adding a wheel event, blocking the wheel when entering the section, and branching to prevent the default action for the event from occurring.

 

However, when only the wheel event was used, a bug occurred in the Windows environment.

Why does a bug occur when only the wheel event is used in a Windows environment?

On Windows, the frequency at which mouse wheel events occur is considerably lower than on Mac, so a bug has been introduced that prevents the scroll values from being retrieved properly.

In simple terms, this means that the number of times the scroll event and wheel event are called is different.

 

So, in Windows, we process the code that was previously written as is.

That is, a class will be added that handles branching to use the wheel event on Mac and the scroll event on Windows.

 

Since this bug only occurs in Chrome on Mac and Google can patch it, I will upload a bug fix video without changing the existing class.

(When changing the scroll position with a scroll event during UI implementation, adding motion is a bit tricky.)

 

3. All vanilla js changes are complete .

A class will be added to change the parts that were previously written in jQuery to vanilla js. (This is not a class to create jQuery functions.)

The code was written without considering IE and older browsers.

 

I think even beginners can change the rest of the code on their own, except for sections 5 and 6, because the vanilla js code is so simple to change.

 

The completed code converted to vanilla js will be written in the last step file of each section and uploaded first . (Late January - early February)

 

And I plan to upload the course on how to change to vanilla js in February. (It's so easy that most people probably won't watch it though^.^;) :D

I hope the updated lessons will be helpful to those who are having difficulties.

 

 

Well then, I wish you a happy new year and a happy Seollal holiday.

Thank you :D

hello :)

I'm sending you an email to let you know the update status :)

The most basic and important parts of scroll interaction are sections 2 to 5 !

First of all, I've re-uploaded this part and I think it'll be easier to understand than before!

 

- Update schedule information -

Actually, I have a really bad throat. When I'm tired, it gets inflamed easily and my throat gets sore easily.

So, I had a hard time recording before.

I raised my voice to record with good volume, but there were some awkward parts.

 

This time, I pushed myself too hard to update and got inflammation in my throat. And it was also Lunar New Year.

The practical part of the lesson written previously in jQuery will probably be updated around the end of January. :(

 

And the class that changes to vanilla js is scheduled to be updated in February .

I am sending this email because I think there may be some people who are waiting in a hurry.

We will do our best to create and upload a rich lesson as quickly as possible.

 

thank you :)

 

 

 

 

Hello :) This is Kang Coding.

First of all, I would like to express my sincere gratitude to all the students who took the Scroll Interaction class. ^_^

When I first created scroll interactions, I focused my lessons on understanding the principles .

As time went by, I realized that I could not satisfy all of my students.

So, I left the existing classes as theory.

We added a practical lesson (using jquery) that everyone, even beginners, can learn by following along .

I'm planning to add a class that implements scroll interaction with vanilla SCRIPT without jquery, although it may not be a full section . (If it's not too much, I'll add a vanilla class for all sections)

A total of 2 classes will be added for free .

I feel responsible for the classes I create and will create classes that satisfy all of you.

The update is scheduled to be completed within January , and if there are any special circumstances, it will be finalized in February .

Thank you again and I hope you have a great 2022.

thank you :)

 

 

 

 

hello :)

I hope all of you students are doing well and healthy.

The reason I am contacting you is because the scroll interaction example code has been updated today.

The update contents are as follows.

1. Added Section 10 completion code

2. Added Section 11 completion code

Those who can analyze the code on their own can refer to the completed code.

For those of you who are studying, I recommend completing the missions in Section 10 and Section 11.

Sections 10 and 11 are lessons that were created based on what you learned previously, so I recommend that you try to solve them on your own :)

Thank you :D