十多个神奇的伪Flash网站,核心技术与前方案例

二十一个神奇的伪Flash网站

2011/07/09 · CSS,
HTML5,
JavaScript ·
CSS,
HTML5,
Javascript

无须以为上边的那个网站是应用Flash做的,它们其实是利用老式的HTML和CSS打造,也会有星星点点的JavaScript,同样也能达成出其不意的动画效果。

  1. Emilie Crssrd
    该网站做了许多设计,从而看起来像Flash,图片加载动画更像Flash网站常见的意义一样

  2. Stefan Kanchev
    图标的淡入和退出效果和您的鼠标经过的门径形成了周详的互动。

美高梅开户网址 1

  1. Brand Republic
    该网站依照CSS成分动态地改变专业边界,创建二个3D功用,并保管Logo在显眼的背景下脱颖而出。

美高梅开户网址 2

  1. Cooper
    在导航中甄选序列,相关内容会滚动到当下窗口中,图片的安定对接,感觉卓殊像Flash,但它确实是运用正式的Web语言来成功

美高梅开户网址 3

  1. Flipboard
    援救页面动态调整,以适应您的浏览器(某个限制),你会意识二个专业的Flash效果。

美高梅开户网址 4

  1. Crafty 2010
    风格和可用性之间已毕三个很好的平衡。

美高梅开户网址 5

  1. 20 Things I Learned About Browsers and the
    Web

美高梅开户网址 6

  1. NL Engenharia

滑出式导航、全显示器图像、动态调整大小,该网站有着Flash网站的有所特点。

美高梅开户网址 7

  1. Ryan C. Jones
    该网站有八个美妙的录制组合,它应用1个大约而卓有功能的法子来突显素描创作。

美高梅开户网址 8

  1. Studio Gang Architects
    乍一看,创意的界面类似Flash,它突显出老式的HTML也能够做动画效果。

美高梅开户网址 9

  1. DIST Creative
    凭借其动画、装载图标和流动界面,那几个网站是依据HTML的至极实用的卡通片消除方案,拥有好的Flash布局创立力。

美高梅开户网址 10

  1. Messages for Japan
    该动画格局很好地崛起了用户的并行。

美高梅开户网址 11

  1. Atlason
    该网站内容充满显示器,窗口式的布局更易令人欣赏。

美高梅开户网址 12

  1. Bit Byte Bit
    动态的区域。

美高梅开户网址 13

  1. FORM

美高梅开户网址 14

  1. EEHarbor
    该网站的速度是其成功的一大原因,你不会以为动画片内容花哨。

美高梅开户网址 15

  1. Wells Riley
    二个11分特别的拉绳动画效果 。

美高梅开户网址 16

  1. Manchester Design
    Symposium

    拥有超洁净和精炼的界面,拥有固定不变的尾部,页面上面的部分可以滚动浏览。

美高梅开户网址 17

  1. Sophie Hardach
    有一些诙谐的动画片,如元素的移动、放大、停留,还有底部的波浪效果。

美高梅开户网址 18

   20. Renato Zero
向下滚动浏览,就会现出一个新的页面。动画是很快的,就像觉得不到加载。

美高梅开户网址 19

原文:webdesignerdepot
译文:iteye

 

赞 收藏
评论

美高梅开户网址 20

《HTML5基础知识、大旨技术与前沿案例
》是一本引导初、中级学习者深切摸底并有效控制HTML5骨干技术的技术实战书籍,全书接纳“基础知识+案例驱动”的双轨情势,精心安排了汪洋经文的HTML5统筹实战案例,包涵页面成分与布局、动画与动效、图形与图像、交互操作、页面组件、音频与摄像、响应式设计等,并选用了微信小游戏、创意网站等综合性的前敌交互使用。实例基本蕴涵了初、中级学习者在实战中大概或许蒙受的装有标题,浮现了种种流行的交互设计意见,让读者可以轻松地读书基础知识,有效控制种种核心技术,飞快上手前沿应用开发,并由此HTML5发觉相互设计的乐趣。

  《Web
前端开发精华作品援引》二〇一一年第陆期(总第玖六期)和豪门汇合了。梦想天空博客关切 前端开发 技能,分享各个增强网站用户体验的 jQuery 插件,显示前沿的 HTML5 和 CSS3 技术利用,推荐出色的 网页设计 案例,共享美好的筹划素材和精良的
Web 开发工具,希望那些细致推荐的篇章可以辅助到您。

移步网络的上进,促生了充裕多彩的活动Web框架。jQuery是继Prototype之后又一个地道的JavaScript框架。通过jQuery,我们可以高效地处理HTML文档、控制事件、给页面添加动画和Ajax效果。在Web设计中,大家常常会将统筹中转成代码。可是这些进度一般是旷日持久而又屡次,更喜剧的是,代码的可用性还要打个问号。而经过jQuery插件,我们只需在短短的几分钟内就能化解陈年亟待几钟头甚至是几天的题材。 

美高梅开户网址 21

JavaScript

  • zoom.js:一款功用很奇异的页面内容缩放插件
  • 打造大型 JavaScript 应用程序的特级资源分享
  • Chardin.js – 很别致的 HTML 元素遮罩介绍效果
  • 革新插件推荐:在网站中集成 HTML5 绘画作用
  • Responsive Nav:用于小显示屏设备的响应式导航
  • 如何在 Sublime Text 中调试 JavaScript 代码
  • 利用 Sails.js 创设和定制集团级的 Node.js 应用

美高梅开户网址 22 

课程地址:HTML5基础知识、主旨技术与前沿案例 (刘欢先生等著)完整版PDF

jQuery

  • 密切挑选:8款用于布局和用户界面增强的 jQuery 插件
  • 实用插件:精心选料6款卓绝的 jQuery Tooltip 插件
  • 二十一个拾壹分特出的 jQuery 图片滑动插件和课程
  • 8款效果不错的 jQuery 加载动画和进程条插件
  • 为你的网站扩充亮点的七款 jQuery 插件推荐
  • Sidr – 创设侧栏和响应式菜单的超级 jQuery 插件
  • ScrollUp – 超轻量的可定制的归来顶部 jQuery 插件

在本文中,Jake
Rocheleau将为大家来得什么用jQuery来创设3个根据移动装备的Web
App。在开发进程中,大家将选择CSS3的传媒询问作用来找出当下运动设备显示屏的的最大分辨率,依照差别的分辨率使用分裂CSS。其余,Media
Queries还是可以襄助大家在小屏幕上隐藏导航菜单以呈现越多的内容。大家还会利用jQuery来资助大家应用Ajax.Load(),以便激活菜单栏和加载外部页面内容。 

目录

HTML5

  • 11个让您忘掉 Flash 的 HTML5 应用示范
  • 享用9个惊艳的 HTML5 和 JavaScript 特效
  • 在线预览全数原生 HTML5 表单成分效果的网站
  • 十多个神奇的伪Flash网站,核心技术与前方案例。IVORAV4Y – 轻量、灵活、成效强大的前端开发框架
  • 11个令人眼花缭乱的 HTML5 和 JavaScript 效果
  • 那一个让人咋舌的 Chrome 浏览器实验项目
  • 十多个可怜光彩夺目的 HTML5 Canvas 应用试验

 

率先有的 HTML5基础

CSS3

  • -prefix-free:帮您从 CSS 前缀的火坑中解脱出来
  • CSS Matic:网页设计师的极限 CSS 工具箱
  • CSS Beautify – 方便的在线 CSS 代码美化工具
  • 使用 CSS3 完毕精神迷人的输入框 – Fancy Input
  • 前者笔记:援救您美化网站的10+实用 CSS3 技巧
  • 寒暑盛宴:2013年名次前十九位的 CSS 网站小说
  • bluePen – 使用在线 CSS 编辑器美化你的网站
  • LIVE DEMO
  • SOURCE CODE

