1. 首页
  2. css

CSS互动式树屋广告的制作

任何访问这个网站的人都很明显:Treehouse是我们的主要赞助商。我喜欢这样。这不仅是因为他们提供了结构化的学习,这是对我这里的学习材料的补充,而且因为只有一个主赞助商意味着我们可以花更多的时间以一种有趣的方式将广告整合到网站中。
在与Treehouse的同事交谈时,他们告诉我他们有一些新的基于jQuery的内容值得推广。我想我应该创建一个小的交互区域,让人们对jQuery的功能了如指掌,并让他们对它有更多的了解。
让我们来看看它是如何构建的。这个想法
1. 有一个\”画布\”(而不是,只是一个发生事情的区域)有一系列5位的简单jQuery代码,点击一个按钮,代码运行,画布上发生了一些事情,你可以看到你要执行的代码,你应该可以清楚地看到代码正在运行,并且一直在做更改,画布区域是一个可点击的Treehouse广告(用户不需要与jQuery内容交互,它仍然只是一个广告)
2. 您可以在完成后重新开始交互步骤。CodePen上的演示:HTML相关位注释:The CSSNot much interesting here, so let\”s not dwell on it. Essentially I made the ad re-use styles already in use on CSS-Tricks, so the ad feels at home. The block of code uses the same code styling as anywhere else on the site. The module has a bar on top like all other modules. The button is the global button style. That kind of thing. I put a dotted border around the \”canvas\” as I thought that gives it a bit of an editable/target kind of feel.The JavaScriptNow we need to make this thing work. Which means…When button is clicked…Execute the codeIncrement the stepIf it\”s the last step, put stuff in place to start overThe StructureThe JavaScript we write is essentially a \”module\”. It\”s all related to each other. We should give it some structure to make that obvious. The best way I know how is to make an object that contains it all.var>That usually ends up something like this:var>Using structure like this makes for more readable code, more testable code, and just all around feels better than a bunch of disparate functions and variables (spagetti).The \”Steps\”We\”ll have five steps. As in, the different bits of jQuery that execute and do different things to our ad canvas.Add a \”button\” class to the linkMove it up a little bit (demonstrating animation)Change the text of the buttonAdd a new elementAdd class to the entire ad, giving it a finished feelWe\”ll also need to do two things with each bit of code:Display itExecute itWe\”d rather not maintain the code in two separate places, so let\”s just not. We\”ll store the five different code bits in an array (giving it some structure, rather than five separate variables). Each item in the array is a string of code. We can grab that string and display it, or grab that string and eval()它。我知道。eval()是邪恶的。我们可以通过在不同的地方维护代码样本来避免它。还是有更好的办法?var>That ends up like:codeText:>Notice all the slashes and \”n\”s at the end of the lines? A string that ends in \”\” in JavaScript just means \”this string to be continued on next line.\” It doesn\”t end up in the string itself. \”n\” means \”new line,\” in our case, we need that so the code is formatted correctly when we place it inside the 元素。它不会影响eval()。动画为了让你在按下\”运行代码\”按钮时直观地了解正在发生的事情,我认为让代码向上滑动并淡入\”画布\”将是一个很酷的主意。接下来的步骤是:直接在现有代码区域的顶部制作一个克隆/复制代码区域在淡出时向上设置动画位置完成后删除克隆等待更改代码文本,直到动画完成我将此操作视为一个\”块\”功能。也就是说,它理应成为我们目标的一部分。var>The GutsThe final code ends up like this. This has the logic in it for running the code and resetting and all that.var = n$(\”#treehouse-ad\”)n.addClass(\”button\”);\”,\”treehouse.animate({n op: \”-40px\”n});\”,\”treehouse.text(n\”Learn jQuery at Treehouse!\”n);\”,\”$(\”\”, {nid: \”tagline\”,n ext: \”Hi, I\”m Mike.\”n}).insertAfter(treehouse);\”,\”$(\”#canvas\”)n.addClass(\”all-done\”);nnconsole.log(\”Thanks for playing!\”)\”],bindUIActions: function() {$(\”#run-code\”).on(\”click\”, function(e) {e.preventDefault();TreehouseAd.animateCode();TreehouseAd.runCode();});},animateCode: function() {this.codeArea.clone().addClass(\”clone\”).insertAfter(this.codeArea).animate({top: \”-60px\”,opacity: 0}, TreehouseAd.delay, function() {$(\”.clone\”).remove();});},runCode: function() {setTimeout(function() {if (TreehouseAd.step < 5) {eval(TreehouseAd.codeText[TreehouseAd.step]);TreehouseAd.step++;TreehouseAd.counter.text((TreehouseAd.step+1) + \"/5\");TreehouseAd.codeArea.text(TreehouseAd.codeText[TreehouseAd.step]);}if (TreehouseAd.step == 6) {// reset canvastreehouse.text(\"Team Treehouse!\").removeClass().removeAttr(\"style\");$(\"#tagline\").remove();$(\"#canvas\").removeClass(\"all-done\");$(\"#run-code\").text(\"Run == 5) {$(\"#run-code\").text(\"Start Over\");TreehouseAd.codeArea.text(\"\");TreehouseAd.counter.text(\"Done!\");TreehouseAd.step++;}}, TreehouseAd.delay);}}; TreehouseAd.init();结束再次,CodePen上的演示:您还可以在这个网站上看到它的修改版本!为了好玩,我们已经改了好几次了。可能会继续这样做。非常感谢树屋让我做这样有趣的事情。如果你是CSS技巧的粉丝,就去看看吧 3. When button is clicked… 4. Execute the code 5. Increment the step 6. If it\"s the last step, put stuff in place to start over 7. Add a \"button\" class to the link 8. Move it up a little bit (demonstrating animation) 9. Change the text of the button 10. Add a new element 11. Add class to the entire ad, giving it a finished feel 12. Display it 13. Execute it 14. 直接在现有代码区域的顶部制作一个克隆/复制代码区域 15. 在淡出时向上设置动画位置 16. 完成后删除克隆 17. 等待更改代码文本,直到动画完成

CSS互动式树屋广告的制作 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%ba%92%e5%8a%a8%e5%bc%8f%e6%a0%91%e5%b1%8b%e5%b9%bf%e5%91%8a%e7%9a%84%e5%88%b6%e4%bd%9c/