How To Create A Modern Scroll Down Animation Icon With CSS

In this tutorial, we are going to show you how to create a modern scroll down animation which you can easily add to any website.

These types of animations are typically used on websites that have a full-screen header in which you add an animated element to demonstrate that there is more content on the website if you scroll down.

You can have a look at how this animation works on this CodePen we created.

In a previous article, we created a different type of animation, if you want to check that one out then click here.

So let’s begin with this tutorial; for this we just need to add the following HTML and CSS code:


<div id="scroll-wrapper">
  <div id="scroll-wrapper-inner">
    <div id="scroll-title">Scroll</div>
    <div id="scroll-down"></div>
  </div>
</div>

body {
  background: #20232c;
}

#scroll-wrapper {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    z-index: 9;
    pointer-events: none;
    left: -30%;
}

#scroll-wrapper-inner {
    display: table-cell;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
}

#scroll-down {
    display: block;
    position: relative;
    padding-top: 79px;
    text-align: center;
}

#scroll-title {
    display: block;
    text-transform: uppercase;
    color: #FFF;
    font-family: "Courier-Prime", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-align: center;
    transform: rotate(90deg);
    margin-bottom: 45px;
}
#scroll-down::before {
    -webkit-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    -moz-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    -o-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 90px;
    background: #FFF;
    content: ' ';
}
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

And it’s as simple as that!

With this example, we are centring the scroll down animation. If you want to quickly move the position of this we can add left positioning to the #scroll-wrapper element with either a negative or positive percentage value (depending on where you want this displaying).

We hope you enjoyed this tutorial if you need any help implementing; drop us a comment below!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Create a Floating Animation using CSS

If you are looking to create a floating animation just using CSS, then you are in the right place.

Alternatively, you can visit the CodePen to see the animation in action.

In our example, the key things we need to add are:

transition property to move the element smoothly, over a given duration
@keyframes property which specifies the animation code
animation property which applies an animation between styles
transform property which allows you to move, rotate, scale, and skew elements

In our example, we are using transform: translate([value]); to move the element up and down.

The Code

HTML


<div class="container">
  <div class="logo">
    <a href="https://silvawebdesigns.com/">
      <img src="https://silvawebdesigns.com/silva-circle.png" alt="Silva Web Designs" />
    </a>
  </div>
  <div class="content">
    <h1>Floating CSS Animation</h1>
    <p>Follow Silva Web Designs:</p>
    <p>
      <span><a href="https://twitter.com/silvawebdesigns" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a></span>
      <span><a href="http://instagram.com/silvawebdesigns" target="_blank" rel="noopener noreferrer"><i class="fa fa-instagram"></i></a></span>
      <span><a href="https://www.linkedin.com/company/silvawebdesigns" target="_blank" rel="noopener noreferrer"><i class="fa fa-linkedin"></i></a></span>
    </p>
  </div>
</div>

CSS


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,[email protected],500;0,600;1,300&display=swap');

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
	background: rgb(71, 71, 181);
	background: -moz-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 181, 1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 181, 1) 100%);
	background: linear-gradient(135deg, rgba(26, 188, 156, 1) 0%, rgba(71, 71, 182, 1) 100%);  
  font-weight: 600;
}

h1 {
  font-size: 24px;
  margin: 10px 0 20px 0;
  text-transform: uppercase;
  color: #FFF;
}

p {
  font-size: 16px;
  color: #FFF;
}

span a {
  font-size: 18px;
  color: #FFF;
  text-decoration: none;
  margin: 0 10px;
  transition: all 0.4s ease-in-out;
}

span a:hover {
  color: #FFF;
}

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 150px;
  height: 150px;
  box-sizing: border-box;
  border: 5px #20232c solid;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;
}

.logo img {
  width: 100%;
  height: auto;
}

.content {
  width: 100%;
  max-width: 600px;
  padding: 20px 40px;
  box-sizing: border-box;
  text-align: center;
}

.fa {
  font-size: 38px;
  margin-top: 20px;
}

