Animate and switch titles with CSS

An engaging landing page can be the difference between a visitor staying or leaving a website, and the site hassyadai.com offers a great example of how to keep visitors with you. It introduces two characters, and the titles change on hover, depending on what is selected. This is the technique explored in this tutorial. 

Get the tutorial files for this tutorial

01. Get started

To recreate the text switching as seen on the homepage of Hassyadai, there will be a basic HTML layout that has been created in the ‘start’ folder of the tutorial files. To make the images get larger on rollover, two classes will create that transition.

.grow {
transition: all .7s ease-in-out;
}
.makeGrow {
transform: scale(1.3);
}

02. Show the text

To show the text the ‘hidden’ class will be dynamically switched in and out on the text elements. This just has no opacity. Because of the transition on the text elements, the opacity will fade in and out.

.hidden {
opacity: 0;
}
#main,
#leftText,
#rightText {
transition: all .7s ease-in-out;
}

03. Make it work

The functionality of this will all be controlled through JavaScript. Here the code is added to script tags at the bottom of the page. The code is referencing all the elements on the page that need to be controlled so that they are cached in variables.

var over = false;
var middle = window.innerWidth / 2;
var grid = document.getElementById(“grid”);
var main = document.getElementById(“main”);
var leftImg = document.
getElementById(“leftImg”);
var rightImg = document.
getElementById(“rightImg”);
var leftText = document.
getElementById(“leftText”);
var rightText = document.
getElementById(“rightText”);

04. Grab the mouse

In order to make this work, the mouse position is needed. The overall container object is grabbed just to see if the mouse is over it or not. As there are many sub elements that are visible or not, these will interfere with just doing a rollover test on individual elements.

grid.onmouseover = function() {
main.classList.add(“hidden”);
over = true;
}
grid.onmouseout = function() {
main.classList.remove(“hidden”);
over = false;
}
document.onmousemove = function() {
var x = event.clientX;

05. Left or right

Once over the container, the mouse is checked to see which side it’s on. If it’s the left, then the text over there is faded onto the screen and the image is scaled up to make this the most obvious.

if (over == true) {
if (x < middle) {
leftImg.classList.add(“makeGrow”);
leftText.classList.remove(“hidden”);
rightImg.classList.remove(“makeGrow”);
rightText.classList.add(“hidden”);
} else {
leftImg.classList.remove(“makeGrow”);
leftText.classList.add(“hidden”);

06. Over and out

The last part of the code is to restore everything to normal in the ‘else’ statement shown here. This restores the text to be invisible and the images to be their regular size if the mouse is not over the container.

rightImg.classList.add(“makeGrow”);
rightText.classList.remove(“hidden”);
}
} else {
leftImg.classList.remove(“makeGrow”);
leftText.classList.add(“hidden”);
rightImg.classList.remove(“makeGrow”);
rightText.classList.add(“hidden”);
}
}

This article was originally published in Web Designer. Subscribe here.

Learn more about user experience

When introducing engaging CSS effects to a page,  you need to be thinking of the user experience. Freelance front-end UI developer Sara Soueidan will be revealing more on this in her Using CSS (and SVG) for the Good of UX talk at Generate London 2018. 

She will show a wide range of possibilities that CSS  offers to improve the overall user experience of your UI, using  CSS (with sprinkles of SVG and JS here and there).

Make sure you don't miss out. Get your ticket now.

Related articles:

• 5 tips for super-fast CSS
• Understanding the CSS display property
• CSS tricks to revolutionise your web layouts