第三章 初探HTML5:制作一份特邀函 010

非凡素材

  • 10大流行 Metro UI 风格的 Bootstrap 主旨和模板
  • 『精品素材』20套免费的网页小图标素材下载
  • 『免费素材』15套升高安插的高品质纹理素材下载
  • 35套用于扁平化设计的图标和网页成分《上集》
  • 35套用于扁平化网页设计的图标和页面成分《下集》
  • 一组免费的简练风格表情图标 – Simple Smileys
  • 分享15个精美 Metro UI 风格 WordPress 主题

 

1.1 开发前的备选干活 010

网页设计

  • 风行势头:2多个最佳的扁平化网页设计案例
  • 『良好小说』21个鼓舞灵感的土灰风格网站设计
  • 大好案例:三十七个创意的单页滚动网站文章《上篇》
  • 酷毙了!滚动导航在单页网站中的应用《第三季》
  • 帅呆了!滚动导航在单页网站中的应用《第1季》
  • 经文网页设计:21个美丽的 金立 App 网站设计
  • 经文网页设计:2几个使用视差滚动的单页网站
  • 经典网页设计:拾陆个新鲜出炉的 HTML5 酷站欣赏

1. 定义页面布局

 

率先,我们先要查看HTML页面,并且使用CSS样式来规定页面的样式。在开端作者会跳过无数不常见的Meta标签(对所创制的Web
App没有一向的熏陶)。可是大家照例要注意一些代码片段(在上边小编曾经列举出来)。

 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

X-UA-Compatible是用来叙述文件在一些浏览器上的渲染程度。不得不说, 在HTML5编程进度中那是一个尤其有意思的业务。所以自身毫无太担心那个标题。但根本的是,尽管大家恰当地使用Meta标签,它会给大家广马虎外的帮忙。例如参预关键字会被大型搜索网站自行收集,可以设定页面格式及刷新和让网页自动适应移动浏览器大小等。

情节主导

在BODY中,我通过ID#w创造了五个Wrapper
Div。在里头小编将页面布局分成了#pagebody和#navmenu五个部分。整个页面的增幅为640px,所以#pagebody和#navmenu的增加率可以准确地测算。

自作者给导航菜单赋了贰个较低的z-index值来保管#pagebody总能在最顶部面呈现。

<div id="pagebody">
    <header id="toolbarnav">
        <a rel="external" href="#navmenu" id="menu-btn"></a>

        <h1>HK Mobile</h1>
    </header>

    <section id="content" class="clearfix">
        <h2>Welcome to the Mobile Site!</h2>
    </section>
</div>

<div id="navmenu">
    <header>
        <h1>Menu Links</h1>
    </header>

        <ul>
         <li><a rel="external" href="#homepage.html" class="navlink">Home</a></li>
         <li><a rel="external" href="#about.html" class="navlink">About Us</a></li>
         <li><a rel="external" href="#advertise.html" class="navlink">Advertise</a></li>
         <li><a rel="external" href="#write.html" class="navlink">Write for Us</a></li>
         <li><a rel="external" href="#contacts.html" class="navlink">Contacts</a></li>
         <li><a rel="external" href="#privacy.html" class="navlink">Privacy Policy</a></li>
        </ul>
</div>

