Scroll interaction that even beginners can create. Part 1 JavaScript

Class Update Notice

Hello, this is Kang Coding. The class has been updated.

1. In addition to the currently produced core explanation-focused classes to help with understanding , classes that explain while writing JavaScript have been added.

2. A class on changing code created with JQUERY to VanillaJS has been added.

3. Section 12 Bonus Class added.

4. Added Section 12 Bonus Example . ^__^*

UI scroll interaction that makes it fun!

Preview video of the entire lecture

Recent work projects

💡 Course Introduction

Hello, some of the basic principles of scroll-related UI and motions on the Kang Coding YouTube channel are included in this class. There are various interactions on the Kang Coding channel, so check them out :D

PS. This class was created based on beginners' standards! Beginners may find the class a little difficult. :)

Section 2-1

This is to find the scroll percentage .
By the time you've finished reading the text on the left side of the screen, you'll notice that the gauge is fully filled.

^{▲ Gauge bar that rises as you scroll}

Section 2-2

In Section 2, we will learn about the infinite scroll principle used by Naver, Google, etc.

^{▲ Infinite scroll}

Section 3

Section 3 covers basic transitions, transforms, and vendor prefixes for beginners.
We'll also learn about CSS Animations and transition acceleration.

^{▲ Transform, Transition & CSS Animation}

Section 4

In Section 4, we will use the basic scrolling principles and CSS Animation that we learned earlier to create a simple parallax effect and learn about an animation effect that changes at a specific point in the scroll .

^{▲ Parallax Scrolling Animation}

Section 5

In Section 5, you will learn about interactions that move up and down the screen size when scrolling up and down.
We will also implement a multiple parallax effect by applying the CSS Animation and parallax effect that we learned earlier.

( The interaction of moving up and down according to the screen size does not work properly when the smooth scrolling function is turned on in the Edge browser . This function is an option provided by the browser, and it works properly when the smooth scrolling function is turned off . In the class, we will check the Edge browser and learn how to prevent the function from working in Edge. )

^{▲ Multi Parallax Scrolling}

Section 6

In section 6, we will learn how to create five CSS motion effects and a date countdown effect using JavaScript and CSS animations, and how to play the motion we created when we reach the corresponding section location.

^{▲ Various motion effects}

Section 7

In Section 7, you will learn about interactions that anchor and process sections . You will learn about a story interaction where the intro text disappears , a black background door opens, a background image zooms out and appears, and finally the ending text appears.

^{▲ Creating interactions with stories}

Section 8

In Section 8, you will learn how to create interactions by anchoring a product image to the right and matching the image with text content .

^{▲ Create text interactions that match the product image}

Section 9

The example you will learn in Section 9 is a video interaction that anchors content and draws multiple images on a canvas . You will also learn how to handle product descriptions, as shown below.

^{▲ Interaction created by drawing multiple images on a canvas}

Section 10-1

Section 10 has been added . Section 10 UI is a class created based on the basics learned so far and is created with knowledge sharers (3D effects are not supported by IE browsers. They are supported by mobile devices and Chrome, Firefox, Safari, and Opera.)