And there you have it! A nice, smooth floating animation made purely in CSS. If you need any help, just give us a shout!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Create a 3D Flip Box using CSS

How you ever wanted to create a 3D Flip Box? Well, you are in the right place. This is basically a div which flips when you hover over a certain element and can be achieved using CSS alone. You can use JavaScript and jQuery, but if you can use just CSS alone, it’s always better right? We’re not a ‘huge’ fan of the effect in 2020 but I guess it’s always down to personal preference really. I guess it’s good if you want to compress the amount of information you have on the page as you can add whatever content you want on the front and back of these flip elements. So let’s get started…

How To Create a Flip Box

You can view this effect on CodePen by clicking here.

So firstly, add your HTML markup:


<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <h2>Front Side</h2>
    </div>
    <div class="flip-box-back">
      <h2>Back Side</h2>
    </div>
  </div>
</div>

Now, we just need to add the following CSS:


* {
  font-family: 'Arial', sans-serif;
}

/* The Container for Flip Box - Set the width and height to whatever you want. */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style the front side */
.flip-box-front {
  background-color: #e1e1e1;
  color: #000;
}

/* Style the back side */
.flip-box-back {
  background-color: #20232c;
  color: #FFF;
  transform: rotateY(180deg);
}

Note: We added flex positioning to these elements; .flip-box-front, .flip-box-back to center the content within the box. Remove the following attributes if you want the content to be displayed from the top; display: flex;, align-items: center; and justify-content: center;

Now, let’s take this one step further, fancy doing a vertical flip instead? Then check the below.

How To Create a Vertical Flip Box

To do a vertical flip instead of a horizontal, all we need to do is use rotateX method instead of rotateY as follows:


.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-back {
  transform: rotateX(180deg);
}

Again, you can check out the CodePen example by clicking here.

And that’s it, flippin’ simple right?

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Transform a Rotated Element That is Fixed to the Sidebar

Have you ever wanted to have a fixed element on the sidebar, whether it be on the left or right side of the page. It’s pretty simple to do but when you rotate the element, you might notice that the positioning goes away from the sidebar.

Here is an example of the kind of thing I’m talking about here:

You see the ‘Book a free consultation’ text? That’s what we’re talking about here…

How to create a fixed rotated left sidebar element

So let’s say we have the following HTML:-


<div id="left-sidebar">
  <h6>
    LEFT SIDEBAR
  </h6>
</div>

To make this fixed to the left position and vertically centred regardless of the width and height of the element, we can do the following:


#left-sidebar {
  position: fixed;
  display: block;
  background: #ae77b3;
  top: 50%;
  left: 0;
  padding: 10px 20px;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left top;
  color: #FFF;
  letter-spacing: 2px;
}

The key thing to get the positioning correct (fixed to the sidebar) is the transform-origin property. Since it’s a left aligned sidebar we are using ‘left top’, this will remove the gap when you do the rotation. What keeps the element centred on the page regardless of the width is the transform property. You can see we added ‘translateX(-50%)’, this is what is correcting this issue. Pretty neat huh?

How to create a fixed rotated right sidebar element

This one is similar to the left sidebar, we just change a couple of values here…

So now we have the following HTML:


<div id="right-sidebar">
  <h6>
    RIGHT SIDEBAR
  </h6>
</div>

and here is the CSS to go with it:


#right-sidebar {
  position: fixed;
  display: block;
  background: #ae77b3;
  top: 50%;
  right: 0;
  padding: 10px 20px;
  transform: rotate(-270deg) translateX(50%);
  transform-origin: right top;
  color: #FFF;
  letter-spacing: 2px;
}

You will see we made two changes here… Since it is right-aligned now, we change the transform property and the transform-origin. We rotated it the other way around using -270deg and made transforms 50% instead of -50%. With the origin, we simply changed it from left top to right top. Pretty straight forward right?

If you want to check out the JSFiddle for the above example click here.

Well, that wraps up today’s tutorial, we hope this helps you! As always, if you have any queries then simply drop us a comment below.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share