要了解flex的工作原理,请尝试在此页面上使用flex布局编辑器 

我的最后两篇教程涉及CSS gridflex。我写了这些,所以我可以了解可能性,并与其他人分享我的发现。使用gridflex,jquery  我5小时的时间,我创建了这个。

我想出了一个学习曲线书店网站标题的动画。当然,这看起来不像网格。但它是IMO的创意和乐趣。

在这里,一系列简单的技术产生了一些戏剧性的效果。

我总是说:

  • 您不需要了解语言的所有内容。
  • 你只需要了解一些抽象技巧但要了解他们
  • 找出该技术的预期用途

让我们将设计分解为单独的元素:

通过img {visibility:hidden}移除书籍图像的相同动画,并将边框添加到所有元素* {border:1px solid grey; }

我通过快速谷歌图像搜索找到了这个免费的自行车剪贴画。我把它分成两个单独的图像,并增加了透明度。我还移除了方向盘,并在框架后面用较小的z-index单独制作动画。

这里的关键设计元素是:

  • 我使用flex for book容器将它们对齐(“浮动”)到底部。
  • 使用jQuery动画功能动画自行车的移动部分:$(“#bike-back”)。animate({ width:bike_position_x});
  • 使用$(“#wheel”)旋转滚轮.css({ transform:“rotate(”+ wheel_degree +“deg)”});

使用这三个想法,您可以创建许多不同的效果。在网页设计中,您要做的大多数动画是移动2维对象或旋转对象。很像2D视频游戏。

源代码

我不想用HTMLCSS源代码来混淆本教程的可读性。但这是制作动画的JavaScript

<script> 
    / *启动参数,车轮角度等* / 
    让角度= 100;            //起始轮旋转角度
    让 bx = 600 + 0;           //起始轮位置
    让 wx = 600 + 50;          //开始自行车车架位置
    让 T = null ;                //动画计时器对象
/ *所有资源加载,现在是什么?* /
     window.onload =()=> {
/ *为自行车和方向盘设置动画* /
         T = setInterval(()=> {
$(“#wheel”)。css({ 
                transform:'rotate('+ angle +'deg)',
                left:wx +'px'},0);
/ *移动自行车架* /
             $(“#bicycle-end”)。css({left:bx +'px'},0);
/ *进度计数器* /
             angle--; //将车轮旋转-1度
             bx--;    //将自行车移动-1px
             wx--;    //将轮子移动-1px
/ * bike到达动画的结尾,重置计数器* / 
             if(bx <= 249){ 
                clearInterval(T); 
                T = null ; 
            }
},5); //动画延迟(毫秒)
     } 
</ script>

 

 

是的,它是JavaScript。但它很简单,并且没有CSS属性混乱。

您可以使用CSS动画执行这些操作。没关系。我喜欢JavaScript方法,因为它让我更好地控制动画计数器。我不需要使用mozwebkit扩展来混淆我的代码。

我跳过了CSS和HTML源代码,但您仍然可以从Learning Curve网站查找。这是我正在设计这个动画的网站。

虽然我们在主题上...

一旦你完成了动画的制作,就可以很容易地交换内容,看看它与不同的图像会是什么样子。

这只是一种增加工作价值的便宜方式。如果有的话,我用它作为Twitter帖子看起来有点不同于自行车。

但也许它与甲壳虫司机产生共鸣?值得一试。

除了车轮的尺寸和位置外,什么都没有改变。但是一旦编写代码,这些都很容易调整。

在接下来的一天......

第二天我继续在书店工作。我需要为我的书设计一个产品页面很长一段时间。几个小时后,我想出了这个想法:

在布局电子书产品 页面由创建CSS 电网的主支架和弯曲 里面的图书预览列表。

点了。使用CSS 网格作为主骨架。使用flex作为内部单元格或其内容

jQuery图像悬停缩放效果应用于每个弹性项目> img:

/ *鼠标悬停在* /
 $(“。more-content div img”)。on(“mouseover”,function(){ 
    $(this).stop()。animate({top:“ -  18px”,left: “-18px”,宽度:“120%”},300,“swing”); 
});
/ *鼠标输出* /
 $(“。more-content div img”)。on(“mouseout”,function(){ 
    $(this).stop()。animate({top:“0px”,left:“ 0px“,宽度:”100%“},300,”摇摆“);

 

我不知道我使用这种技术的项目有多少!动画元素很有趣,jQuery肯定很容易(和跨浏览器

Welp,它看起来互动而有趣。这比静态设计好很多。动画有助于创建引人入胜的用户体验。

提醒用户更有可能购买您的产品......但不要愚弄......只有您能够通过有用 高质量的 产品保持他们的兴趣,这才是真实的。

最后的想法

  • 不要害怕尝试独特的想法。我发现,当我为自己思考时,我会产生最好的设计。我需要以某种方式找到我能做到的信心。
  • jQuery并没有灭绝。它有用,不是作为VueReactAngular的替代品,而是用于其预期目的。它非常适合跨浏览器动画(特别是移动和旋转)。
  • 使用可用资源的组合(JavaScript,jQuery,CSS,剪贴画

希望这篇文章很有帮助!如果你喜欢它,请给我一些鼓掌,让更多的人看到它。谢谢!

觉得可用,就经常来吧!jQuery教程 脚本宝典 欢迎评论哦!巧夺天工,精雕玉琢。小宝典献丑了!