CSS falling banner to make an offer

CSS falling banner is used to get the attention of a user and to make an offer. It is intended for the purposes of new offers in food, advertising type websites.

Example

Always add -webkit- to the properties such as transform, animation, transition, @keyframes and perspectives otherwise these properties don't work in safari.

calsses

We complete the project step by step.

.falling-banner

.falling-banner class represents the falling-banner.

Example

<style>
.falling-banner{
 position:absolute;
 top:100px;
 width:250px;
 height:150px;
 background-color:lightblue;  
 animation:fallingBanner 1s 1;
}
</style>
Try </>

position:absolute; positions the .falling-banner with respect to the parent element.

animation property defines the animation of the falling banner.

The name of animation is fallingBanner. The duration of animation is 1s and it occurs only once.

keyframe rule for fallingBanner animation

The following is a keyframe rule that represents different properties at the start and end of the animation.

Example

<style>
@keyframes fallingBanner{
0%{
 top:-300px;
 animation-timing-function:ease-in;
}
100%{
 top:100px;
}
}
</style>
Try </>

At the start of animation, the banner can't be seen. Bacause it is -300px above the top side of page.

At the end of animation, it is 200px below the top side of page.

The banner falls smoothly because of animation-timing-function:ease-in; property.

.perspective-container

It is the area that makes sure the 3-d nature of the child elements. .perspective-container class represents the perspective area.

Example

<style>
.perspective-container{
 width:100%;
 height:100%;
 background-color:rgb(210,210,210);
 border-radius:10px;
 perspective: 400px;
}
</style>
Try </>

width and height properties should be set to 100%.

perspective property is necessary to rotate the child elements in a 3-d manner.

vibrating-box

This element is the child of the perspective-container element. Its class name is .vibrating-box.

Example

<style>
.vibrating-box{
 width:100%;
 height:100%;
 background-color:red;
 color:white;
 border-radius:10px;
 transform:rotateX(0deg);
 transform-origin:top;
 animation:vibratingBox 2s 1;
 animation-delay:1s;
 box-shadow:7px 7px 5px 0px rgba(210,210,210,1);
}
</style>
Try </>

transform property rotates the banner around the x-axis. The x-axis is from left to right in this page.
transform-origin represents the point to move around.
animation rotates the banner to and fro around the x-axis.
2s is the animation-duration. 1 means animation property should occur only once.
animation-delay delays it by one second. Because the first animation (fallingBanner) occurs in one second.

keyframe rule for vibratingBox animation

The animation-duration is divided into 8 sub-intervals. The difference between two sub-intervals is 12.5%.

Example

<style>
@keyframes vibratingBox{
0%{
 transform:rotateX(50deg); /* after falling the banner covers 50 degree around x-axis */ 
}
12.5%{
 transform:rotateX(0deg); /* back to the original position */
}
25%{
 transform:rotateX(37.5deg); /* 37.5 = 50-50*0.25 */
}
37.5%{
 transform:rotateX(0deg); /* back to the original position */
}
50%{
 transform:rotateX(28.12deg); /* 28.12 = 50-50*0.25*0.25 */
}
62.5%{
 transform:rotateX(0deg); /* back to the original position */
}
75%{
 transform:rotateX(21deg);  /* 21 = 50-50*0.25*0.25*0.25 */
 animation-timing-function:ease-in;
}
100%{
 transform:rotateX(0deg);
}

}

</style>
Try </>

The name of animation is vibrating-box.

The value of transform property changes in every sub-interval.

.string

Example

<style>
.string{
 display:block; 
 width:10%;
 height:10%;
 border-top-left-radius:50%;
 border-top-right-radius:50%;
 border:2px solid red;
 margin:auto;
 border-bottom:none;
}
</style>
Try </>

.nail

Firsly, we'll make a nail to hang on the falling banner. We define .nail class for the nail.

Example

<style>
.nail{
 width:15px;
 height:15px;
 border-radius:50%;
 background-color:black;
 box-shadow:1px 1px 2px 0px rgba(200,200,200,0.5);
 position:absolute;
 top:100px;
 left:128px;
 z-index:1000;
}
</style>
Try </>

position:absolute; property must be used to define the position of the nail.
box-shadow represents the shadow of the nail.
The position of the nail is set in such a way that the string of falling banner hangs on the nail.

.message-box

It is the child of the .vibrating-box and contains the text.

Example

<style>
.message-box{
 width:95%;
 height:92%;
 position:absolute;
 left:2%;
 top:3%;
 border:1px dashed yellow;
 border-radius:10px;
 color:yellow;
}
</style>
Try </>