俗话说的好,一款产品的成功与否,细节是关键。比如:普通的一句话、一个输入框text、一段文字,有时候可能不会吸引你的注意,如果配上一些交互动画效果呢,是不是会让你有多看一眼or点击的欲望呢,这才是我们的目的。所以我们今天要分享的主题:文本Text的一些交互体验。
最近在项目中做了一些TEXT的交互,拿出三个代表的案例,在这里分享出来供大家学习,也算是notebook。OK,一起看下吧!
产品引导页
产品在维护期间,需要一个提示,引导用户进入首页或者其他页面,类似这样的页面,排版都很简单,如下图:
说明:这个是提示用户打开xxx页面的提示,我们采用的是打字输入的效果。我们看下具体的代码:
<!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>移动支付正在维护中 - Web前端之家</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <link href="/demo/dazi/d1/css/lp228.css" rel="stylesheet" type="text/css"> </head> <body> <script type="text/javascript"> function recalc() { var x = 750,clientWidth = document.body.clientWidth; if (!clientWidth) return; document.documentElement.style.fontSize = 100 * (clientWidth / x) + 'px'; }; if (window.addEventListener) { recalc(); var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; window.addEventListener(resizeEvt, recalc, false); } </script> <div class="cen-loading-box"> <p class="cen-p-fon">移动支付正在维护中,带来不便,敬请谅解</p> <p class="cen-p-fon2">请您用<strong>电脑登录客户中心</strong>进行存款</p> <div class="cen-comp-box scene"> <div class="inp-fon" id="vader"></div> </div> <pre id="nodebug" style="display:none"><code> theater.write( <span id="log"></span> ); </code></pre> </div> <script src="/demo/js/jq.js"></script> <script src="/demo/dazi/d1/js/theater.min.js"></script> <script type="text/javascript"> (function () { "use strict"; var $log = document.querySelector("#log"); var theater = new TheaterJS(); theater .describe("Vader", .8, "#vader"); theater .on("*", function (eventName, originalEvent, sceneName, arg) { var args = Array.prototype.splice.apply(arguments, [3]), log = '{\n name: "' + sceneName + '"'; if (args.length > 0) log += ",\n args: " + JSON.stringify(args).split(",").join(", "); log += "\n }"; $log.innerHTML = log; }) .on("say:start, erase:start", function (eventName) { var self = this, current = self.current.voice; self.utils.addClass(current, "saying"); }) .on("say:end, erase:end", function (eventName) { var self = this, current = self.current.voice; self.utils.removeClass(current, "saying"); }); theater .write("Vader:Web前端之家", 2000) .write(function () { theater.play(true); }); })(); </script> </body> </html>
大家可以预览效果。这里我用到一款插件:TheaterJS,它是一款逼真模拟打字特效的js打字机效果插件。后面会专门写一片文章:基于jQuery的text文字显示特效应用。
领红包提示
先来看下图:
这里的需求文字是“正在派红包”,其实完全可以用一个红背景白字来直接显示,这里添加了一个动画,更容易让用户有点击进入的冲动。这里我做了个简单的demo,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>正在派红包 - Web前端之家</title> </head> <body> <div id="Hotnews" style="background:#f00;width:80px;height:40px;line-height:40px;color:#fff;text-align:left;padding:0 15px"><!-- 正在派红包 --></div> <script type="text/javascript" src="/demo/js/jq.js"></script> <script type="text/javascript"> $(function(){ shownew(); }) var NewsTime = 1500, TextTime = 120, newsi = 0, txti = 0, txttimer, newstimer, newstitle = new Array(); newstitle[0] = "正在派红包"; function shownew(){ hwnewstr=newstitle[newsi]; if(txti>=hwnewstr.length){ clearInterval(txttimer); clearInterval(newstimer); newsi++; if(newsi>=newstitle.length){ newsi = 0; } newstimer = setInterval("shownew()",NewsTime); txti = 0; return; } clearInterval(txttimer); document.getElementById("Hotnews").innerHTML = hwnewstr.substring(0,txti+1); //截取字符,从第一个字符到txti+1个字符 txti++; txttimer = setInterval("shownew()",TextTime); } </script> </body> </html>
说明:这种文字呈现方式,我换了另外一种JS写法,没有用到专门的插件,因为它的表现形式比较简单,如果您有一定的JS基础都能看懂的,如果有疑问可以加入我们前端群:295431592。
表单text输入
表单输入效果,先来看张图:
日常我们都习惯应用普通的表单效果,大不了加点focus和blur的文字和边框颜色变化效果。其实完全可以再深入点,来些动画,给用户带来更好的体验效果,还是先来段代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Input表单输入文字动画 - Web前端之家</title> <link rel="stylesheet" type="text/css" href="/demo/dazi/d2/css/normalize.css" /> <link rel="stylesheet" type="text/css" href="/demo/dazi/d2/css/demo.css"> <link rel="stylesheet" href="/demo/dazi/d2/css/styles.css"> <link rel="stylesheet" href="/demo/dazi/d2/css/fancyInput.css"> </head> <body> <div id='wrap'> <header> <div></div> <menu> <button>Effect 1</button> <button>Effect 2</button> <button>Effect 3</button> <button>Effect 4</button> <button>Effect 5</button> </menu> <menu> <label><input type='radio' value='input' name='type' /><span>input</span></label> <label><input type='radio' value='textarea' name='type' /><span>textarea</span></label> <div></div> </menu> </header> <div id='content'> <section> <div> <input type='text' placeholder='type something...' value='输入文字' /> </div> </section> <section> <div> <textarea cols='1'></textarea> </div> </section> </div> </div> <script src="/demo/dazi/d2/js/jq.js" type="text/javascript"></script> <script src='/demo/dazi/d2/js/fancyInput.js'></script> <script> // Capture TAB to switch between the Demo page views (input/textarea) (function(){ var viewTogglers = $('menu.radio input'); $(document).on('keydown', function(e){ if( e.key == 'tab' || e.keyCode == 9 ){ var $checked = viewTogglers.filter(':checked'); var $next = viewTogglers.eq(viewTogglers.index($checked) + 1); if(!$next.length){ $next = viewTogglers.first(); } $next.prop("checked", true).change(); return false; } }); })(); $('section :input').val('').fancyInput()[0].focus(); // Everything below is only for the DEMO function init(str){ var input = $('section input').val('')[0], s = 'type something... ✌'.split('').reverse(), len = s.length-1, e = $.Event('keypress'); input.nextElementSibling.className = ''; var initInterval = setInterval(function(){ if( s.length ){ var c = s.pop(); fancyInput.writer(c, input, len-s.length).setCaret(input); input.value += c; //e.charCode = c.charCodeAt(0); //input.trigger(e); } else clearInterval(initInterval); },150); } init(); $('menu').on('click', 'button', toggleEffect); $('menu.radio').on('change', 'input', changeForm).find('input:first').prop('checked',true).trigger('change'); // change effects function toggleEffect(num){ var className = ''; idx = $(this).index() + 1, $fancyInput = $('.fancyInput'); if( idx > 1 ) className = 'effect' + idx; $('#content').prop('class', className); $fancyInput.find(':input')[0].focus(); $(this).addClass('active').siblings().removeClass('active'); } function changeForm(e){ // radio buttons stuff var page = this.value, highlight = $(e.delegateTarget).find('> div'), label = $(this.parentNode), marginLeft = parseInt( label.css('margin-left') , 10 ), xPos; highlight.css({'left':label.position().left + marginLeft, 'width':label.width() }); // page change stuff xPos = '-' + label.index() * 50; $('#content').css( 'transform', 'translateX(' + xPos + '%)' ); setTimeout(function(){ $('#content').find('.' + page + ' :input')[0].focus(); }, 100); } </script> </body> </html>
大家可以预览下效果,至于实现过程,看下案例对照学习下,这里就长篇阔论了,当然您可以加入我们前端群来讨论学习。
总结
上面我列举三个代表案例,目的就是让大家意识到,Text的一些交互体验也是非常重要的,虽然是一些很基础很细节的东西。有时候设计师给到的设计稿,并没有提到这里需要做交互效果,而你作为前端人员加入了自己的一些想法,会让设计师和管理对你刮目相看。每次在项目前要多去思考,项目后多去总结,这样你才会进步。多看、多学, 多总结!
网友评论文明上网理性发言 已有0人参与
发表评论: