Use the power of JavaScript and CSS to create a subtle but engaging fade in/out effect.
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.
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.
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.
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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
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.
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).
Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto, Canada. Highlights from Mark's extensive industry practice include a top four (worldwide) downloaded game for the UK launch of the iPhone in December 2007. Mark created the title sequence for the BBC’s coverage of the African Cup of Nations. He has also exhibited an interactive art installation 'Tracier' at the Kube Gallery and has created numerous websites, apps, games and motion graphics work.
