쉽고 빠르게 만드는 다양한 이미지 이펙트!

쉽고 빠른 이미지 이펙트 만들기, 다양하게 응용해보세요!

 

강의 미리보기

^{▲ 영상으로 확인하면 수업 내용을 더 자세히 볼 수 있습니다.}

---

💡 강의 소개

수업 포인트 1

흩어져 있던 이미지가 순차적으로 실행되면서 하나의 이미지를 이루는 효과를 만들어 봅니다.

^{▲ 순차적으로 실행되는 이펙트}

수업 포인트 2

개발자 입맛에 맞게 속성을 변경해 더 다양하고 자유로운 이미지 이펙트를 만듭니다.

^{▲ 커스텀 이펙트}

수업 포인트 3

3D 효과를 추가해 조금 더 입체적인 효과도 만들어 봅니다.

^{▲ 3D효과 적용}

수업 포인트 4

위에서 구현한 모든 이펙트를 하나로 묶어 랜덤으로 나타나도록 만들고, 오픈소스 슬릭 슬라이더에 이펙트를 적용해 슬라이드될 때 다양한 이펙트가 랜덤으로 노출되도록 함으로써 더욱 화려하고 몰입도 높은 슬라이더를 만들어 봅니다.

^{▲ 슬라이더에 이펙트 적용}

TIP. 이미지 이펙트를 다양하게 응용하는 방법!

스크롤 인터랙션에 이미지 이펙트를 적용해본다면, 스크롤에 반응해 랜덤으로 나타나는 스크롤UI 이펙트까지 구현할 수 있습니다.

※ 스크롤 UI를 만드는 수업은 해당 강의에 포함되어 있지 않습니다.

▶스크롤 인터렉션 강의 바로가기

---

💡 강의 특징

1. 실무에서 사용할 수 있는 다양한 이미지 이펙트를 만듭니다.
2. 빠르고 간단한 수정으로 약 15개의 이펙트를 만듭니다.
   여러분만의 아이디어를 덧붙여 응용해본다면 100개 이상의 다양한 이펙트도 만들 수 있을 거라 생각합니다 :D
3. 코드의 양을 최대한 줄이려고 노력했습니다.
   코드가 너무 길어지면 배우기도 힘들고 습득하는데도 시간이 오래 걸리죠? 최대한 짧고 간결하게 만들려고 노력했습니다.
4. 잡담을 최소화합니다.
   여러분의 시간은 소중하니까요! 불필요한 설명, 잡담 등은 과감히 버렸습니다.
5. 예제코드 줌인/줌아웃 편집
   예제코드 줌인 편집으로 모바일 기기에서도 코드를 알아보기 쉽게 만들었습니다. 등교길, 출근길에 잠깐씩 시간을 투자해보세요 :D

---

💡 알려드립니다

사용한 언어 및 라이브러리

• CSS, JavaScript(자바스크립트), jQuery(제이쿼리)

크로스 브라우징

 

• 시스템과 브라우저에 따라 약간의 차이가 있을 수 있습니다.

수업 난이도

• CSS 및 JavaScript의 기본기가 있어야 원활하게 강의를 진행할 수 있습니다. (초급 이상)

 

응용해보세요!

• 수업 내용을 응용한다면 수강생 여러분만의 독창적인 이펙트를 만들 수 있을 것입니다.

---

💡 예상 질문 Q&A

Q. 비전공자도 들을 수 있나요?
A. 전공자/비전공자 상관없이 CSS, JavaScript의 기본기를 안다면 충분히 학습하고 활용할 수 있습니다.

---

💡 지난 강의 함께 보기