^{▲ Let's implement a UI with the following three functions by applying the previously learned lectures: activating navigation that responds to the section position when scrolling, changing title text to match the section title, and changing text color for each section.}

Section 10-2

Let 's create a 3D model using CSS and implement it so that it transforms when scrolling . Doesn't it look like a commercial?

^{▲ Create a 3D model using CSS}

Section 10-3

Let's create a 3D object by applying an image to the 3D model learned earlier and implement it to move with a more three-dimensional feel when scrolling.

^{▲ Implement basic 3D effects without using video or a large number of images}

Section 10-4

Apply each section image to the 3D model learned earlier and process it to change it to an image that fits the section.

If you apply the following effects, you can implement a 3D object that changes by section, right ??

^{▲ Matching section images and 3D model images}

By modifying one value, you can create a four-dimensional space effect and even a line effect like this!

^{▲ Is this even possible by modifying one value?? :D}

PS. The interactions in Section 10 are not clones, but rather interactions created from the ideas of knowledge sharers .

Section 10-5 Challenges

This class is a challenge class that customizes the previously created Section 10 example.

Mission 1. Separate functions that should be executed once when entering a section from functions that should be executed continuously.

Please refer to the video lesson when you need help :D

Section 10-6 Challenges

This class is a challenge class that customizes the previously created Section 10 example.

▲ Let’s implement a UI that introduces the product in detail.

Mission 1. Add a black dim to the first section and make the background color appear slowly when scrolling.

Mission 2. Make your phone rotate when you reach sections 2-4.

Challenge yourself to make it and check out the video tutorial if you need help!

Section 11

Section 11 is an interaction created with SVG and video.

Using the scroll formula learned earlier, we will create an interaction where SVG lines are drawn and a video appears when scrolling very easily.

▲ Interaction using SVG and video

Section 12 - Add Bonus Classes

Section 12 is an interaction where text appears and disappears.

This interaction is only supported on modern browsers .

▲ Interaction using keyframes learned earlier

Section 12 - Added Bonus Example

Here is a bonus example that I added using the keyframes that I simply learned in Section 12. I hope you can find various ways to apply this example, and since only the CSS was changed a little, there is no class. If you have any difficulties, please leave a question!

This interaction is only supported on modern browsers .

▲ Bonus example 01

▲ Bonus example 02

▲ Bonus example 03

▲ Bonus example 04

▲ Bonus example 05

▲ Bonus example 06

Kang Coding Open Source BONUS UI

PS. Bonus UI that can be used in practice
No lectures, just example code!

^{▲ Canvas circle drawing - interactive site or
This is great for creating simple donut charts.}

^{▲ Image Panorama - Panorama implemented with requestAnimationFrame.
Learn about recursion and the panoramic infinite loop principle.}

^{▲ Image tab - Basic fade effect among the basic ones
Learn about sliding button effects.}

^{▲ I hate modal rattling :(
Fixed the rattling issue when opening a modal and hiding the scrollbar!
How to implement it? Let's study with very easy code.}

It's not a big deal, but it's an open source code that I created and shared with the community for job seekers, new employees, and those who are weak in JavaScript :D (I made it with excitement)

I hope that the above code will be helpful to Inflearn students, so I have attached it as a bonus UI to the lecture example file :D If you look at the example file, it is in the bonus_ui folder, so I hope you make good use of it :)

There is no lecture for BonusUI, but I hope you study it by taking logs and changing codes yourself and try using it. Later, when I have time, I will upload it as a free lecture on YouTube, so if you have difficulty analyzing codes, please refer to YouTube later :D

💡 Course Features

1. There are classes where you explain while writing code, and classes where you explain while reading code.
• There are some overlapping parts between the two classes, but I think it will be more helpful if you use it as a review concept.

2. We will conduct a class to change the parts written in jquery to vanilla js.
• Kill two birds with one stone by learning jQuery and VanillaJS code.

3. We will teach you the know-how to create interactions that are used in practice .
• We explain in great detail how to create interactions that will dramatically increase your salary.

4. Explains so that you can learn even if you don't know JavaScript well .
• The JavaScript part will be explained in as much detail as possible. First, we will introduce the variable declaration part and functions, and then we will explain them one by one in the order in which the program is executed. This will allow you to acquire the skill by just memorizing the patterns that appear in the lecture.

5. Learning centered on applied examples
• I tried to make a lecture that will stay in your head, not a lecture that you just watch and finish, by applying repetitive patterns and creating various examples. I hope you can understand and use it more easily. :)

6. I will explain it as simply as possible .
• When I first started programming, I found it very difficult because I didn't understand it. So, knowing the difficulties beginners face... I wrote the code to make it as easy to understand as possible and explained it using easy words.

7. It was made so that it wouldn't be boring .
• It's bound to get boring if there's a little gap in the middle. With tight editing, we'll explain without a break. Just focus for 5 to 15 minutes at a time!

8. I tried to reduce the amount of code as much as possible :)
• If the code is too long, it is difficult to learn and takes a long time to master, right? I tried to make it as short and concise as possible. Your time is precious!

9. I will explain only the key points .
• Your time is precious! We boldly excluded things that “it would be better to know in detail, but you don’t need to know right now.”

