1. Create a new full height section and drop in an Icon Element.
- Choose the icon “circle-thin”
- Set it’s size to 600px
- Give it two css classes “sphere one”
- Set custom positioning to “absolute”
- Set the horizontal left offset to -3px and vertical top offset to 150px
3. Copy the Icon Element. and paste a second version, slightly modifying it from the first.
- Change it’s css classes from “one” to “two” keeping “the “sphere” class
- Change it’s “Absolute” positioning to 3px horizontal and 147px vertical
4. Adjust the custom css colors from purple to teal:
5. Copy the Icon Element again and paste a third version, slightly modifying it from the first two.
- Change it’s css classes from “two” to “three” again keeping “the “sphere” class
- Change it’s “Absolute” positioning to -3px horizontal and 147px vertical
6. Adjust the custom css colors again from teal to orange:
7. Copy the Icon Element again and paste a fourth and final version, slightly modifying it from the first three.
- Change it’s icon to the full circle
- Change it’s css classes from “three” to “four” again keeping the “sphere” class
- Change it’s “Absolute” positioning to 0px horizontal and 170px vertical
8. Adjust the custom css colors again from rgba(40,40,39,0.7) to rgba(40,40,39,1):
9. Now let’s create the first animation loop which will rotate the spheres. I typically paste this in the containing section’s custom css area:
10. In the same custom css area, let’s create our second animation loop which will fade-in and fade-out each sphere based on a timer we will set in the next step:
11. Lastly, let’s give each of the sphere’s their own staggered animation delays so they each appear to equally fade in/out while rotating. We do this by giving values divisible by 3 because we have 3 colored spheres.
For example, we’ll set our 360 degree rotator animation loop to 3 seconds total. We’ll start the first sphere immediately, the second after 1 second and the 3rd after 2 seconds. This way each will have a 1 second offset.
Next we ensure the fader animation loop is also divisible by 3 setting it’s loop timer to 6 seconds total. Setting the first sphere’s delay to 0 seconds starting it immediately, the second sphere after 2 seconds and the 3rd after 4 seconds. Again each having an equal offset of 2 seconds.
The fourth icon again just stays put and acts like a partial mask to give a nice effect when the other sphere’s rotate.
The final touch is adding a slight offset to the transform-origin property.
12. Create an H2 Heading Element , I chose the Roboto font wrapping the “Logo” part in <span> </span> tags.
- set Color to white
- Font size is 150px
- Font weight 100
- add some top margin i.e. 100px