本人在每一个.html页面前都添加了井字符(#)。每当点击3个链接时,UKugaL栏都会现出和下推主体内容。当引用的ID没有被重载时,我们只可以通过JavaScript来重新调用它。

 

1.1.1 制定第二个上学目标 010

英文字体

  • 字体大宝库:25款美观又实用的英文字体下载
  • 字体大宝库:15款可观的章程字体免费下载
  • 字体大宝库:16款可以的免费英文手写字体推荐
  • 字体大宝库:25款不错的常用英文字体下载
  • 12款吸引眼球的免费英文涂鸦艺术字体下载
  • 字体大宝库:最新25款免费的英文 3D 字体下载

2. CSS定位

咱们CSS代码中并从未太多复杂的内容。大多数的定点工作都是透过手动达成的,落成今后才会交由jQuery来操作。同样,那里也有部分大家要注意的代码片段。

 

/** @group core body **/
#w #pagebody {
    position: relative;
    left: 0;
    max-width: 640px;
    min-width: 320px;
    z-index: 99999;
}

#w #navmenu {
    background: #475566;
    height: 100%;
    display: block;
    position: fixed;
    width: 300px;
    left: 0px;
    top: 0px;
    z-index: 0;
}

上边的那段代码分别定义了页面中多少个部分的体制。导航菜单的拉长率为300px,那样一来,就为大家浏览页面内容留下了有个别空间,打开和关闭菜单按钮也一向在右边。那里最紧要的部分就是导航菜单的z-index的属性值和岗位(z-index:
0;position: fixed)。 

 

大家顶部栏标题也是3个好玩的有的。它被放置在1个原则性的义务,会趁机页面内容的滚动而滚动,半数以上的iOS
App上都有其一职能。

/** @group header **/
#w #pagebody header#toolbarnav {
    display: block;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
    background: #0b1851 url('img/tabbar-solid-bg.png') top left no-repeat;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    height: 44px;
    width: 100%;
    max-width: 640px;
}

#w #pagebody header#toolbarnav h1 {
    text-align: center;
    padding-top: 10px;
    padding-right: 40px;
    color: #e6e8f2;
    font-weight: bold;
    font-size: 2.1em;
    text-shadow: 1px 1px 0px #313131;
}

举手投足规则

 

很简单注意到,在背景上自作者使用了浅米灰的横条作为标题栏。那么些标题栏的轻重缓急为640x44px,从而可以与页面的布局保持吻合。不仅如此,作者还为一加/三星GALAXY Tab视网膜屏幕设计了一张@2x图片。我们可以从上图看到那些图片,大概从SOU卡宴CE
CODE中拿到。

 

  • {System}/demo/img/[email protected]
  • {System}/demo/img/[email protected]

 

/** retina display **/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
 only screen and (min--moz-device-pixel-ratio: 1.5),
 only screen and (min-device-pixel-ratio: 1.5) {
    #w #pagebody header {
        background: #0b1851 url('img/[email protected]') top left no-repeat;
        background-size: 640px 44px;
    }

    #w #pagebody header #menu-btn {
        background: url('img/[email protected]') no-repeat;
        background-size: 53px 30px;
    }
}

食谱箭头的安插性

在导航菜单方面,笔者为种种菜单链接的左边设计了贰个针对性右方的箭头图标。相信一大半CSS3的胃痛友都会欣赏那样做,那确实是贰个没错的新意。

自作者动用transform变量在导航内容后边创立三个小边框,所以我们得以在左手的框架内私行的位移,除此之外,在悬停状态下大家可以很有利地改变边框的颜色和样式。更令人惊叹的是,你只须求接纳基本的HTML5和CSS3样式就足以做到这一个边框地规划。

但第三,大家要进入JavaScript编码世界。

#w #navmenu ul li a::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-right: 3px solid #d0d0d8;
    border-top: 3px solid #d0d0d8;
    position: absolute;
    right: 30px;
    top: 45%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#w #navmenu ul li a:hover::after { border-color: #cad0e6; }

1.1.2 准备付出环境 011

实用工具

  • 《后日引进》值得一试的7个 Web 开发工具和财富
  • Feedly:替代 Google Reader 的最佳 RSS 阅读器
  • Drawscript – 把 Adobe Illustrator 图形转换为代码
  • iCheck:顶尖完美的自定义复选框 & 单选按钮
  • modern.IE – 微软公布的 IE 包容性测试工具和能源
  • Giphy – 分享贰个很棒的 GIF 动画图片检索引擎

