跳到主要内容

使用CSS动画和切换标题

Animate titles with CSS

+$An Engaging登陆页面+$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.开始吧

+$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.在这里订阅

+$Learn more about user experience

Generate London 2018 speakers

+$Generate London 2018 has a host of top-class speakers. Don't miss them

+$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生成伦敦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).

确保你不要错过。立即获取您的机票

相关文章:



翻译字数超限