10. Minimize small talk .
• Your time is precious! We have boldly eliminated small talk and unnecessary explanations.

11. Zoom in and out of the example code.
• We made it easy to read the code on mobile devices by zooming in on the example code and editing it. Invest a little time on your way to school or work :D

💡 Please be informed

• It uses JAVASCRIPT ES5 syntax and JQUERY . (In vanilla, ES6 is also used.)
• Rather than blindly following along and trying to finish it, even if you don't understand all the content of the class right away because you still lack the basics, it would be good to take some time, modify the code, apply it, and create your own code.
• Sometimes beginners post questions! Programming may seem unfamiliar at first, but if you keep looking at it like Hangul, you will get used to it and the code will start to catch your eye without you even realizing it! :) Of course, I took beginners into consideration and excluded difficult grammar from the code to make it as easy as possible.
• Rather than thinking, "Let's just look at it hastily and finish it," and "Let's just make it and finish it !", I think that if you understand it step by step, modify it, and apply it, you will definitely grow without even realizing it :D
• Scroll Interaction for Beginners Part 1 is designed to help you learn the basics of scroll interaction. If you are intermediate or higher, please wait for Part 2 :D
• I would like to inform those who are intermediate level and want to learn scroll interaction skills by taking this course in advance . This course is explained to help beginners, so if your skill level is intermediate or higher, the course content may be very easy.
• This course was created based on the beginner's level . Beginners should have a solid grasp of the basics of CSS and HTML to proceed with the course smoothly.
• What if you don't have basic html, css, javascript?? I think you can learn it well enough if you just follow along ^^;; But you'll have to watch it over and over again, modify the code, take logs, and make it your own code??
• I provide the source code that I worked hard to create :) (Open source library used - jQuery)
• We also introduce various motions and UI interactions on the Kang Coding YouTube channel (click to go there) . In the future, this channel will provide basic lectures and tips for beginners, as well as the latest IT news, UI, motion interactions, etc.
• Vanilla class only covers sections 2 through 6. The reason is that the jquery patterns in sections 7 through 11 are all covered in sections 2 through 6, so I didn't make a duplicate class. I don't think that's possible, but if you have any difficulties, please leave a question! I'll make an additional class and upload it :)

💡 Expected Questions Q&A

Q. Can you tell me the difficult parts of the class?
Of course I will let you know :D If you leave a question and answer, I will receive an email within 1 to 5 hours. I will check it and reply to you right away. If there is anything you find difficult or are curious about, please be sure to read it and move on!

Q. Can non-majors also take the course?
A. We created this course so that even non-majors can fully utilize it as long as they know the basics of HTML and basic CSS properties such as width, color, and position.

Q. Don't you use jQuery in practice?
A. Most of the websites developed in our country are developed using jQuery, and there are many projects that use jQuery for maintenance or in the field. Also , jQuery is used to manipulate the DOM in front-end frameworks such as React and Vue JS . If you are familiar with Vanilla JS, jQuery is very easy to learn, so it will be very helpful in the field. :)

💡 How to efficiently learn Scroll Interaction Part 1!

first!

Prepare the class example code in advance and study it by comparing it with the lecture video. If you have difficulty understanding the variables and formulas explained in the lecture, press the fuzz button and check with CONSOLE.LOG and move on!

second!

Watch carefully from Section 2 and make sure to understand the principles of scroll interaction! It seems like there are people who are watching the lecture from the middle, but the content of the Scroll Interaction Lecture 1 is applied continuously from Section 2 to 11 and repeated, and it is designed so that you can naturally understand the principles through repeated learning.

Third!

As for the part of testing the code, I recommend that you review it by directly modifying the completed example code and printing logs for variables related to formulas through personal investment of time! (What if you don't know how to print logs?? Feel free to ask!)

Fourth! Good to know!

The reason why the lecture focuses on explaining the code in detail is because when creating a program , it is most important to understand the program execution order and the overall structure of the program .

Once you understand the overall structure and the execution order, you will be able to accurately visualize in your head which part to modify and improve first when customizing the program or when errors occur ! If you develop the habit of visualizing the overall structure of the program, you will begin to gain know-how in creating the program structure without even realizing it :)