강의

멘토링

커뮤니티

Programming

/

Front-end

Create a variety of image effects quickly and easily!

We will create various pattern image effects that complete the scattered image pieces into one image using JavaScript and CSS and process them to appear randomly. I think that if you apply this lesson, you will be able to create your own unique effects!

(5.0) 11 reviews

158 learners

Level Basic

Course period Unlimited

  • ggangcoding162118
JavaScript
JavaScript
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
jQuery
jQuery
JavaScript
JavaScript
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
jQuery
jQuery

Reviews from Early Learners

Reviews from Early Learners

5.0

5.0

foxball

64% enrolled

Teacher, please tell me how to apply it in swiper.js. I'm struggling for a while. ㅠㅠ

5.0

Glacier

100% enrolled

It was a lecture that I could apply briefly. Thank you.

5.0

기쁜 도미

100% enrolled

Gave birth to.

What you will gain after the course

  • We will implement various image effects using JavaScript and CSS, combine the implemented effects into one, process them to appear randomly, create a function, and apply it to the UI to create highly immersive interactions.

  • Development of an effect that brings scattered images together to form a single image

  • Creating a website with a unique UI

Create easy and fast image effects and apply them in various ways!

Lecture Preview

▲ You can see the class content in more detail by watching the video.


💡 Course Introduction

Lesson Point 1

Let's create an effect where scattered images are executed sequentially to form a single image .

▲ Effects that run sequentially

Lesson Point 2

Create more diverse and free image effects by changing the properties to suit the developer's taste.

▲ Custom effects

Lesson Point 3

Let's add a 3D effect to make it a little more three-dimensional .

▲ 3D effect applied

Lesson Point 4

Let's create a more splendid and immersive slider by combining all the effects implemented above into one and making them appear randomly , and applying the effects to the open source slick slider so that various effects are randomly exposed when the slider is slid.

▲ Applying effects to the slider

TIP. How to apply image effects in various ways!

If you apply image effects to scroll interactions, you can even implement scroll UI effects that appear randomly in response to scrolling.

※ The class on creating a scroll UI is not included in this lecture.

▶Go to Scroll Interaction Lecture


💡 Course Features

  1. Create a variety of image effects that can be used in practice.
  2. Create about 15 effects with quick and simple modifications.
    I think you could create over 100 different effects if you add your own ideas and apply them :D
  3. I tried to reduce the amount of code as much as possible .
    If the code is too long, it's difficult to learn and takes a long time to master, right? I tried to make it as short and concise as possible.
  4. Minimize small talk.
    Because your time is precious! We've boldly eliminated unnecessary explanations, small talk, and the like.
  5. Edit sample code zoom in/out
    Zoom-in editing of example code makes it easier to understand even on mobile devices. Take a moment to invest in this on your commute to school or work!

💡 Please be informed

Languages and libraries used

  • CSS, JavaScript, jQuery

Cross-browser compatibility

  • There may be slight differences depending on your system and browser.

Class Difficulty

  • You should have a basic understanding of CSS and JavaScript to follow the course smoothly. (Beginner level or higher)

Try it out!

  • By applying the course content, students will be able to create their own unique effects.

💡 Expected Questions Q&A

Q. Can non-majors also take the course?
A. Regardless of whether you are a major or non-major, if you know the basics of CSS and JavaScript, you can learn and utilize them sufficiently.


💡 Watch the previous lecture together

Apple Scroll Interactions Even Beginners Can Create. Part 1: JavaScript
Learn various motion effects required for scroll interactions.

Recommended for
these people

Who is this course right for?

  • People interested in UI/UX

  • For those interested in motion effects

  • People interested in creative and unique homepages

  • Job seekers who want to create a special portfolio

  • Designers but interested in interaction

  • For those who want to increase their salary by adding interaction skills!

Need to know before starting?

  • HTML, CSS, JavaScript

Hello
This is

1,345

Learners

79

Reviews

163

Answers

4.7

Rating

3

Courses

Hello. I'm Kkang-Coding, a former back-end developer who transitioned to front-end development and is now deeply passionate about UI development. :)

I started this course to share the UI/UX production techniques and know-how I've gained over the past 10 years while building numerous corporate websites, shopping malls, and SI websites for small business owners.

I started this course to share the UI/UX production techniques and know-how I’ve gained over the past 10 years while building numerous corporate websites, SI shopping malls, and websites for small business owners. I have experience working on projects for various major corporations in Korea and have also run a website development business focused on small business owners.

I occasionally shared Apple-inspired and original interactions I made as a hobby on domestic coding communities to introduce interesting techniques, and thanks to the interest of many people,

I used to occasionally share Apple-style interactions and original creative interactions I made as a hobby on domestic coding communities to introduce interesting techniques.

Thanks to the great interest from so many people, I have come to create this course.

The course I am creating will focus on standard browser compatibility and practical techniques for crafting a wide variety of stunning interactions and motion graphics that will leave people in awe.

The courses I will be creating will teach you how to produce a variety of stunning interactions and motion graphics that are cross-browser compatible, practical for real-world use, and truly impressive. I also plan to create courses that enable front-end developers and web publishers to build websites and shopping malls from scratch using various solutions.

See you in class :)

I'll see you in class :)

Curriculum

All

11 lectures ∙ (1hr 41min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

11 reviews

5.0

11 reviews

  • kbba785883님의 프로필 이미지
    kbba785883

    Reviews 33

    Average Rating 4.8

    5

    64% enrolled

    Teacher, please tell me how to apply it in swiper.js. I'm struggling for a while. ㅠㅠ

    • ggangcoding162118
      Instructor

      Hello, thank you for your valuable review. :) It's the same when applied to Swiper js~! const swiper = new Swiper('.swiper-container', { effect: 'fade', speed: 0, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, on: { slideChange: function () { var thisSlide = $('.swiper-container').find('.swiper-slide').eq(this.activeIndex); ggangImgEffect(thisSlide, this.activeIndex); } } }); You can use the slideChange callback function that is called when the slide changes like this. :)

  • glaciershard2755님의 프로필 이미지
    glaciershard2755

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

    It was a lecture that I could apply briefly. Thank you.

  • rje2875734264님의 프로필 이미지
    rje2875734264

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

    Gave birth to.

  • ejjung3127219님의 프로필 이미지
    ejjung3127219

    Reviews 13

    Average Rating 4.9

    5

    100% enrolled

    Good, good, this is a really good lecture.

  • sprout0719002828님의 프로필 이미지
    sprout0719002828

    Reviews 6

    Average Rating 4.7

    5

    100% enrolled

    This is a great lecture full of great tips despite the short time! I will use it in various ways:D

    • Hello! I would be more than happy if you could use the tips in various ways :) Thank you for your valuable review :)

$18.70

ggangcoding162118's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!