3.  jQuery动画设计

在编排这么些自定义代码进程中,我新建了3个script.js文件。咱们可以依照自身的须要来直接编写<script>
标签,也足以从SOU途乐CPAJERO CODE中一贯下载小编的模板。

$(document).ready(function(){ 
    var pagebody = $("#pagebody"); 
    var themenu = $("#navmenu"); 
    var topbar  = $("#toolbarnav"); 
    var content = $("#content"); 
    var viewport = { 
    width : $(window).width(), 
    height : $(window).height() 
    }; 
    // retrieve variables as  
    // viewport.width / viewport.height

在起来从前,小编设置某些页面变量,如此一来,我们就能够更进一步有利地引用文档中的变量。作者并未用过视口值,可是假诺你想调整动画阶段,设置视口值可以帮您三个大忙。例如:通过视口值,你可以检查当前浏览器的宽度,并可以的对你的菜单栏举办对应地缩放。

 

function openme() {  
    $(function () { 
      topbar.animate({ 
        left: "290px"
      }, { duration: 300, queue: false }); 
      pagebody.animate({ 
        left: "290px"
      }, { duration: 300, queue: false }); 
    }); 
} 

function closeme() { 
    var closeme = $(function() { 
    topbar.animate({ 
      left: "0px"
    }, { duration: 180, queue: false }); 
    pagebody.animate({ 
      left: "0px"
    }, { duration: 180, queue: false }); 
    }); 
}

接下去,笔者为开拓和倒闭菜单定义了七个基本点的函数。除非大家实在要求二种截然分歧的卡通成分,否则我们得以在一个纯粹的函数和回调切换中成就此项设计,但不幸的是,
jQuery并无法支援大家缓解这几个难点,所以大家必要求助于其余的代表语法。

那多个函数我一时半刻命名为topbar和pagebody。内容区域的反革命背景就是pagebody;大家把标题栏放置在页面的顶部。那就意味着每当大家点击打开大概关闭按钮时,大家必要把topbar和pagebody向左和向右平移290px。

1.2 制作HTML页面 012

新意欣赏

  • 设计前沿:30款一级完美的 iOS 图标欣赏
  • 流行30幅动人心脾的优良素描创作欣赏
  • 可以案例:2三个高大的合营社 LOGO 设计
  • 60款惊艳的 iOS App 图标设计《第2季》
  • 60款惊艳的 iOS App 图标设计《第贰季》
  • 60款惊艳的 iOS App 图标设计《第3季》

4. 加载动态内容

辩驳上,上述代码基本上就能满足半数以上人创设一个大约移动的急需,不过,在此间本人还想添加一些其它的东西。

每当用户点击3个食谱链接,页面会自动关闭当前的导航栏目和突显五个加载的GIF图像。当页面内容加载成功时,页面会去除GIF图片,并且出示已加载好的内容。通过使用static
.htm,我们得以很自在的落成那项工作,从而防止了PHP、Ruby、Perl或然其它后端语言所带来的麻烦。

点击设置

第2,我们必要测试导航按钮。当用户点击导航按钮,页面会甘休href的符合规律加载,此时,大家得以行使函数来展现外部内容。

// loading page content for navigation
$("a.navlink").live("click", function(e){
    e.preventDefault();
    var linkurl   = $(this).attr("href");
    var linkhtmlurl = linkurl.substring(1, linkurl.length);

    var imgloader  = '<center style="margin-top: 30px;"><img src="img/preloader.gif" alt="loading..." /></center>';

 

因而上段代码,每当用户点击导航菜单链接时,大家会截止当前页面加载并且安装二个完全的U汉兰达L变量。其它,作者还创办3个饱含标准图像Loader的HTML变量。如果您想定制自身的图像加载格局,Ajaxload会是一个很不错的助力。 

 

Ajax.Load()

要完成那个意义大家需求两段差其余代码,上面那段代码不仅能支持大家关闭导航菜单和滑动文档窗口,而且仍可以支援大家采用3个较小的加载动画来代表当前页面内的主脑内容。

closeme();

$(function() {
    topbar.css("top", "0px");
    window.scrollTo(0, 1);
});

当外部页面的内容加载成功时,大家要用外部的加载页面来顶替页面上的加载动画。常常意况下,那将只须要几百飞秒甚至更快,所以本身设置了晚点功效。

content.html(imgloader);

setTimeout(function() { content.load(linkhtmlurl, function() {/* no callback */}) }, 1200);

 

1.2.1 创制第四个HTML5页面 012

同连串小说

  • Web前端开发人员和设计师必读小说援引【种类一】
  • Web前端开发人员和设计师必读小说援引【连串二】
  • Web前端开发人士和设计师必读小说援引【种类三】
  • Web前端开发人士和设计师必读小说推荐【种类四】
  • Web前端开发人员和设计师必读小说推荐【体系五】
  • Web前端开发人士和设计师必读作品援引【体系六】
  • Web前端开发人士和设计师必读小说援引【体系七】
  • Web前端开发人士和设计师必读文章援引【种类八】
  • Web前端开发人士和设计师必读作品推荐【体系九】
  • Web前端开发人员和设计师必读作品推荐【体系十】
  • Web前端开发人士和设计师必读小说推荐【连串十一】
  • Web前端开发人员和设计师必读作品推荐【种类十二】
  • Web前端开发人士和设计师必读小说推荐【体系十三】
  • Web前端开发人士和设计师必读小说推荐【体系十四】
  • Web前端开发人士和设计师必读小说推荐【系列十五】

 

  若是你认为那些小说对您有用,记得轻轻点击一下右下角的【推荐】哦:)

 

本文链接:Web 前端开发人士和设计师必读作品【体系十六】

小说来源:梦想天空 ◆ 关心前端开发技术 ◆ 分享网页设计能源


5. 总结

 

作者鼓励全数的Web开发者去下载教程中的源代码,并且愿意开发者能够以此编写本人的源代码。这唯有是3个基础教程。通过媒体询问和进一步多的可开展Web浏览器,Web开发也变得比往常愈加的简单。移动支付是一门艺术,必要多量的举行和进献精神。我希望那一个科目是三个很好的源点,期望它可以协助越来越多的开发者。假使您对代码有其余的疑点和体会,可以在研商区与笔者分享。

1.2.2 增添要求的页面成分 014

1.2.3 页面中那3个看不见的代码 015

1.3 页面的鼓吹 015

1.3.1 制作诚邀函的页面背景 015

1.3.2 调整特邀函的内容区域地点 018

1.3.3 调整诚邀函的文字字体与字号 020

1.3.4 制作诚邀函的按钮 021

1.3.5 创造1个表面CSS文件 022

1.4 为页面创设交互 024

1.4.1 创设按钮的JavaScript交互 024

1.4.2 制作还未终止:页面的移动化 026

第二章 HTML5新手详解 028

2.1 HTML代码基础 028

2.1.1 HTML基础语法 028

2.1.2 页面根成分 029

2.1.3 文档元数据 031

2.1.4 区块成分 034

2.1.5 分组内容成分 039

2.2 HTML常用成分 042

2.2.1 文本 042

2.2.2 表单 043

2.2.3 表格 047

2.2.4 WAI-ARIA 050

第2章 CSS3新手详解 052

3.1 CSS代码基础 052

3.1.1 CSS基础语法 052

3.1.2 继承 054

3.1.3 选择器 057

3.2 CSS3常用属性 059

3.2.1 文本和字体 059

3.2.2 边框与背景 062

3.2.3成分定位 065

3.2.4 框模型 068

3.2.5 列表 071

3.3 CSS3常用成效与技能 075

3.3.1 阴影效果 075

3.3.2 2D与3D效果 077

3.3.3 优先级 078

第④章 JavaScript新手详解 080

4.1 JavaScript代码基础 080

4.1.1 如何调试JavaScript? 080

4.1.2 为代码添加注释 081

4.1.3 创建1个简约的变量 082

4.1.4 两种常用的JavaScript运算符 083

4.1.5 JavaScript中的条件语句 085

4.1.6 JavaScript中的循环语句 087

4.2 JavaScript编程进阶 089

4.2.1 数组及其操作 089

4.2.2 日期和岁月 091

4.2.3 初涉函数 092

4.2.4 函数的变量功用域 094

4.2.5 Object简介 095

4.2.6 JavaScript的DOM操作 097

4.2.7 DOM事件处理 100

4.2.8 利用JavaScript实现HTML5拖放 101

第④章 移动端HTML5开发详解 103

5.1 桌面端开发概述 103

5.1.1 桌面端和运动端有啥不一样? 103

5.1.2 响应式设计照旧移动版网站? 104

5.2 移动端支付技术 105

5.2.1 Viewport设置 105

5.2.2 百分比布局 106

5.2.3 Flexbox:轻松已毕弹性布局 111

5.2.4 Media Query 114

5.2.5 雪碧图 116

5.2.6 图标字体 119

5.2.7 移动端交互 121

5.2.8 移动端调试 122

5.2.9 移动端其余技术 124

第伍章 一矢双穿:运用流行开源类库 126

6.1 开源类库jQuery介绍 126

6.1.1 强大的jQuery 126

6.1.2 jQuery选择器 128

6.1.3 jQuery的属性和DOM操作 130

6.1.4 jQuery动态效果 132

6.1.5 jQuery事件 134

6.1.6 jQuery的优缺点 136

6.2 其余开源类库介绍 136

6.2.1 使用jQuery Mobile开发活动站点 136

6.2.2 Zepto——移动端的jQuery 137

6.2.3 前端开发框架BootStrap 138

6.2.4 设计工具包Flat UI 139

6.2.5 浏览器检测工具Modernizr 140

6.2.6 数据可视化工具D3 141

6.2.7 使用哈默轻松控制触摸手势 141

6.2.8 前端在线编辑工具 142

第玖章 HTML5与周边编程语言、软件 143

7.1 HTML5与Flash 143

7.1.1 HTML5与Flash的结合 143

7.1.2 使用Google Swiffy进行Flash转换 145

7.2 HTML5与其余周边语言和软件 146

7.2.1 HTML5与行使开发 146

7.2.2 HTML5与Illustrator的结合 148

7.2.3 HTML5与Photoshop的结合 149

7.2.4 HTML5费用桌面端应用 151

第②片段?HTML5前沿经典应用篇

第⑦章 HTML5页面成分与布局 153

8.1 页面成分与布局基本技术 153

8.2 HTML5搭架子基础 153

8.2.1 图文混排与题图文字布局 154

8.2.2 Hero Unit图标题文混排 156

8.2.3 两列均分布局 159

8.2.4 格子布局 164

8.2.5 多列等高布局 168

8.3 HTML5搭架子进阶 170

8.3.1 两列自适应布局 171

8.3.2 三列自适应布局 175

8.3.3 瀑布流布局 179

第10章 HTML5动画片与动效 182

9.1 动画与动效大旨技术 182

9.2 CSS3动画与动效 182

9.2.1 按钮成分动画效果 183

9.2.2 图标成分动画效果 186

9.2.3 页面切换动画效果 192

9.2.4 加载动画效果 198

9.2.5 逐帧动画效果 204

9.2.6 3D翻页动画效果 208

9.3 JavaScript动画与动效 211

9.3.1 Canvas粒子动画效果 211

9.3.2 GSAP类库动画效果 214

第捌章 HTML5图片与图像 217

10.1 图形与图像核心技术 217

10.2 CSS3图形与图像绘制 218

10.2.1 关闭按钮绘制 218

10.2.2 菜单图标绘制 219

10.2.3 三角图标绘制 221

10.2.4 渐变色绘制 225

10.2.5 Pattern图案绘制 227

10.2.6 锯齿图形绘制 229

10.3 Canvas图形与图像绘制 231

10.3.1 Canvas图形绘制 231

10.3.2 Canvas像素控制 235

10.4 SVG图形与图像绘制 237

10.4.1 SVG图形绘制 237

10.4.2 SVG图像遮罩 242

第31章 HTML5相互操作 244

11.1 交互操作核心技术 244

11.2 滚动类交互 244

11.2.1 页面固定背景 244

11.2.2 选区控制 246

11.2.3 局地滚动 248

11.2.4 滚动监听 252

11.2.5 视差滚动 256

11.2.6 滚动触发动画 261

11.3 键盘和鼠标类交互 267

11.3.1 滑块拖动 267

11.3.2 Canvas键盘操作 271

11.4 移动端交互 274

11.4.1 触摸操作 274

11.4.2 运动与动力影响 276

11.5 其他交互操作 279

11.5.1 本地数据文件加载 279

美高梅开户网址,11.5.2 本麻芋果件操作 281

11.5.3 Geolocation操作 284

11.5.4 localStorage操作 287

第贰2章 HTML5页面组件 290

12.1 页面组件开发基本技术 290

12.2 图层类页面组件 290

12.2.1 悬浮图层 290

12.2.2 弹出图层 293

12.3 区域类页面组件 297

12.3.1 Tab切换 297

12.3.2 折叠区域 300

12.4 导航类页面组件 303

12.4.1 下拉菜单 303

12.4.2 顶部固定菜单 306

12.4.3 滑动导航 308

12.5 其余页面组件 311

12.5.1 时间轴 311

12.5.2 图像轮播 313

12.5.3 日历组件 317

第叁3章 HTML5音频与视频 322

13.1 音频、摄像大旨开发技术 322

13.2 音频类开发 322

13.2.1 音频播放 322

13.2.2 迈克风操作 327

13.3 录像类开发 330

13.3.1 录制播放 330

13.3.2 录制背景 331

13.3.3 摄像头操作 333

第一4章 HTML5响应式设计 336

14.1 响应式设计基本技术 336

14.2 响应式设计案例 338

14.2.1 响应式列表 338

14.2.2 响应式内容图片 341

14.2.3 响应式背景 343

14.2.4 响应式图像轮播 346

14.2.5 响应式菜单 347

其三局地?HTML5综合案例篇

第②5章 HTML5微信游戏 354

15.1 制作思路 354

15.1.1 微信游戏支付基础知识 354

15.1.2 微信“520”小游戏策划 355

15.2 基础页面的开发 356

15.2.1 游戏界面设计 356

15.2.2 创建HTML页面 357

15.2.3 创建CSS样式 359

15.3 交互界面的支出 364

15.3.1 制作loading界面交互 364

15.3.2 制作开头界面交互 364

15.3.3 制作音乐控制器 366

15.3.4 获取点阵坐标 367

15.3.5 制作交互界面 368

15.3.6 制作结果界面 371

15.4 尾声 371

第壹6章 HTML5创意网站 379

16.1 制作思路与基础页面开发 379

16.1.1 站点规划与统筹 379

16.1.2 创设站点DOM结构 380

16.2 页面的鼓吹和互动效率创制 382

16.2.1 创设首页样式 382

16.2.2 创制次级页面样式 385

16.2.3 页面切换效果 389

16.3 页面细节处理 391

16.3.1 制作文章集内容页面 391

16.3.2 包容性提醒 394

16.4 小结 395

后记:Web设计变更及经验谈 403

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图