Intro Page with Text Animation Using Sass

ScreenCapture_18-05-23_03.20.16.gif

Repository

https://github.com/sass/sass

What Will I Learn?

You will learn how to use inherit function from body.
You will learn why we use display: inline-block code.
You will learn how to define only blur effect with text-shadow: 0px 0px 25px
You will learn how to use keyframes function and transition between percent of duration.
You will learn how to disappear and appear a text.

Requirements

Any text editor. (Brackets, Atom, Notepad++)
Basic HTML knowledge
Basic SCSS code knowledge
SASS installed.
Local server (Wampserver)
Any browser

Resources

Difficulty

Intermediate

Description

In this tutorial we will create with sass scss an animated text effect that works as infinite. This effect can be used on intro pages or somewhere in your web pages. If you follow this tutorial download all files from my github page and change your texts or color etc. Try to play with effects that are already defined so that you can learn better. You can use comment mark(/*between this marks*/) to deactivate and test it. With this way it will be more useful for you and you will understand the codes better.

1- Before you start be sure that you run our sass code in the directory of site files. Our command is sass --watch sass:css. It will translate all codes that you write in scss file to css file. After that, write a basic html file on root directory as index.html and define there a division and also 4 more divisions into first division. Don't forget to give css file path as stylesheet.

2- We start to define a body style and we will use this styles on whole page as inherit. Also our header will be styled. Here important part is defining only a blur effect on the text as 25px black.

3- Now we can start to style our textrotate (first division). Here we give some value as width and height. After aligning to left we make it inline-block.

4- Now we can write codes for our other classes. We will write one style and apply to all classes starts with dot and to apply all just separate them with commas. They will not have a font-size and opacity will be 0. It means they will not appear till i define it on my animation an inherit font size. With making its outside left space -70px we are creating a starting point for our effect. Other codes are its position and a normal font weight with 400. Here we are creating a shadow on vertical as position 30px and it has blur effect. With rgba we are defining a special shadow color.

5- Now we will write an appear animation to our c1, c2, c3, and c4 classes. We write them separately this time because even they will have the same animation, their starting time will be different. With animation code, first we give here a name for it and its here as appear. Second value is here the duration, direction will be linear. And it will start over and over again with infinite. And last one will define the starting time.

6- With @keyframe we are defining the actions of our animation. With specifying the percentages we tell to the codes what will happen between these. For example it will start as -25deg rotated till 3%. and till 5% it will take his font-size from body section with inherit. There is also a disappearing effect with defining font-size back to 0px with opacity.

7- To give the finishing effect on last word we are defining the same animation with different name to c4 class and on disappearing part we are making its size bigger.