강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Publishing

html - SVG scroll animation effects - 15 drawings presented for special portfolios

Using svg, draw simple images and apply them to your site. If applied to a portfolio, it will become a standout page.

21 learners are taking this course

  • dunopi
HTML/CSS
JavaScript

What you will learn!

  • svg animation

  • Scroll animation

In this lesson, you will learn how to create an animation of a boat moving naturally along a river path using SVG and CSS. The technical principle is to use a simple principle of calculating the total length of path and controlling the movement using stroke-dasharray and stroke-dashoffset properties. The key is that through this process, you will implement advanced web content that combines design and interaction , rather than simple images.


The important point here is that using these SVG animations will significantly improve the quality of your portfolio. In particular, companies and clients these days value dynamic screen compositions that can attract the user's attention more than simple static designs, and the ability to interpret web technology in a design-oriented way.

Through this internship, you will gain experience in controlling everything from background design to interactive elements and character movements. If you include this result in your portfolio, you can expect the following effects:


Differentiation from simple static web design
Most applicants build their portfolios around static images, Figma drafts, and HTML structures. But by showing real-time interactions using SVG and CSS, like this animation, you can highlight how your designs actually come to life.


Simultaneously appeals to both coding ability and design sense
Beyond just pretty design, emphasizing that you wrote the code yourself to implement the interactions will give you the image of a “designer who is good at code.” This is a strong competitive edge in both front-end and web design positions.


Demonstrate practical skills that can be applied to projects
A boat moving along a river, a production combining various icons, is a skill that can be applied directly to practical work such as corporate websites, product promotions, event pages, and game design. If you present results that can be practically used, rather than simply a portfolio work, you can also appeal to your practical adaptability.


Create a unique and memorable portfolio
While many applicants’ portfolios have similar, formulaic compositions, you can make a strong impression on the interviewer by adding your own animated elements. In particular, the scene of a boat moving naturally along a river is simple, yet visually impactful.

Through this course, you will go beyond simple technical implementation and improve the completeness of your portfolio, and create differentiated results with competitiveness. 🌊 🚤



This is a lecture on drawing various SVG images and applying them to animation.
Uses HTML/CSS and JavaScript.

Recommended for
these people

Who is this course right for?

  • SVG animation: First time or tried?

  • Those who wish to apply to their portfolio

  • Those who wish to apply directly in practice

Need to know before starting?

  • html basics, JavaScript or jQuery basics

Hello
This is

1,261

Learners

16

Reviews

24

Answers

5.0

Rating

9

Courses

웹디자인기능사 실기

전국 평균 합격률 60%에

우리반은 90% 합격중이지용~용용~

Curriculum

All

11 lectures ∙ (2hr 7min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Limited time deal ends in 1 days

$328,836.00

8%

$13.20

dunopi's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!