├── .gitignore ├── LICENSE ├── README.md ├── packages ├── 3D翻转轮播幻灯片 │ ├── 001 │ │ ├── 001.jpg │ │ ├── 001a.png │ │ ├── 002.jpg │ │ ├── 002a.png │ │ ├── 003.jpg │ │ ├── 003a.png │ │ ├── 004.jpg │ │ ├── 004a.png │ │ ├── 005.jpg │ │ ├── 005a.png │ │ ├── 006.jpg │ │ └── 006a.png │ ├── bg │ │ ├── blank.png │ │ ├── controls.png │ │ ├── light-timer-glow.png │ │ ├── loading.gif │ │ ├── shadow.png │ │ ├── thumb-frame.png │ │ └── trans.png │ ├── css │ │ ├── slider-style.css │ │ └── style.css │ ├── images │ │ └── js │ │ │ └── cute.css3d.module.js │ ├── index.html │ └── js │ │ ├── cute.slider.js │ │ ├── cute.transitions.all.js │ │ └── modernizr.min.js ├── 3D行走木头人背景 │ ├── css │ │ └── style.css │ ├── img │ │ └── godofredoninja.png │ ├── index.html │ └── js │ │ ├── TweenMax.min.js │ │ ├── hammer.min.js │ │ ├── index.js │ │ └── jquery.min.js ├── svg跳舞花朵 │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ ├── TweenMax.min.js │ │ └── index.js ├── 仿微信聊天 │ ├── css │ │ └── main.css │ ├── index.html │ └── js │ │ ├── jquery.min.js │ │ └── main.js ├── 幻灯片播放插件 │ ├── dist │ │ ├── css │ │ │ ├── lg-fb-comment-box.css │ │ │ ├── lg-fb-comment-box.css.map │ │ │ ├── lg-fb-comment-box.min.css │ │ │ ├── lg-transitions.css │ │ │ ├── lg-transitions.css.map │ │ │ ├── lg-transitions.min.css │ │ │ ├── lightgallery.css │ │ │ ├── lightgallery.css.map │ │ │ └── lightgallery.min.css │ │ ├── fonts │ │ │ ├── lg.eot │ │ │ ├── lg.svg │ │ │ ├── lg.ttf │ │ │ └── lg.woff │ │ ├── img │ │ │ ├── loading.gif │ │ │ ├── video-play.png │ │ │ ├── vimeo-play(1).png │ │ │ └── youtube-play.png │ │ └── js │ │ │ ├── lightgallery.js │ │ │ └── lightgallery.min.js │ ├── img │ │ ├── 1-1600.jpg │ │ ├── 1-375.jpg │ │ ├── 1-480.jpg │ │ ├── 1.jpg │ │ ├── 13-1600.jpg │ │ ├── 13-375.jpg │ │ ├── 13-480.jpg │ │ ├── 13.jpg │ │ ├── 2-1600.jpg │ │ ├── 2-375.jpg │ │ ├── 2-480.jpg │ │ ├── 2.jpg │ │ ├── 4-1600.jpg │ │ ├── 4-375.jpg │ │ ├── 4-480.jpg │ │ ├── 4.jpg │ │ ├── thumb-1.jpg │ │ ├── thumb-13.jpg │ │ ├── thumb-2.jpg │ │ └── thumb-4.jpg │ ├── index.html │ └── js │ │ ├── lg-autoplay.js │ │ ├── lg-autoplay.min.js │ │ ├── lg-fullscreen.js │ │ ├── lg-fullscreen.min.js │ │ ├── lg-hash.js │ │ ├── lg-hash.min.js │ │ ├── lg-pager.js │ │ ├── lg-pager.min.js │ │ ├── lg-share.js │ │ ├── lg-share.min.js │ │ ├── lg-thumbnail.js │ │ ├── lg-thumbnail.min.js │ │ ├── lg-video.js │ │ ├── lg-video.min.js │ │ ├── lg-zoom.js │ │ ├── lg-zoom.min.js │ │ ├── lightgallery.js │ │ ├── lightgallery.min.js │ │ └── picturefill.min.js ├── 底部多图轮播 │ ├── css │ │ ├── htmleaf-demo.css │ │ └── normalize.css │ ├── demo │ │ ├── deep-minified.html │ │ ├── no-jquery.html │ │ └── with-jquery.html │ ├── img │ │ ├── 01.jpg │ │ ├── 02.jpg │ │ ├── 03.jpg │ │ ├── 04.jpg │ │ ├── 05.jpg │ │ ├── 06.jpg │ │ ├── 07.jpg │ │ ├── 08.jpg │ │ ├── 09.jpg │ │ ├── 10.jpg │ │ ├── 11.jpg │ │ ├── 12.jpg │ │ ├── a17.png │ │ ├── loading.gif │ │ ├── t01.png │ │ ├── thumb-01.jpg │ │ ├── thumb-02.jpg │ │ ├── thumb-03.jpg │ │ ├── thumb-04.jpg │ │ ├── thumb-05.jpg │ │ ├── thumb-06.jpg │ │ ├── thumb-07.jpg │ │ ├── thumb-08.jpg │ │ ├── thumb-09.jpg │ │ ├── thumb-10.jpg │ │ ├── thumb-11.jpg │ │ └── thumb-12.jpg │ ├── index.html │ └── js │ │ ├── jquery-1.11.0.min.js │ │ ├── jssor.slider-21.1.6.debug.js │ │ ├── jssor.slider-21.1.6.min.js │ │ └── jssor.slider-21.1.6.mini.js ├── 搜索单页面 │ ├── css │ │ ├── bootstrap.min.css │ │ └── site.min.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.eot_ │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ ├── glyphicons-halflings-regular.woff │ │ └── glyphicons-halflings-regular.woff2.html │ ├── img │ │ ├── aliyun-logo.png │ │ ├── favicon.ico │ │ ├── favicon.png │ │ └── logo.png │ ├── index.html │ └── js │ │ ├── bootstrap.min.js │ │ └── main.js ├── 改变色块背景 │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ └── index.js ├── 粒子掉落时钟 │ ├── countdown.js │ ├── digit.js │ └── index.html ├── 粒子效果背景 │ ├── css │ │ ├── component.css │ │ ├── demo.css │ │ └── normalize.css │ ├── img │ │ ├── demo-1-bg.jpg │ │ └── demo-2-bg.jpg │ ├── index.html │ ├── index2.html │ ├── index3.html │ ├── index4.html │ └── js │ │ ├── EasePack.min.js │ │ ├── TweenLite.min.js │ │ ├── demo-1.js │ │ ├── demo-2.js │ │ ├── demo-3.js │ │ ├── demo-4.js │ │ └── rAF.js ├── 自定义粒子动画 │ ├── index.html │ ├── normalize.min.css │ └── pen.svg ├── 轮播图变大 │ ├── css │ │ ├── sequence-theme.mono.css │ │ ├── sequence-theme.mono.css.map │ │ └── sequence-theme.mono.min.css │ ├── images │ │ ├── bananas.png │ │ ├── bananas@2x.png │ │ ├── coconut.png │ │ ├── coconut@2x.png │ │ ├── next.svg │ │ ├── orange.png │ │ ├── orange@2x.png │ │ ├── prev.svg │ │ ├── tn-bananas.png │ │ ├── tn-bananas@2x.png │ │ ├── tn-coconut.png │ │ ├── tn-coconut@2x.png │ │ ├── tn-orange.png │ │ └── tn-orange@2x.png │ ├── index.html │ └── scripts │ │ ├── hammer.min.js │ │ ├── imagesloaded.pkgd.min.js │ │ ├── sequence-theme.mono.js │ │ ├── sequence-theme.mono.min.js │ │ ├── sequence.js │ │ ├── sequence.min.js │ │ └── sequence.min.map └── 页面过渡效果合集 │ ├── css │ ├── animations.css │ ├── component.css │ ├── default.css │ └── multilevelmenu.css │ ├── fonts │ └── menuicons │ │ └── icomoon.woff │ ├── index.html │ └── js │ ├── jquery-1.9.1.min.js │ ├── jquery.dlmenu.js │ ├── modernizr.custom.js │ └── pagetransitions.js └── pages ├── div全屏显示.html ├── 个人主页导航.html ├── 台湾网站查封单页面.html ├── 各种吱口令套路网页.html ├── 导航页面.html ├── 抽奖小游戏.html ├── 新浪每日搞笑动图.html ├── 照片墙特效.html ├── 照片展示.html ├── 独立站导航页面.html ├── 系统维护页面1.html ├── 系统维护页面2.html ├── 系统维护页面3.html ├── 网站自动跳转网页.html ├── 阿里云盘公告页.html ├── 韩文网站查封单页面.html └── 页面背景夕阳西下.html /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Alejandro 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # super-single-page 2 | 3 | 静态html单页面，极简，极炫~ 4 | 5 | ## pages 6 | 7 | | # | Project | Live Demo | 8 | | :-: | :----------------------------: | :-------: | 9 | | 01 |[导航页面](https://github.com/realwds/super-single-page/blob/gh-pages/pages/导航页面.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/导航页面.html)| 10 | | 02 |[独立站导航页面](https://github.com/realwds/super-single-page/blob/gh-pages/pages/独立站导航页面.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/独立站导航页面.html)| 11 | | 03 |[各种吱口令套路网页](https://github.com/realwds/super-single-page/blob/gh-pages/pages/各种吱口令套路网页.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/各种吱口令套路网页.html)| 12 | | 04 |[韩文网站查封单页面](https://github.com/realwds/super-single-page/blob/gh-pages/pages/韩文网站查封单页面.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/韩文网站查封单页面.html)| 13 | | 05 |[台湾网站查封单页面](https://github.com/realwds/super-single-page/blob/gh-pages/pages/台湾网站查封单页面.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/台湾网站查封单页面.html)| 14 | | 06 |[网站自动跳转网页](https://github.com/realwds/super-single-page/blob/gh-pages/pages/网站自动跳转网页.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/网站自动跳转网页.html)| 15 | | 07 |[系统维护页面1](https://github.com/realwds/super-single-page/blob/gh-pages/pages/系统维护页面1.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/系统维护页面1.html)| 16 | | 08 |[系统维护页面2](https://github.com/realwds/super-single-page/blob/gh-pages/pages/系统维护页面2.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/系统维护页面2.html)| 17 | | 09 |[系统维护页面3](https://github.com/realwds/super-single-page/blob/gh-pages/pages/系统维护页面3.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/系统维护页面3.html)| 18 | | 10 |[页面背景夕阳西下](https://github.com/realwds/super-single-page/blob/gh-pages/pages/页面背景夕阳西下.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/页面背景夕阳西下.html)| 19 | | 11 |[照片展示](https://github.com/realwds/super-single-page/blob/gh-pages/pages/照片展示.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/照片展示.html)| 20 | | 12 |[div全屏显示](https://github.com/realwds/super-single-page/blob/gh-pages/pages/div全屏显示.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/div全屏显示.html)| 21 | | 13 |[阿里云盘公告页](https://github.com/realwds/super-single-page/blob/gh-pages/pages/阿里云盘公告页.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/阿里云盘公告页.html)| 22 | | 14 |[新浪每日搞笑动图](https://github.com/realwds/super-single-page/blob/gh-pages/pages/新浪每日搞笑动图.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/新浪每日搞笑动图.html)| 23 | | 15 |[照片墙特效](https://github.com/realwds/super-single-page/blob/gh-pages/pages/照片墙特效.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/照片墙特效.html)| 24 | | 16 |[抽奖小游戏](https://github.com/realwds/super-single-page/blob/gh-pages/pages/抽奖小游戏.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/抽奖小游戏.html)| 25 | | 17 |[个人主页导航](https://github.com/realwds/super-single-page/blob/gh-pages/pages/个人主页导航.html)|[Live Demo](https://realwds.github.io/super-single-page/pages/个人主页导航.html)| 26 | 27 | ## packages 28 | 29 | | # | Project | Live Demo | 30 | | :-: | :----------------------------: | :-------: | 31 | | 01 |[底部多图轮播](https://github.com/realwds/super-single-page/blob/gh-pages/packages/底部多图轮播)|[Live Demo](https://realwds.github.io/super-single-page/packages/底部多图轮播)| 32 | | 02 |[仿微信聊天](https://github.com/realwds/super-single-page/blob/gh-pages/packages/仿微信聊天)|[Live Demo](https://realwds.github.io/super-single-page/packages/仿微信聊天)| 33 | | 03 |[改变色块背景](https://github.com/realwds/super-single-page/blob/gh-pages/packages/改变色块背景)|[Live Demo](https://realwds.github.io/super-single-page/packages/改变色块背景)| 34 | | 04 |[幻灯片播放插件](https://github.com/realwds/super-single-page/blob/gh-pages/packages/幻灯片播放插件)|[Live Demo](https://realwds.github.io/super-single-page/packages/幻灯片播放插件)| 35 | | 05 |[轮播图变大](https://github.com/realwds/super-single-page/blob/gh-pages/packages/轮播图变大)|[Live Demo](https://realwds.github.io/super-single-page/packages/轮播图变大)| 36 | | 06 |[搜索单页面](https://github.com/realwds/super-single-page/blob/gh-pages/packages/搜索单页面)|[Live Demo](https://realwds.github.io/super-single-page/packages/搜索单页面)| 37 | | 07 |[svg跳舞花朵](https://github.com/realwds/super-single-page/blob/gh-pages/packages/svg跳舞花朵)|[Live Demo](https://realwds.github.io/super-single-page/packages/svg跳舞花朵)| 38 | | 08 |[3D翻转轮播幻灯片](https://github.com/realwds/super-single-page/blob/gh-pages/packages/3D翻转轮播幻灯片)|[Live Demo](https://realwds.github.io/super-single-page/packages/3D翻转轮播幻灯片)| 39 | | 09 |[3D行走木头人背景](https://github.com/realwds/super-single-page/blob/gh-pages/packages/3D行走木头人背景)|[Live Demo](https://realwds.github.io/super-single-page/packages/3D行走木头人背景)| 40 | | 10 |[自定义粒子动画](https://github.com/realwds/super-single-page/blob/gh-pages/packages/自定义粒子动画)|[Live Demo](https://realwds.github.io/super-single-page/packages/自定义粒子动画)| 41 | | 11 |[粒子掉落时钟](https://github.com/realwds/super-single-page/blob/gh-pages/packages/粒子掉落时钟)|[Live Demo](https://realwds.github.io/super-single-page/packages/粒子掉落时钟)| 42 | | 12 |[粒子效果背景](https://github.com/realwds/super-single-page/blob/gh-pages/packages/粒子效果背景)|[Live Demo](https://realwds.github.io/super-single-page/packages/粒子效果背景)| 43 | | 13 |[页面过渡效果合集](https://github.com/realwds/super-single-page/blob/gh-pages/packages/页面过渡效果合集)|[Live Demo](https://realwds.github.io/super-single-page/packages/页面过渡效果合集)| 44 | 45 | ## Star History 46 | 47 | ![Star History Chart](https://api.star-history.com/svg?repos=realwds/super-single-page&type=Date) 48 | -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/001.jpg -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/001a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/001a.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/002.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/002.jpg -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/002a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/002a.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/003.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/003.jpg -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/003a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/003a.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/004.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/004.jpg -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/004a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/004a.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/005.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/005.jpg -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/005a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/005a.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/006.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/006.jpg -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/001/006a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/001/006a.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/bg/blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/bg/blank.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/bg/controls.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/bg/controls.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/bg/light-timer-glow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/bg/light-timer-glow.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/bg/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/bg/loading.gif -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/bg/shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/bg/shadow.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/bg/thumb-frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/bg/thumb-frame.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/bg/trans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D翻转轮播幻灯片/bg/trans.png -------------------------------------------------------------------------------- /packages/3D翻转轮播幻灯片/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3D翻转轮播幻灯片 7 | 8 | 9 | 10 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |
    26 |
  • 29 | 30 | 31 |
    • 32 |
  • 35 | 36 | 37 |
    • 38 |
  • 41 | 42 | 43 |
    • 44 |
  • 47 | 48 | 49 |
    • 50 |
  • 53 | 54 | 55 |
    • 56 |
  • 59 | 60 | 61 |
    • 62 |
63 |
    64 |
  • 65 |
  • 66 |
  • 67 |
  • 68 |
  • 69 |
  • 70 |
    • 71 |
  • 72 |
  • 73 |
74 |
75 |
shadow
76 |
77 |

78 | 92 |

93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /packages/3D行走木头人背景/img/godofredoninja.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/3D行走木头人背景/img/godofredoninja.png -------------------------------------------------------------------------------- /packages/3D行走木头人背景/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 3D行走木头人背景 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | 37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | 65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | 78 |
79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /packages/3D行走木头人背景/js/index.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | var $Godo = $('.Godo'); 5 | var $Scene = $('.Scene'); 6 | var axis = {x:0, y:0, rx:0, ry:0, rz:0, s:1}; 7 | 8 | var GodoScene = new Hammer.Manager($Scene[0]); 9 | GodoScene.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) ); 10 | GodoScene.add( new Hammer.Pinch({ threshold: 0 }) ); 11 | 12 | GodoScene.on("pan", function(e){ 13 | axis.rx = axis.x + e.deltaX; 14 | axis.ry = axis.y - e.deltaY; 15 | TweenMax.to($Godo, 0.5, {'scale': axis.s , 'rotationY': axis.rx, 'rotationX': axis.ry, overwrite:1, ease:Strong.easeOut}); 16 | }) 17 | .on("panend", function(e){ 18 | axis.x += e.deltaX; 19 | axis.y -= e.deltaY; 20 | }) 21 | 22 | })(); -------------------------------------------------------------------------------- /packages/svg跳舞花朵/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | width: 100vw; 4 | min-height: 100vh; 5 | padding: 0; 6 | margin: 0; 7 | background-color: #ffeaf1; 8 | } 9 | 10 | .container { 11 | position: relative; 12 | display: -webkit-box; 13 | display: -ms-flexbox; 14 | display: flex; 15 | -webkit-box-orient: vertical; 16 | -webkit-box-direction: normal; 17 | -ms-flex-direction: column; 18 | flex-direction: column; 19 | -webkit-box-pack: center; 20 | -ms-flex-pack: center; 21 | justify-content: center; 22 | -webkit-box-align: center; 23 | -ms-flex-align: center; 24 | align-items: center; 25 | height: 100vh; 26 | width: 100vw; 27 | } 28 | 29 | svg { 30 | width: 600px; 31 | height: 600px; 32 | } 33 | 34 | .buttons { 35 | display: -webkit-box; 36 | display: -ms-flexbox; 37 | display: flex; 38 | -ms-flex-wrap: wrap; 39 | flex-wrap: wrap; 40 | -webkit-box-pack: center; 41 | -ms-flex-pack: center; 42 | justify-content: center; 43 | -webkit-box-align: center; 44 | -ms-flex-align: center; 45 | align-items: center; 46 | max-width: 500px; 47 | margin: 0 auto; 48 | } 49 | 50 | button { 51 | padding: 10px 20px; 52 | border: none; 53 | color: white; 54 | text-transform: uppercase; 55 | margin: 0 10px 10px 0; 56 | cursor: pointer; 57 | letter-spacing: 1px; 58 | font-size: 20px; 59 | font-family: "Comfortaa", sans-serif; 60 | border-radius: 4px; 61 | -webkit-transition: all 0.25s ease; 62 | transition: all 0.25s ease; 63 | } 64 | button#btn-happy { 65 | background-color: #eb584d; 66 | } 67 | button#btn-happy:hover { 68 | background-color: #e62d1f; 69 | } 70 | button#btn-cool { 71 | background-color: #007185; 72 | } 73 | button#btn-cool:hover { 74 | background-color: #004652; 75 | } 76 | button#btn-sexy { 77 | background-color: #e5004e; 78 | } 79 | button#btn-sexy:hover { 80 | background-color: #b2003d; 81 | } 82 | button#btn-crazy { 83 | background-color: #883277; 84 | } 85 | button#btn-crazy:hover { 86 | background-color: #632456; 87 | } 88 | 89 | button:last-child { 90 | margin-right: 0; 91 | } 92 | 93 | button:focus { 94 | outline: none; 95 | border: 0; 96 | } 97 | -------------------------------------------------------------------------------- /packages/仿微信聊天/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | /*background:url(images/yuyin_bg.png) no-repeat; 3 | */ 4 | background:#eee; 5 | background-size:100%; 6 | font-family:"微软雅黑"; 7 | } 8 | @media all and (min-width:640px) { 9 | body,html,.wenwen-footer,.speak_window { 10 | width:640px!important; 11 | margin:0 auto 12 | } 13 | .speak_window,.wenwen-footer { 14 | left:50%!important; 15 | margin-left:-320px 16 | } 17 | }input,button { 18 | outline:none; 19 | } 20 | .wenwen-footer { 21 | width:100%; 22 | position:fixed; 23 | bottom:-5px; 24 | left:0; 25 | background:#fff; 26 | padding:10px; 27 | border-top:solid 1px #ddd; 28 | box-sizing:border-box; 29 | display:flex; 30 | justify-content:space-around; 31 | align-items:center; 32 | padding-top:1%; 33 | } 34 | .wenwen_btn,.wenwen_help { 35 | width:15%; 36 | text-align:center; 37 | } 38 | .wenwen_btn img,.wenwen_help img { 39 | height:30px; 40 | } 41 | .wenwen_text { 42 | height:40px; 43 | border-bottom:solid 1px #C3BFBF; 44 | box-sizing:border-box; 45 | width:66%; 46 | text-align:center; 47 | overflow:hidden; 48 | margin-left:2%; 49 | } 50 | .circle-button { 51 | padding:0 5px; 52 | } 53 | .wenwen_text .circle-button { 54 | font-size:14px; 55 | color:#666; 56 | line-height:38px; 57 | } 58 | .write_box { 59 | width:100%; 60 | height:40px; 61 | line-height:40px; 62 | } 63 | .write_box input { 64 | height:40px; 65 | padding:0 5px; 66 | line-height:40px; 67 | width:100%; 68 | box-sizing:border-box; 69 | border:0; 70 | font-family:"微软雅黑"; 71 | font-size:15px; 72 | } 73 | .wenwen_help button { 74 | width:95%; 75 | background:#8CCC49; 76 | color:#fff; 77 | border-radius:5px; 78 | border:0; 79 | height:30px; 80 | display:block; 81 | font-family:"微软雅黑"; 82 | } 83 | #wenwen { 84 | height:100%; 85 | } 86 | .speak_window { 87 | overflow-y:hidden; 88 | height:100%; 89 | width:100%; 90 | position:fixed; 91 | top:0; 92 | left:0; 93 | } 94 | .speak_box { 95 | margin-bottom:70px; 96 | padding:10px; 97 | } 98 | .question,.answer { 99 | margin-bottom:1rem; 100 | } 101 | .question { 102 | text-align:right; 103 | } 104 | .question>div { 105 | display:inline-block; 106 | } 107 | .left { 108 | float:left; 109 | } 110 | .right { 111 | float:right; 112 | } 113 | .clear { 114 | clear:both; 115 | } 116 | .heard_img { 117 | height:44px; 118 | width:44px; 119 | border-radius:3px; 120 | overflow:hidden; 121 | background:#ddd; 122 | } 123 | .heard_img img { 124 | width:100%; 125 | height:100% 126 | } 127 | .question_text,.answer_text { 128 | box-sizing:border-box; 129 | position:relative; 130 | display:table-cell; 131 | min-height:45px; 132 | } 133 | .question_text { 134 | padding-right:12px; 135 | } 136 | .answer_text { 137 | padding-left:12px; 138 | } 139 | .question_text p { 140 | border-radius:5px; 141 | padding:.5rem; 142 | margin:0; 143 | font-size:14px; 144 | line-height:20px; 145 | box-sizing:border-box; 146 | vertical-align:middle; 147 | display:table-cell; 148 | word-wrap:break-word; 149 | max-width:65vw; 150 | min-width:10vw; 151 | box-shadow:-1px 1px 1px 1px rgba(0,0,0,.1); 152 | } 153 | .answer_text p { 154 | border-radius:5px; 155 | padding:.5rem; 156 | margin:0; 157 | font-size:14px; 158 | line-height:20px; 159 | box-sizing:border-box; 160 | vertical-align:middle; 161 | display:table-cell; 162 | word-wrap:break-word; 163 | max-width:65vw; 164 | min-width:10vw; 165 | box-shadow:1px 1px 1px 1px rgba(0,0,0,.1); 166 | } 167 | .answer_text p { 168 | background:#fff; 169 | } 170 | .question_text p { 171 | background:#8CCC49; 172 | color:#000; 173 | text-align:left; 174 | } 175 | .question_text i,.answer_text i { 176 | width:0; 177 | height:0; 178 | border-top:5px solid transparent; 179 | border-bottom:5px solid transparent; 180 | position:absolute; 181 | top:14px; 182 | } 183 | .answer_text i { 184 | border-right:6px solid #fff; 185 | left:6px; 186 | } 187 | .question_text i { 188 | border-left:6px solid #8CCC49; 189 | right:6px; 190 | } 191 | .answer_text p a { 192 | color:#42929d; 193 | display:inline-block; 194 | } 195 | audio { 196 | display:none; 197 | } 198 | .saying { 199 | position:fixed; 200 | bottom:30%; 201 | left:50%; 202 | width:120px; 203 | margin-left:-60px; 204 | display:none; 205 | } 206 | .saying img { 207 | width:100%; 208 | } 209 | .write_list { 210 | position:absolute; 211 | left:0; 212 | width:100%; 213 | background:#fff; 214 | border-top:solid 1px #ddd; 215 | padding:5px; 216 | line-height:30px; 217 | } -------------------------------------------------------------------------------- /packages/仿微信聊天/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 仿微信聊天 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 |

嗨，小帅帅在此！您有什么想跟我说的，都可以在这里跟我讲哦！

21 | 22 |
23 |
24 |
25 |
26 | 27 |
28 | 29 |
30 | 31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 |
39 | 40 |
41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /packages/仿微信聊天/js/main.js: -------------------------------------------------------------------------------- 1 | function to_write() { 2 | $('.wenwen_btn img').attr('src', 'images/yy_btn.png'); 3 | $('.wenwen_btn').attr('onclick', 'to_say()'); 4 | $('.write_box,.wenwen_help button').show(); 5 | $('.circle-button,.wenwen_help a').hide(); 6 | $('.write_box input').focus(); 7 | for_bottom(); 8 | } 9 | 10 | function to_say() { 11 | $('.write_list').remove(); 12 | $('.wenwen_btn img').attr('src', 'images/jp_btn.png'); 13 | $('.wenwen_btn').attr('onclick', 'to_write()'); 14 | $('.write_box,.wenwen_help button').hide(); 15 | $('.circle-button,.wenwen_help a').show(); 16 | } 17 | 18 | var Bene = [ 19 | '你终于来啦，我找你N年了，去火星干什么了？我现在去冥王星，回头跟你说个事，别走开啊！', 20 | '有事找我请大叫！', 21 | '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复，反正我看不见', 22 | '起床时想到你的微笑，洗脸时嗅到你的味道，上床前你是我的需要。真的不能离开你，我亲爱的??马桶', 23 | '嘿，我知道一个能让我在走路的时候不被绷带绊倒的办法，你们想听么？', 24 | '帅有个屁用！到头来还不是被卒吃掉！', 25 | '如果你看到面前的阴影，别怕，那是因为你的背后有阳光。', 26 | '付出就要赢得回报，这是永恒的真理，自古以来很少有人能突破它。然而，如果有人能够超越它的限制，付出而不求回报，那么他一定会得到得更多。', 27 | '从前有个怪物，他一直在吃东西，却怎么也吃不饱。所以到最后，他把他自己也吃掉了！ ', 28 | '如果你受苦了，感谢生活，那是它给你的一份感觉；如果你受苦了，感谢上帝，说明你还活着。人们的灾祸往往成为他们的学问。', 29 | '本人纯属虚构，如遇在线，实属见鬼！', 30 | '就算你是一支狗尾巴草，也要把自己包装成一支有特色又有气质的狗尾巴草，合作的时候先夸大，之后再做实事。记住，你就是一支特立独行又优雅的狗尾巴草，千万别把自己说成玫瑰”。', 31 | '我觉得最大的歧视就是怜悯，比如一个残疾的人或者生活很不幸的人，你对他越怜悯，这是对他最大的歧视，其实我们从来不怜悯悲伤，而是带着悲伤一块玩。', 32 | '我的人生有A面也有B面，你的人生有S面也有B面。', 33 | '生活有时就像被太监强奸一样??反抗是痛苦，不反抗还是痛苦！', 34 | '我也是从石头里蹦出来的，为什么我不是猴子呢？', 35 | '令我感到骄傲和自豪的是，至今为止，地球仍被我踩在脚下。 ', 36 | '物价涨得太快，所以我在餐馆吃饭的时候都会先付钱。', 37 | '以解决自己的问题为目标，这是一个实实在在的道理，正视自己的问题，设法解决它，这是成功的捷径。谁能塌下心来把目光凝集在一个个小漏洞、小障碍上，谁就先迈出了一大步。', 38 | '真的要跟我聊天？想好了？不后悔了？真的不后悔了？', 39 | '一个男人的价值，可以从他胡子的长度，以及……皮带的长度上看出来', 40 | '如果1分钟内没答复，那么我在小便；如果5分钟内没答复，那么我在大便；如果30分钟内没答复，那么我没带纸。', 41 | '你的眼睛眨一下，我就死去，你的眼睛再眨一下，我就活过来，你的眼睛不停地眨来眨去，于是我便死去活来！', 42 | '你怎么点到这里来了啊！你点到鬼门关了还不快下线要不我都救不了你了，回去洗个澡烧柱香还能活三十年！', 43 | '欠我的钱你什么时候还啊~~不还别吵我~~', 44 | '很多人都说我是吸血鬼，但你看，其实我并不讨厌阳光，相反，我还经常在白天打架呢！', 45 | '本人现在位置：WC，姿势：下蹲 脸部：抽搐 状态：用力中。。。。 ', 46 | '本机已调成震动 ,小心说话 ,我机子子震坏了 ,看我扁你不！', 47 | '你好.我去叫几个人,很快回来 。', 48 | '单身的典型标志就是一个月流量套餐早没了，通话套餐还剩一大半。' 49 | ] 50 | 51 | function up_say() { 52 | $('.write_list').remove(); 53 | 54 | var text = $('.write_box input').val(), 55 | str = '
'; 56 | str += '
'; 57 | str += '

' + text + '

'; 58 | str += '
'; 59 | 60 | if (text == '') { 61 | alert('请输入提问！'); 62 | $('.write_box input').focus(); 63 | } else { 64 | $('.speak_box').append(str); 65 | $('.write_box input').val(''); 66 | // $('.write_box input').focus(); 67 | $(".write_box input").blur(); 68 | autoWidth(); 69 | for_bottom(); 70 | setTimeout(function() { 71 | var Benelen = Math.floor(Math.random() * 29); 72 | var ans = '
'; 73 | ans += '

' + Bene[Benelen] + '

'; 74 | ans += '
'; 75 | $('.speak_box').append(ans); 76 | for_bottom(); 77 | }, 1000); 78 | } 79 | } 80 | 81 | var wen = document.getElementById('wenwen'); 82 | 83 | function _touch_start(event) { 84 | event.preventDefault(); 85 | $('.wenwen_text').css('background', '#c1c1c1'); 86 | $('.wenwen_text span').css('color', '#fff'); 87 | $('.saying').show(); 88 | } 89 | 90 | function _touch_end(event) { 91 | event.preventDefault(); 92 | $('.wenwen_text').css('background', '#fff'); 93 | $('.wenwen_text .circle-button').css('color', '#666'); 94 | $('.saying').hide(); 95 | var str = '
'; 96 | str += '
'; 97 | str += '

不好意思，我听不清！

'; 98 | str += '
'; 99 | $('.speak_box').append(str); 100 | for_bottom(); 101 | setTimeout(function() { 102 | var ans = '
'; 103 | ans += '

我不知道你在说什么?

'; 104 | ans += '
'; 105 | $('.speak_box').append(ans); 106 | for_bottom(); 107 | }, 1000); 108 | } 109 | 110 | // wen.addEventListener("touchstart", _touch_start, false); 111 | // wen.addEventListener("touchend", _touch_end, false); 112 | 113 | function for_bottom() { 114 | var speak_height = $('.speak_box').height(); 115 | $('.speak_box,.speak_window').animate({ 116 | scrollTop: speak_height 117 | }, 500); 118 | } 119 | 120 | function autoWidth() { 121 | $('.question_text').css('max-width', $('.question').width() - 60); 122 | } 123 | autoWidth(); -------------------------------------------------------------------------------- /packages/幻灯片播放插件/dist/css/lg-fb-comment-box.css: -------------------------------------------------------------------------------- 1 | .lg-outer.fb-comments .lg-img-wrap { 2 | padding-right: 400px !important; } 3 | .lg-outer.fb-comments .fb-comments { 4 | height: 100%; 5 | overflow-y: auto; 6 | position: absolute; 7 | right: 0; 8 | top: 0; 9 | width: 420px; 10 | z-index: 99999; 11 | background: #fff url("../img/loading.gif") no-repeat scroll center center; } 12 | .lg-outer.fb-comments .fb-comments.fb_iframe_widget { 13 | background-image: none; } 14 | .lg-outer.fb-comments .fb-comments.fb_iframe_widget.fb_iframe_widget_loader { 15 | background: #fff url("../img/loading.gif") no-repeat scroll center center; } 16 | .lg-outer.fb-comments .lg-toolbar { 17 | right: 420px; 18 | width: auto; } 19 | .lg-outer.fb-comments .lg-actions .lg-next { 20 | right: 420px; } 21 | .lg-outer.fb-comments .lg-item { 22 | background-image: none; } 23 | .lg-outer.fb-comments .lg-item.lg-complete .lg-img-wrap { 24 | background-image: none; } 25 | .lg-outer.fb-comments .lg-img-wrap { 26 | background: url(../img/loading.gif) no-repeat scroll center center transparent; } 27 | .lg-outer.fb-comments .lg-sub-html { 28 | padding: 0; 29 | position: static; } 30 | 31 | /*# sourceMappingURL=lg-fb-comment-box.css.map */ 32 | -------------------------------------------------------------------------------- /packages/幻灯片播放插件/dist/css/lg-fb-comment-box.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAGI,kCAAa;EACT,aAAa,EAAE,gBAAgB;AAEnC,kCAAa;EACT,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,CAAC;EACR,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,KAAK;EACZ,OAAO,EAAE,KAAK;EACd,UAAU,EAAE,6DAA6D;EACzE,mDAAmB;IACf,gBAAgB,EAAE,IAAI;IACtB,2EAAyB;MACrB,UAAU,EAAE,6DAA6D;AAIrF,iCAAY;EACR,KAAK,EAAE,KAAK;EACZ,KAAK,EAAE,IAAI;AAEf,0CAAqB;EACjB,KAAK,EAAE,KAAK;AAEhB,8BAAS;EACL,gBAAgB,EAAE,IAAI;EAElB,uDAAY;IACR,gBAAgB,EAAE,IAAI;AAIlC,kCAAa;EACT,UAAU,EAAE,kEAAkE;AAGlF,kCAAa;EACT,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,MAAM", 4 | "sources": ["../sass/lg-fb-comment-box.scss"], 5 | "names": [], 6 | "file": "lg-fb-comment-box.css" 7 | } 8 | -------------------------------------------------------------------------------- /packages/幻灯片播放插件/dist/css/lg-fb-comment-box.min.css: -------------------------------------------------------------------------------- 1 | .lg-outer.fb-comments .fb-comments{height:100%;overflow-y:auto;position:absolute;right:0;top:0;width:420px;z-index:99999;background:url(../img/loading.gif) center center no-repeat #fff}.lg-outer.fb-comments .fb-comments.fb_iframe_widget{background-image:none}.lg-outer.fb-comments .fb-comments.fb_iframe_widget.fb_iframe_widget_loader{background:url(../img/loading.gif) center center no-repeat #fff}.lg-outer.fb-comments .lg-toolbar{right:420px;width:auto}.lg-outer.fb-comments .lg-actions .lg-next{right:420px}.lg-outer.fb-comments .lg-item,.lg-outer.fb-comments .lg-item.lg-complete .lg-img-wrap{background-image:none}.lg-outer.fb-comments .lg-img-wrap{padding-right:400px!important;background:url(../img/loading.gif) center center no-repeat}.lg-outer.fb-comments .lg-sub-html{padding:0;position:static} -------------------------------------------------------------------------------- /packages/幻灯片播放插件/dist/fonts/lg.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/dist/fonts/lg.eot -------------------------------------------------------------------------------- /packages/幻灯片播放插件/dist/fonts/lg.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/dist/fonts/lg.ttf -------------------------------------------------------------------------------- /packages/幻灯片播放插件/dist/fonts/lg.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/dist/fonts/lg.woff -------------------------------------------------------------------------------- /packages/幻灯片播放插件/dist/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/dist/img/loading.gif -------------------------------------------------------------------------------- /packages/幻灯片播放插件/dist/img/video-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/dist/img/video-play.png -------------------------------------------------------------------------------- /packages/幻灯片播放插件/dist/img/vimeo-play(1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/dist/img/vimeo-play(1).png -------------------------------------------------------------------------------- /packages/幻灯片播放插件/dist/img/youtube-play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/dist/img/youtube-play.png -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/1-1600.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/1-1600.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/1-375.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/1-375.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/1-480.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/1-480.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/1.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/13-1600.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/13-1600.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/13-375.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/13-375.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/13-480.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/13-480.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/13.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/2-1600.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/2-1600.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/2-375.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/2-375.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/2-480.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/2-480.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/2.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/4-1600.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/4-1600.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/4-375.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/4-375.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/4-480.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/4-480.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/4.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/thumb-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/thumb-1.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/thumb-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/thumb-13.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/thumb-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/thumb-2.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/img/thumb-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/幻灯片播放插件/img/thumb-4.jpg -------------------------------------------------------------------------------- /packages/幻灯片播放插件/js/lg-autoplay.min.js: -------------------------------------------------------------------------------- 1 | /**! 2 | * lg-autoplay.js | 0.0.1 | August 1st 2016 3 | * http://sachinchoolur.github.io/lg-autoplay.js 4 | * Copyright (c) 2016 Sachin N; 5 | * @license Apache 2.0 6 | */ 7 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.LgAutoplay=e()}}(function(){var e,t,o;return function e(t,o,r){function s(n,u){if(!o[n]){if(!t[n]){var i="function"==typeof require&&require;if(!u&&i)return i(n,!0);if(l)return l(n,!0);var c=new Error("Cannot find module '"+n+"'");throw c.code="MODULE_NOT_FOUND",c}var a=o[n]={exports:{}};t[n][0].call(a.exports,function(e){var o=t[n][1][e];return s(o?o:e)},a,a.exports,e,t,o,r)}return o[n].exports}for(var l="function"==typeof require&&require,n=0;n
'),e.progress(),e.core.s.autoplay&&e.startlAuto(),utils.on(e.el,"onDragstart.lgtm touchstart.lgtm",function(){e.interval&&(e.cancelAuto(),e.canceledOnTouch=!0)}),utils.on(e.el,"onDragend.lgtm touchend.lgtm onSlideClick.lgtm",function(){!e.interval&&e.canceledOnTouch&&(e.startlAuto(),e.canceledOnTouch=!1)})},o.prototype.progress=function(){var e=this,t,o;utils.on(e.el,"onBeforeSlide.lgtm",function(){e.core.s.progressBar&&e.fromAuto&&(t=e.core.outer.querySelector(".lg-progress-bar"),o=e.core.outer.querySelector(".lg-progress"),e.interval&&(o.removeAttribute("style"),utils.removeClass(t,"lg-start"),setTimeout(function(){utils.setVendor(o,"Transition","width "+(e.core.s.speed+e.core.s.pause)+"ms ease 0s"),utils.addClass(t,"lg-start")},20))),e.fromAuto||e.core.s.fourceAutoplay||e.cancelAuto(),e.fromAuto=!1})},o.prototype.controls=function(){var e=this,t='';e.core.outer.querySelector(this.core.s.appendAutoplayControlsTo).insertAdjacentHTML("beforeend",t),utils.on(e.core.outer.querySelector(".lg-autoplay-button"),"click.lg",function(){utils.hasClass(e.core.outer,"lg-show-autoplay")?(e.cancelAuto(),e.core.s.fourceAutoplay=!1):e.interval||(e.startlAuto(),e.core.s.fourceAutoplay=e.fourceAutoplayTemp)})},o.prototype.startlAuto=function(){var e=this;utils.setVendor(e.core.outer.querySelector(".lg-progress"),"Transition","width "+(e.core.s.speed+e.core.s.pause)+"ms ease 0s"),utils.addClass(e.core.outer,"lg-show-autoplay"),utils.addClass(e.core.outer.querySelector(".lg-progress-bar"),"lg-start"),e.interval=setInterval(function(){e.core.index+1-1?e.core.slide(o,!1,!1):e.core.lGalleryOn&&e.core.destroy()})},o.prototype.destroy=function(){this.core.s.hash&&(this.oldHash&&this.oldHash.indexOf("lg="+this.core.s.galleryId)<0?window.location.hash=this.oldHash:history.pushState?history.pushState("",document.title,window.location.pathname+window.location.search):window.location.hash="",utils.off(this.core.el,".lghash"))},window.lgModules.hash=o})},{}]},{},[1])(1)}); -------------------------------------------------------------------------------- /packages/幻灯片播放插件/js/lg-pager.js: -------------------------------------------------------------------------------- 1 | /**! 2 | * lg-pager.js | 0.0.1 | August 1st 2016 3 | * http://sachinchoolur.github.io/lg-pager.js 4 | * Copyright (c) 2016 Sachin N; 5 | * @license Apache 2.0 6 | */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.LgPager = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o 1) { 48 | this.init(); 49 | } 50 | 51 | return this; 52 | }; 53 | 54 | Pager.prototype.init = function () { 55 | var _this = this; 56 | var pagerList = ''; 57 | var $pagerCont; 58 | var $pagerOuter; 59 | var timeout; 60 | 61 | _this.core.outer.querySelector('.lg').insertAdjacentHTML('beforeend', '
'); 62 | 63 | if (_this.core.s.dynamic) { 64 | for (var j = 0; j < _this.core.s.dynamicEl.length; j++) { 65 | pagerList += '
'; 66 | } 67 | } else { 68 | for (var i = 0; i < _this.core.items.length; i++) { 69 | if (!_this.core.s.exThumbImage) { 70 | pagerList += '
'; 71 | } else { 72 | pagerList += '
'; 73 | } 74 | } 75 | } 76 | 77 | $pagerOuter = _this.core.outer.querySelector('.lg-pager-outer'); 78 | 79 | $pagerOuter.innerHTML = pagerList; 80 | 81 | $pagerCont = _this.core.outer.querySelectorAll('.lg-pager-cont'); 82 | for (var k = 0; k < $pagerCont.length; k++) { 83 | 84 | /*jshint loopfunc: true */ 85 | (function (index) { 86 | utils.on($pagerCont[index], 'click.lg touchend.lg', function () { 87 | _this.core.index = index; 88 | _this.core.slide(_this.core.index, false, false); 89 | }); 90 | })(k); 91 | } 92 | 93 | utils.on($pagerOuter, 'mouseover.lg', function () { 94 | clearTimeout(timeout); 95 | utils.addClass($pagerOuter, 'lg-pager-hover'); 96 | }); 97 | 98 | utils.on($pagerOuter, 'mouseout.lg', function () { 99 | timeout = setTimeout(function () { 100 | utils.removeClass($pagerOuter, 'lg-pager-hover'); 101 | }); 102 | }); 103 | 104 | utils.on(_this.core.el, 'onBeforeSlide.lgtm', function (e) { 105 | for (var n = 0; n < $pagerCont.length; n++) { 106 | utils.removeClass($pagerCont[n], 'lg-pager-active'); 107 | if (e.detail.index === n) { 108 | utils.addClass($pagerCont[n], 'lg-pager-active'); 109 | } 110 | } 111 | }); 112 | }; 113 | 114 | Pager.prototype.destroy = function () {}; 115 | 116 | window.lgModules.pager = Pager; 117 | }); 118 | 119 | },{}]},{},[1])(1) 120 | }); -------------------------------------------------------------------------------- /packages/幻灯片播放插件/js/lg-pager.min.js: -------------------------------------------------------------------------------- 1 | /**! 2 | * lg-pager.js | 0.0.1 | August 1st 2016 3 | * http://sachinchoolur.github.io/lg-pager.js 4 | * Copyright (c) 2016 Sachin N; 5 | * @license Apache 2.0 6 | */ 7 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.LgPager=e()}}(function(){var e,t,r;return function e(t,r,n){function o(i,a){if(!r[i]){if(!t[i]){var l="function"==typeof require&&require;if(!a&&l)return l(i,!0);if(s)return s(i,!0);var c=new Error("Cannot find module '"+i+"'");throw c.code="MODULE_NOT_FOUND",c}var u=r[i]={exports:{}};t[i][0].call(u.exports,function(e){var r=t[i][1][e];return o(r?r:e)},u,u.exports,e,t,r,n)}return r[i].exports}for(var s="function"==typeof require&&require,i=0;i1&&this.init(),this};r.prototype.init=function(){var e=this,t="",r,n,o;if(e.core.outer.querySelector(".lg").insertAdjacentHTML("beforeend",'
'),e.core.s.dynamic)for(var s=0;s
';else for(var i=0;i
':'
';n=e.core.outer.querySelector(".lg-pager-outer"),n.innerHTML=t,r=e.core.outer.querySelectorAll(".lg-pager-cont");for(var a=0;a'; 65 | shareHtml += _this.core.s.facebook ? '
  • ' + this.core.s.facebookDropdownText + '
    • ' : ''; 66 | shareHtml += _this.core.s.twitter ? '
  • ' + this.core.s.twitterDropdownText + '
    • ' : ''; 67 | shareHtml += _this.core.s.googlePlus ? '
  • ' + this.core.s.googlePlusDropdownText + '
    • ' : ''; 68 | shareHtml += _this.core.s.pinterest ? '
  • ' + this.core.s.pinterestDropdownText + '
    • ' : ''; 69 | shareHtml += ''; 70 | 71 | this.core.outer.querySelector('.lg-toolbar').insertAdjacentHTML('beforeend', shareHtml); 72 | this.core.outer.querySelector('.lg').insertAdjacentHTML('beforeend', '
    '); 73 | utils.on(document.getElementById('lg-share'), 'click.lg', function () { 74 | if (utils.hasClass(_this.core.outer, 'lg-dropdown-active')) { 75 | utils.removeClass(_this.core.outer, 'lg-dropdown-active'); 76 | } else { 77 | utils.addClass(_this.core.outer, 'lg-dropdown-active'); 78 | } 79 | }); 80 | 81 | utils.on(document.getElementById('lg-dropdown-overlay'), 'click.lg', function () { 82 | utils.removeClass(_this.core.outer, 'lg-dropdown-active'); 83 | }); 84 | 85 | utils.on(_this.core.el, 'onAfterSlide.lgtm', function (event) { 86 | 87 | setTimeout(function () { 88 | document.getElementById('lg-share-facebook').setAttribute('href', 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(_this.core.items[event.detail.index].getAttribute('data-facebook-share-url') || window.location.href)); 89 | 90 | document.getElementById('lg-share-twitter').setAttribute('href', 'https://twitter.com/intent/tweet?text=' + _this.core.items[event.detail.index].getAttribute('data-tweet-text') + '&url=' + encodeURIComponent(_this.core.items[event.detail.index].getAttribute('data-twitter-share-url') || window.location.href)); 91 | 92 | document.getElementById('lg-share-googleplus').setAttribute('href', 'https://plus.google.com/share?url=' + encodeURIComponent(_this.core.items[event.detail.index].getAttribute('data-googleplus-share-url') || window.location.href)); 93 | 94 | document.getElementById('lg-share-pinterest').setAttribute('href', 'http://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(_this.core.items[event.detail.index].getAttribute('data-pinterest-share-url') || window.location.href) + '&media=' + encodeURIComponent(_this.core.items[event.detail.index].getAttribute('href') || _this.core.items[event.detail.index].getAttribute('data-src')) + '&description=' + _this.core.items[event.detail.index].getAttribute('data-pinterest-text')); 95 | }, 100); 96 | }); 97 | }; 98 | 99 | Share.prototype.destroy = function () {}; 100 | 101 | window.lgModules.share = Share; 102 | }); 103 | 104 | },{}]},{},[1])(1) 105 | }); -------------------------------------------------------------------------------- /packages/幻灯片播放插件/js/lg-share.min.js: -------------------------------------------------------------------------------- 1 | /**! 2 | * lg-share.js | 0.0.1 | August 1st 2016 3 | * http://sachinchoolur.github.io/lg-share.js 4 | * Copyright (c) 2016 Sachin N; 5 | * @license Apache 2.0 6 | */ 7 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.LgShare=e()}}(function(){var e,t,o;return function e(t,o,r){function n(s,l){if(!o[s]){if(!t[s]){var a="function"==typeof require&&require;if(!l&&a)return a(s,!0);if(i)return i(s,!0);var d=new Error("Cannot find module '"+s+"'");throw d.code="MODULE_NOT_FOUND",d}var c=o[s]={exports:{}};t[s][0].call(c.exports,function(e){var o=t[s][1][e];return n(o?o:e)},c,c.exports,e,t,o,r)}return o[s].exports}for(var i="function"==typeof require&&require,s=0;s",this.core.outer.querySelector(".lg-toolbar").insertAdjacentHTML("beforeend",t),this.core.outer.querySelector(".lg").insertAdjacentHTML("beforeend",'
    '),utils.on(document.getElementById("lg-share"),"click.lg",function(){utils.hasClass(e.core.outer,"lg-dropdown-active")?utils.removeClass(e.core.outer,"lg-dropdown-active"):utils.addClass(e.core.outer,"lg-dropdown-active")}),utils.on(document.getElementById("lg-dropdown-overlay"),"click.lg",function(){utils.removeClass(e.core.outer,"lg-dropdown-active")}),utils.on(e.core.el,"onAfterSlide.lgtm",function(t){setTimeout(function(){document.getElementById("lg-share-facebook").setAttribute("href","https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(e.core.items[t.detail.index].getAttribute("data-facebook-share-url")||window.location.href)),document.getElementById("lg-share-twitter").setAttribute("href","https://twitter.com/intent/tweet?text="+e.core.items[t.detail.index].getAttribute("data-tweet-text")+"&url="+encodeURIComponent(e.core.items[t.detail.index].getAttribute("data-twitter-share-url")||window.location.href)),document.getElementById("lg-share-googleplus").setAttribute("href","https://plus.google.com/share?url="+encodeURIComponent(e.core.items[t.detail.index].getAttribute("data-googleplus-share-url")||window.location.href)),document.getElementById("lg-share-pinterest").setAttribute("href","http://www.pinterest.com/pin/create/button/?url="+encodeURIComponent(e.core.items[t.detail.index].getAttribute("data-pinterest-share-url")||window.location.href)+"&media="+encodeURIComponent(e.core.items[t.detail.index].getAttribute("href")||e.core.items[t.detail.index].getAttribute("data-src"))+"&description="+e.core.items[t.detail.index].getAttribute("data-pinterest-text"))},100)})},o.prototype.destroy=function(){},window.lgModules.share=o})},{}]},{},[1])(1)}); -------------------------------------------------------------------------------- /packages/幻灯片播放插件/js/lg-video.min.js: -------------------------------------------------------------------------------- 1 | /**! 2 | * lg-video.js | 0.0.1 | August 1st 2016 3 | * http://sachinchoolur.github.io/lg-video.js 4 | * Copyright (c) 2016 Sachin N; 5 | * @license Apache 2.0 6 | */ 7 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o;o="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,o.LgVideo=e()}}(function(){var e,o,i;return function e(o,i,r){function t(s,a){if(!i[s]){if(!o[s]){var d="function"==typeof require&&require;if(!a&&d)return d(s,!0);if(l)return l(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var n=i[s]={exports:{}};o[s][0].call(n.exports,function(e){var i=o[s][1][e];return t(i?i:e)},n,n.exports,e,o,i,r)}return i[s].exports}for(var l="function"==typeof require&&require,s=0;s1&&(e.core.s.enableSwipe&&e.core.isTouch||e.core.s.enableDrag&&!e.core.isTouch))utils.on(e.core.el,"onSlideClick.lgtm",function(){var i=e.core.___slide[e.core.index];o(i)});else for(var i=0;i';else if(d.vimeo)a="?autoplay="+s+"&api=1",this.core.s.vimeoPlayerParams&&(a=a+"&"+utils.param(this.core.s.vimeoPlayerParams)),l='';else if(d.dailymotion)a="?wmode=opaque&autoplay="+s+"&api=postMessage",this.core.s.dailymotionPlayerParams&&(a=a+"&"+utils.param(this.core.s.dailymotionPlayerParams)),l='';else if(d.html5){var c=t.substring(0,1);"."!==c&&"#"!==c||(t=document.querySelector(t).innerHTML),l=t}else d.vk&&(a="&autoplay="+s,this.core.s.vkPlayerParams&&(a=a+"&"+utils.param(this.core.s.vkPlayerParams)),l='');return l},i.prototype.destroy=function(){this.videoLoaded=!1},window.lgModules.video=i})},{}]},{},[1])(1)}); -------------------------------------------------------------------------------- /packages/底部多图轮播/css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /packages/底部多图轮播/img/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/01.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/02.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/03.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/04.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/05.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/06.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/07.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/08.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/09.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/10.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/11.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/12.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/a17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/a17.png -------------------------------------------------------------------------------- /packages/底部多图轮播/img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/loading.gif -------------------------------------------------------------------------------- /packages/底部多图轮播/img/t01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/t01.png -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-01.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-02.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-03.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-04.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-05.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-06.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-07.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-08.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-09.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-10.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-11.jpg -------------------------------------------------------------------------------- /packages/底部多图轮播/img/thumb-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/底部多图轮播/img/thumb-12.jpg -------------------------------------------------------------------------------- /packages/搜索单页面/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/搜索单页面/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /packages/搜索单页面/fonts/glyphicons-halflings-regular.eot_: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/搜索单页面/fonts/glyphicons-halflings-regular.eot_ -------------------------------------------------------------------------------- /packages/搜索单页面/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/搜索单页面/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /packages/搜索单页面/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/搜索单页面/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /packages/搜索单页面/fonts/glyphicons-halflings-regular.woff2.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/搜索单页面/fonts/glyphicons-halflings-regular.woff2.html -------------------------------------------------------------------------------- /packages/搜索单页面/img/aliyun-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/搜索单页面/img/aliyun-logo.png -------------------------------------------------------------------------------- /packages/搜索单页面/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/搜索单页面/img/favicon.ico -------------------------------------------------------------------------------- /packages/搜索单页面/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/搜索单页面/img/favicon.png -------------------------------------------------------------------------------- /packages/搜索单页面/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/搜索单页面/img/logo.png -------------------------------------------------------------------------------- /packages/搜索单页面/js/main.js: -------------------------------------------------------------------------------- 1 | ! 2 | function(s) { 3 | var t, a = '

    {{name}}

    ', 4 | i = []; 5 | (function(t) { 6 | i = t 7 | }), 8 | s(window).scroll(function() { 9 | 100 < s(this).scrollTop() ? s("#back-to-top").fadeIn() : s("#back-to-top").fadeOut() 10 | }), 11 | s("#back-to-top").on("click", 12 | function(t) { 13 | return t.preventDefault(), 14 | s("html, body").animate({ 15 | scrollTop: 0 16 | }, 17 | 100), 18 | !1 19 | }); 20 | try { 21 | 22 | } catch(t) { 23 | 24 | } 25 | } (jQuery), 26 | $(function() { 27 | 28 | }); -------------------------------------------------------------------------------- /packages/改变色块背景/css/style.css: -------------------------------------------------------------------------------- 1 | .color-picker-container { 2 | display: inline-block; 3 | background: #5d5f60 none repeat scroll 0% 0%; 4 | border-radius: 4px; 5 | border: 2px solid #f8fafb; 6 | } 7 | .color-picker-container .picker-container .canvas-container { 8 | margin: 20px; 9 | position: relative; 10 | float: left; 11 | width: 200px; 12 | display: inline-block; 13 | background: #5D5F60; 14 | } 15 | .color-picker-container .picker-container .canvas-container.active { 16 | display: block; 17 | } 18 | .color-picker-container .picker-container .canvas-container canvas { 19 | cursor: crosshair; 20 | border-radius: 50%; 21 | box-shadow: 0 0 0 4px #E8E8E8; 22 | background: #E6D3D3; 23 | } 24 | .color-picker-container .picker-container .canvas-container .pointer { 25 | width: 15px; 26 | height: 15px; 27 | border: 2px solid #fff; 28 | border-radius: 50%; 29 | position: absolute; 30 | pointer-events: none; 31 | background: rgba(0, 0, 0, 0.1); 32 | } 33 | .color-picker-container .picker-container .canvas-container input { 34 | margin-top: 10px; 35 | width: 100%; 36 | height: 30px; 37 | text-align: center; 38 | background: #353738; 39 | border: 0; 40 | color: #fff; 41 | } 42 | .color-picker-container .picker-container .slider-container { 43 | width: 15px; 44 | float: right; 45 | position: relative; 46 | margin: 15px; 47 | } 48 | .color-picker-container .picker-container .slider-container .slider { 49 | width: 15px; 50 | height: 249px; 51 | background: #000; 52 | } 53 | .color-picker-container .picker-container .slider-container .pointer { 54 | width: 0; 55 | height: 0; 56 | border-style: solid; 57 | border-width: 5px 0 5px 10px; 58 | border-color: transparent transparent transparent #007bff; 59 | position: absolute; 60 | left: -8px; 61 | } 62 | .color-picker-container .palletes-container { 63 | float: right; 64 | width: 275px; 65 | } 66 | .color-picker-container .palletes-container .palette { 67 | width: 35px; 68 | height: 35px; 69 | float: right; 70 | border-radius: 4px; 71 | margin: 5px; 72 | box-shadow: inset 0px 2px 1px rgba(0, 0, 0, 0.28); 73 | cursor: pointer; 74 | } 75 | .color-picker-container .palletes-container .palette.active { 76 | box-shadow: 0 0 0 3px #3F3F40; 77 | } 78 | .color-picker-container .palletes-container .palette.add { 79 | border: 2px dashed #bababa; 80 | box-shadow: inherit; 81 | position: relative; 82 | } 83 | .color-picker-container .palletes-container .palette.add:after { 84 | content: '+'; 85 | font-size: 24px; 86 | color: #bababa; 87 | position: absolute; 88 | width: 100%; 89 | height: 100%; 90 | left: 0; 91 | top: 0; 92 | text-align: center; 93 | line-height: 30px; 94 | } 95 | -------------------------------------------------------------------------------- /packages/改变色块背景/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 可自定义色块的JavaScript颜色选择器DEMO演示 7 | 8 | 9 | 10 | 11 |
    12 | 13 |
    14 | 15 | 16 |
    17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /packages/粒子掉落时钟/countdown.js: -------------------------------------------------------------------------------- 1 | var WINDOW_WIDTH = 1000; 2 | var WINDOW_HEIGHT = 600; 3 | var RADIUS = 8; 4 | var MARGIN_LEFT = 10; 5 | var MARGIN_TOP = 30; 6 | 7 | // var endTime = new Date();//其实是11月份 8 | // endTime.setTime(endTime.getTime()+3600*1000);//1小时倒计时设定 9 | var curShowTimeSeconds = 0; 10 | 11 | var balls = []; 12 | const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; 13 | 14 | window.onload = function(){ 15 | 16 | //屏幕自适应 17 | WINDOW_WIDTH = document.body.clientWidth||document.documentElement.clientWidth; 18 | WINDOW_HEIGHT = document.body.clientHeight||document.documentElement.clientHeight; 19 | MARGIN_LEFT = Math.round(WINDOW_WIDTH/10); 20 | RADIUS = Math.round(WINDOW_WIDTH*4/5/107)-1; 21 | MARGIN_TOP = Math.round(WINDOW_HEIGHT/5); 22 | 23 | 24 | var canvas = document.getElementById("canvas"); 25 | var ctx = canvas.getContext('2d'); 26 | 27 | canvas.width = WINDOW_WIDTH; 28 | canvas.height = WINDOW_HEIGHT; 29 | 30 | 31 | curShowTimeSeconds = getCurrentShowTimeSeconds(); 32 | setInterval( 33 | function(){ 34 | render(ctx); 35 | update(); 36 | },50 37 | ); 38 | 39 | } 40 | 41 | function getCurrentShowTimeSeconds(){ 42 | var curTime = new Date(); 43 | var ret = curTime.getHours()*3600+curTime.getMinutes()*60+curTime.getSeconds(); 44 | return ret; 45 | } 46 | 47 | function update(){ 48 | var nextShowTimeSeconds = getCurrentShowTimeSeconds(); 49 | 50 | var nextHours = parseInt(nextShowTimeSeconds/3600); 51 | var nextMinutes = parseInt((nextShowTimeSeconds-nextHours*3600)/60); 52 | var nextSeconds = nextShowTimeSeconds%60; 53 | 54 | var curHours = parseInt(curShowTimeSeconds/3600); 55 | var curMinutes = parseInt((curShowTimeSeconds-curHours*3600)/60); 56 | var curSeconds = curShowTimeSeconds%60; 57 | 58 | if(nextSeconds != curSeconds){ 59 | curShowTimeSeconds = nextShowTimeSeconds; 60 | 61 | if(parseInt(curHours/10) != parseInt(nextHours/10)){ 62 | addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10)); 63 | } 64 | if(parseInt(curHours%10) != parseInt(nextHours%10)){ 65 | addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours%10)); 66 | } 67 | if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){ 68 | addBalls(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10)); 69 | } 70 | if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){ 71 | addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10)); 72 | } 73 | if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){ 74 | addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10)); 75 | } 76 | if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){ 77 | addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds%10)); 78 | } 79 | 80 | 81 | } 82 | updateBalls(); 83 | //console.log(balls.length); 84 | 85 | } 86 | 87 | function updateBalls(){ 88 | for(var i=0;i= WINDOW_HEIGHT-RADIUS){ 94 | balls[i].y = WINDOW_HEIGHT-RADIUS; 95 | balls[i].vy = -balls[i].vy*0.75; 96 | } 97 | } 98 | 99 | var cnt=0; 100 | for(var i=0;i0 && balls[i].x-RADIUSMath.min(300,cnt)){ 106 | balls.pop(); 107 | } 108 | } 109 | 110 | function addBalls(x,y,num){ 111 | for(var i=0;i 2 | 3 | 4 | 5 | 6 | 粒子掉落时钟 7 | 25 | 26 | 27 | 28 | 29 | 当前浏览器不支持Canvas，请更换浏览器后再试 30 | 31 |
    ©Dongsheng Wang
    32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /packages/粒子效果背景/css/component.css: -------------------------------------------------------------------------------- 1 | /* Header */ 2 | .large-header { 3 | position: relative; 4 | width: 100%; 5 | background: #333; 6 | overflow: hidden; 7 | background-size: cover; 8 | background-position: center center; 9 | z-index: 1; 10 | } 11 | 12 | .demo-1 .large-header { 13 | background-image: url('../img/demo-1-bg.jpg'); 14 | } 15 | 16 | .demo-2 .large-header { 17 | background-image: url('../img/demo-2-bg.jpg'); 18 | background-position: center bottom; 19 | } 20 | 21 | .demo-3 .large-header { 22 | background: #7f8c8d; 23 | } 24 | 25 | .demo-4 .large-header { 26 | background: #f9f1e9; 27 | } 28 | 29 | .main-title { 30 | position: absolute; 31 | margin: 0; 32 | padding: 0; 33 | color: #f9f1e9; 34 | text-align: center; 35 | top: 50%; 36 | left: 50%; 37 | -webkit-transform: translate3d(-50%,-50%,0); 38 | transform: translate3d(-50%,-50%,0); 39 | } 40 | 41 | .demo-1 .main-title, 42 | .demo-3 .main-title { 43 | text-transform: uppercase; 44 | font-size: 4.2em; 45 | letter-spacing: 0.1em; 46 | } 47 | 48 | .demo-2 .main-title { 49 | font-family: 'Clicker Script', cursive; 50 | font-weight: normal; 51 | font-size: 8em; 52 | padding-left: 10px; 53 | text-shadow: 2px 2px 4px rgba(0,0,0,0.4); 54 | } 55 | 56 | .demo-2 .main-title::before { 57 | content: ''; 58 | width: 20vw; 59 | height: 20vw; 60 | min-width: 3.5em; 61 | min-height: 3.5em; 62 | background: url(../img/deco.svg) no-repeat center center; 63 | background-size: cover; 64 | position: absolute; 65 | top: 50%; 66 | left: 50%; 67 | border-radius: 50%; 68 | z-index: -1; 69 | -webkit-transform: translate3d(-50%,-50%,0); 70 | transform: translate3d(-50%,-50%,0); 71 | } 72 | 73 | .demo-3 .main-title { 74 | padding: 10px 40px; 75 | border: 10px double #f9f1e9; 76 | text-transform: uppercase; 77 | font-family: Londrina Outline, sans-serif; 78 | } 79 | 80 | .demo-4 .main-title { 81 | font-size: 6em; 82 | font-weight: 300; 83 | padding: 10px 30px; 84 | text-transform: uppercase; 85 | color: #222; 86 | } 87 | 88 | .main-title .thin { 89 | font-weight: 200; 90 | } 91 | 92 | @media only screen and (max-width : 768px) { 93 | .demo-1 .main-title, 94 | .demo-3 .main-title, 95 | .demo-4 .main-title { 96 | font-size: 3em; 97 | } 98 | 99 | .demo-2 .main-title { 100 | font-size: 4em; 101 | } 102 | } -------------------------------------------------------------------------------- /packages/粒子效果背景/css/demo.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-weight: normal; 3 | font-style: normal; 4 | font-family: 'codropsicons'; 5 | src:url('../fonts/codropsicons/codropsicons.eot'); 6 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 7 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 8 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 9 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 10 | } 11 | 12 | *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } 13 | .clearfix:before, .clearfix:after { content: ''; display: table; } 14 | .clearfix:after { clear: both; } 15 | 16 | body { 17 | background: #fff; 18 | color: #383a3c; 19 | font-weight: 400; 20 | font-size: 1em; 21 | line-height: 1.25; 22 | font-family: 'Raleway', Calibri, Arial, sans-serif; 23 | } 24 | 25 | a, button { 26 | outline: none; 27 | } 28 | 29 | a { 30 | color: #566473; 31 | text-decoration: none; 32 | } 33 | 34 | a:hover, a:focus { 35 | color: #34495e; 36 | } 37 | 38 | section { 39 | padding: 1em; 40 | text-align: center; 41 | } 42 | 43 | p.ref { 44 | text-align: center; 45 | padding: 2em 1em; 46 | } 47 | 48 | /* Header */ 49 | .codrops-header { 50 | margin: 0 auto; 51 | padding: 2em; 52 | text-align: center; 53 | max-width: 900px; 54 | } 55 | 56 | .codrops-header h1 { 57 | margin: 0; 58 | font-size: 4.5em; 59 | line-height: 1; 60 | font-weight: 200; 61 | } 62 | 63 | .codrops-header h1 span { 64 | display: block; 65 | padding: 1em 0 1.5em; 66 | font-size: 36%; 67 | color: #95a5a6; 68 | line-height: 1.4; 69 | } 70 | 71 | /* To Navigation Style */ 72 | .codrops-top { 73 | width: 100%; 74 | text-transform: uppercase; 75 | font-weight: 700; 76 | font-size: 0.69em; 77 | text-align: center; 78 | padding: 3em 0; 79 | } 80 | 81 | .codrops-top a { 82 | display: inline-block; 83 | padding: 1.5em; 84 | text-decoration: none; 85 | letter-spacing: 1px; 86 | } 87 | 88 | .codrops-icon:before { 89 | margin: 0 4px; 90 | text-transform: none; 91 | font-weight: normal; 92 | font-style: normal; 93 | font-variant: normal; 94 | font-family: 'codropsicons'; 95 | line-height: 1; 96 | speak: none; 97 | -webkit-font-smoothing: antialiased; 98 | } 99 | 100 | .codrops-icon-drop:before { 101 | content: "\e001"; 102 | } 103 | 104 | .codrops-icon-prev:before { 105 | content: "\e004"; 106 | } 107 | 108 | /* Demo Buttons Style */ 109 | .codrops-demos { 110 | padding-top: 1em; 111 | font-size: 0.8em; 112 | text-align:center; 113 | } 114 | 115 | .codrops-demos a { 116 | display: inline-block; 117 | margin: 0.35em 0.1em; 118 | padding: 0.5em 1.2em; 119 | outline: none; 120 | text-decoration: none; 121 | text-transform: uppercase; 122 | letter-spacing: 1px; 123 | font-weight: 700; 124 | border-radius: 2px; 125 | font-size: 110%; 126 | border: 2px solid transparent; 127 | } 128 | 129 | .codrops-demos a:hover, 130 | .codrops-demos a.current-demo { 131 | border-color: #383a3c; 132 | } 133 | 134 | .codrops-demos h3 { 135 | margin: 0; 136 | padding: 1em 0 0.5em 0; 137 | font-size: 0.9em; 138 | float: left; 139 | min-width: 90px; 140 | clear: left; 141 | } 142 | 143 | .codrops-demos div:not(:first-child) h3 { 144 | padding-top: 2em; 145 | } 146 | 147 | .codrops-demos a:hover, 148 | .codrops-demos a.current-demo { 149 | color: inherit; 150 | border-color: initial; 151 | } 152 | 153 | /* Related demos */ 154 | .related { 155 | padding: 10em 0; 156 | } 157 | 158 | .related p { 159 | font-size: 1.5em; 160 | } 161 | 162 | .related > a { 163 | display: inline-block; 164 | text-align: center; 165 | margin: 20px 10px; 166 | padding: 25px; 167 | vertical-align: middle; 168 | } 169 | 170 | .related a img { 171 | max-width: 100%; 172 | opacity: 0.8; 173 | border-radius: 10px; 174 | } 175 | 176 | .related a:hover img, 177 | .related a:active img { 178 | opacity: 1; 179 | } 180 | 181 | .related a h3 { 182 | margin: 0; 183 | min-height: 63px; 184 | padding: 0.5em 0 0.3em; 185 | max-width: 300px; 186 | text-align: center; 187 | font-weight: 400; 188 | font-size: 1em; 189 | } 190 | 191 | @media screen and (max-width: 40em) { 192 | 193 | .codrops-header h1 { 194 | font-size: 2.5em; 195 | } 196 | } -------------------------------------------------------------------------------- /packages/粒子效果背景/css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /packages/粒子效果背景/img/demo-1-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/粒子效果背景/img/demo-1-bg.jpg -------------------------------------------------------------------------------- /packages/粒子效果背景/img/demo-2-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/粒子效果背景/img/demo-2-bg.jpg -------------------------------------------------------------------------------- /packages/粒子效果背景/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 粒子效果背景 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 |
    23 |
    24 |
    25 | 26 |

    Connect Three

    27 |
    28 | 34 |
    35 |
    36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /packages/粒子效果背景/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animated Background Headers | Demo 2 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 |
    23 |
    24 |
    25 | 26 |

    Spirit

    27 |
    28 | 34 |
    35 |
    36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /packages/粒子效果背景/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animated Background Headers | Demo 3 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 |
    23 |
    24 |
    25 | 26 |

    Collab

    27 |
    28 | 34 |
    35 |
    36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /packages/粒子效果背景/index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animated Background Headers | Demo 4 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 22 |
    23 |
    24 |
    25 | 26 |

    Morning Light

    27 |
    28 | 34 |
    35 |
    36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /packages/粒子效果背景/js/EasePack.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * VERSION: beta 1.9.4 3 | * DATE: 2014-07-17 4 | * UPDATES AND DOCS AT: http://www.greensock.com 5 | * 6 | * @license Copyright (c) 2008-2014, GreenSock. All rights reserved. 7 | * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for 8 | * Club GreenSock members, the software agreement that was issued with your membership. 9 | * 10 | * @author: Jack Doyle, jack@greensock.com 11 | **/ 12 | var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.Back",["easing.Ease"],function(t){var e,i,s,r=_gsScope.GreenSockGlobals||_gsScope,n=r.com.greensock,a=2*Math.PI,o=Math.PI/2,h=n._class,l=function(e,i){var s=h("easing."+e,function(){},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,s},_=t.register||function(){},u=function(t,e,i,s){var r=h("easing."+t,{easeOut:new e,easeIn:new i,easeInOut:new s},!0);return _(r,t),r},c=function(t,e,i){this.t=t,this.v=e,i&&(this.next=i,i.prev=this,this.c=i.v-e,this.gap=i.t-t)},p=function(e,i){var s=h("easing."+e,function(t){this._p1=t||0===t?t:1.70158,this._p2=1.525*this._p1},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,r.config=function(t){return new s(t)},s},f=u("Back",p("BackOut",function(t){return(t-=1)*t*((this._p1+1)*t+this._p1)+1}),p("BackIn",function(t){return t*t*((this._p1+1)*t-this._p1)}),p("BackInOut",function(t){return 1>(t*=2)?.5*t*t*((this._p2+1)*t-this._p2):.5*((t-=2)*t*((this._p2+1)*t+this._p2)+2)})),m=h("easing.SlowMo",function(t,e,i){e=e||0===e?e:.7,null==t?t=.7:t>1&&(t=1),this._p=1!==t?e:0,this._p1=(1-t)/2,this._p2=t,this._p3=this._p1+this._p2,this._calcEnd=i===!0},!0),d=m.prototype=new t;return d.constructor=m,d.getRatio=function(t){var e=t+(.5-t)*this._p;return this._p1>t?this._calcEnd?1-(t=1-t/this._p1)*t:e-(t=1-t/this._p1)*t*t*t*e:t>this._p3?this._calcEnd?1-(t=(t-this._p3)/this._p1)*t:e+(t-e)*(t=(t-this._p3)/this._p1)*t*t*t:this._calcEnd?1:e},m.ease=new m(.7,.7),d.config=m.config=function(t,e,i){return new m(t,e,i)},e=h("easing.SteppedEase",function(t){t=t||1,this._p1=1/t,this._p2=t+1},!0),d=e.prototype=new t,d.constructor=e,d.getRatio=function(t){return 0>t?t=0:t>=1&&(t=.999999999),(this._p2*t>>0)*this._p1},d.config=e.config=function(t){return new e(t)},i=h("easing.RoughEase",function(e){e=e||{};for(var i,s,r,n,a,o,h=e.taper||"none",l=[],_=0,u=0|(e.points||20),p=u,f=e.randomize!==!1,m=e.clamp===!0,d=e.template instanceof t?e.template:null,g="number"==typeof e.strength?.4*e.strength:.4;--p>-1;)i=f?Math.random():1/u*p,s=d?d.getRatio(i):i,"none"===h?r=g:"out"===h?(n=1-i,r=n*n*g):"in"===h?r=i*i*g:.5>i?(n=2*i,r=.5*n*n*g):(n=2*(1-i),r=.5*n*n*g),f?s+=Math.random()*r-.5*r:p%2?s+=.5*r:s-=.5*r,m&&(s>1?s=1:0>s&&(s=0)),l[_++]={x:i,y:s};for(l.sort(function(t,e){return t.x-e.x}),o=new c(1,1,null),p=u;--p>-1;)a=l[p],o=new c(a.x,a.y,o);this._prev=new c(0,0,0!==o.t?o:o.next)},!0),d=i.prototype=new t,d.constructor=i,d.getRatio=function(t){var e=this._prev;if(t>e.t){for(;e.next&&t>=e.t;)e=e.next;e=e.prev}else for(;e.prev&&e.t>=t;)e=e.prev;return this._prev=e,e.v+(t-e.t)/e.gap*e.c},d.config=function(t){return new i(t)},i.ease=new i,u("Bounce",l("BounceOut",function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375}),l("BounceIn",function(t){return 1/2.75>(t=1-t)?1-7.5625*t*t:2/2.75>t?1-(7.5625*(t-=1.5/2.75)*t+.75):2.5/2.75>t?1-(7.5625*(t-=2.25/2.75)*t+.9375):1-(7.5625*(t-=2.625/2.75)*t+.984375)}),l("BounceInOut",function(t){var e=.5>t;return t=e?1-2*t:2*t-1,t=1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375,e?.5*(1-t):.5*t+.5})),u("Circ",l("CircOut",function(t){return Math.sqrt(1-(t-=1)*t)}),l("CircIn",function(t){return-(Math.sqrt(1-t*t)-1)}),l("CircInOut",function(t){return 1>(t*=2)?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)})),s=function(e,i,s){var r=h("easing."+e,function(t,e){this._p1=t||1,this._p2=e||s,this._p3=this._p2/a*(Math.asin(1/this._p1)||0)},!0),n=r.prototype=new t;return n.constructor=r,n.getRatio=i,n.config=function(t,e){return new r(t,e)},r},u("Elastic",s("ElasticOut",function(t){return this._p1*Math.pow(2,-10*t)*Math.sin((t-this._p3)*a/this._p2)+1},.3),s("ElasticIn",function(t){return-(this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2))},.3),s("ElasticInOut",function(t){return 1>(t*=2)?-.5*this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2):.5*this._p1*Math.pow(2,-10*(t-=1))*Math.sin((t-this._p3)*a/this._p2)+1},.45)),u("Expo",l("ExpoOut",function(t){return 1-Math.pow(2,-10*t)}),l("ExpoIn",function(t){return Math.pow(2,10*(t-1))-.001}),l("ExpoInOut",function(t){return 1>(t*=2)?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))})),u("Sine",l("SineOut",function(t){return Math.sin(t*o)}),l("SineIn",function(t){return-Math.cos(t*o)+1}),l("SineInOut",function(t){return-.5*(Math.cos(Math.PI*t)-1)})),h("easing.EaseLookup",{find:function(e){return t.map[e]}},!0),_(r.SlowMo,"SlowMo","ease,"),_(i,"RoughEase","ease,"),_(e,"SteppedEase","ease,"),f},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(); -------------------------------------------------------------------------------- /packages/粒子效果背景/js/demo-1.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true; 4 | 5 | // Main 6 | initHeader(); 7 | initAnimation(); 8 | addListeners(); 9 | 10 | function initHeader() { 11 | width = window.innerWidth; 12 | height = window.innerHeight; 13 | target = {x: width/2, y: height/2}; 14 | 15 | largeHeader = document.getElementById('large-header'); 16 | largeHeader.style.height = height+'px'; 17 | 18 | canvas = document.getElementById('demo-canvas'); 19 | canvas.width = width; 20 | canvas.height = height; 21 | ctx = canvas.getContext('2d'); 22 | 23 | // create points 24 | points = []; 25 | for(var x = 0; x < width; x = x + width/20) { 26 | for(var y = 0; y < height; y = y + height/20) { 27 | var px = x + Math.random()*width/20; 28 | var py = y + Math.random()*height/20; 29 | var p = {x: px, originX: px, y: py, originY: py }; 30 | points.push(p); 31 | } 32 | } 33 | 34 | // for each point find the 5 closest points 35 | for(var i = 0; i < points.length; i++) { 36 | var closest = []; 37 | var p1 = points[i]; 38 | for(var j = 0; j < points.length; j++) { 39 | var p2 = points[j] 40 | if(!(p1 == p2)) { 41 | var placed = false; 42 | for(var k = 0; k < 5; k++) { 43 | if(!placed) { 44 | if(closest[k] == undefined) { 45 | closest[k] = p2; 46 | placed = true; 47 | } 48 | } 49 | } 50 | 51 | for(var k = 0; k < 5; k++) { 52 | if(!placed) { 53 | if(getDistance(p1, p2) < getDistance(p1, closest[k])) { 54 | closest[k] = p2; 55 | placed = true; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | p1.closest = closest; 62 | } 63 | 64 | // assign a circle to each point 65 | for(var i in points) { 66 | var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)'); 67 | points[i].circle = c; 68 | } 69 | } 70 | 71 | // Event handling 72 | function addListeners() { 73 | if(!('ontouchstart' in window)) { 74 | window.addEventListener('mousemove', mouseMove); 75 | } 76 | window.addEventListener('scroll', scrollCheck); 77 | window.addEventListener('resize', resize); 78 | } 79 | 80 | function mouseMove(e) { 81 | var posx = posy = 0; 82 | if (e.pageX || e.pageY) { 83 | posx = e.pageX; 84 | posy = e.pageY; 85 | } 86 | else if (e.clientX || e.clientY) { 87 | posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 88 | posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 89 | } 90 | target.x = posx; 91 | target.y = posy; 92 | } 93 | 94 | function scrollCheck() { 95 | if(document.body.scrollTop > height) animateHeader = false; 96 | else animateHeader = true; 97 | } 98 | 99 | function resize() { 100 | width = window.innerWidth; 101 | height = window.innerHeight; 102 | largeHeader.style.height = height+'px'; 103 | canvas.width = width; 104 | canvas.height = height; 105 | } 106 | 107 | // animation 108 | function initAnimation() { 109 | animate(); 110 | for(var i in points) { 111 | shiftPoint(points[i]); 112 | } 113 | } 114 | 115 | function animate() { 116 | if(animateHeader) { 117 | ctx.clearRect(0,0,width,height); 118 | for(var i in points) { 119 | // detect points in range 120 | if(Math.abs(getDistance(target, points[i])) < 4000) { 121 | points[i].active = 0.3; 122 | points[i].circle.active = 0.6; 123 | } else if(Math.abs(getDistance(target, points[i])) < 20000) { 124 | points[i].active = 0.1; 125 | points[i].circle.active = 0.3; 126 | } else if(Math.abs(getDistance(target, points[i])) < 40000) { 127 | points[i].active = 0.02; 128 | points[i].circle.active = 0.1; 129 | } else { 130 | points[i].active = 0; 131 | points[i].circle.active = 0; 132 | } 133 | 134 | drawLines(points[i]); 135 | points[i].circle.draw(); 136 | } 137 | } 138 | requestAnimationFrame(animate); 139 | } 140 | 141 | function shiftPoint(p) { 142 | TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100, 143 | y: p.originY-50+Math.random()*100, ease:Circ.easeInOut, 144 | onComplete: function() { 145 | shiftPoint(p); 146 | }}); 147 | } 148 | 149 | // Canvas manipulation 150 | function drawLines(p) { 151 | if(!p.active) return; 152 | for(var i in p.closest) { 153 | ctx.beginPath(); 154 | ctx.moveTo(p.x, p.y); 155 | ctx.lineTo(p.closest[i].x, p.closest[i].y); 156 | ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')'; 157 | ctx.stroke(); 158 | } 159 | } 160 | 161 | function Circle(pos,rad,color) { 162 | var _this = this; 163 | 164 | // constructor 165 | (function() { 166 | _this.pos = pos || null; 167 | _this.radius = rad || null; 168 | _this.color = color || null; 169 | })(); 170 | 171 | this.draw = function() { 172 | if(!_this.active) return; 173 | ctx.beginPath(); 174 | ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false); 175 | ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')'; 176 | ctx.fill(); 177 | }; 178 | } 179 | 180 | // Util 181 | function getDistance(p1, p2) { 182 | return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2); 183 | } 184 | 185 | })(); -------------------------------------------------------------------------------- /packages/粒子效果背景/js/demo-2.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true; 4 | 5 | // Main 6 | initHeader(); 7 | addListeners(); 8 | 9 | function initHeader() { 10 | width = window.innerWidth; 11 | height = window.innerHeight; 12 | target = {x: 0, y: height}; 13 | 14 | largeHeader = document.getElementById('large-header'); 15 | largeHeader.style.height = height+'px'; 16 | 17 | canvas = document.getElementById('demo-canvas'); 18 | canvas.width = width; 19 | canvas.height = height; 20 | ctx = canvas.getContext('2d'); 21 | 22 | // create particles 23 | circles = []; 24 | for(var x = 0; x < width*0.5; x++) { 25 | var c = new Circle(); 26 | circles.push(c); 27 | } 28 | animate(); 29 | } 30 | 31 | // Event handling 32 | function addListeners() { 33 | window.addEventListener('scroll', scrollCheck); 34 | window.addEventListener('resize', resize); 35 | } 36 | 37 | function scrollCheck() { 38 | if(document.body.scrollTop > height) animateHeader = false; 39 | else animateHeader = true; 40 | } 41 | 42 | function resize() { 43 | width = window.innerWidth; 44 | height = window.innerHeight; 45 | largeHeader.style.height = height+'px'; 46 | canvas.width = width; 47 | canvas.height = height; 48 | } 49 | 50 | function animate() { 51 | if(animateHeader) { 52 | ctx.clearRect(0,0,width,height); 53 | for(var i in circles) { 54 | circles[i].draw(); 55 | } 56 | } 57 | requestAnimationFrame(animate); 58 | } 59 | 60 | // Canvas manipulation 61 | function Circle() { 62 | var _this = this; 63 | 64 | // constructor 65 | (function() { 66 | _this.pos = {}; 67 | init(); 68 | console.log(_this); 69 | })(); 70 | 71 | function init() { 72 | _this.pos.x = Math.random()*width; 73 | _this.pos.y = height+Math.random()*100; 74 | _this.alpha = 0.1+Math.random()*0.3; 75 | _this.scale = 0.1+Math.random()*0.3; 76 | _this.velocity = Math.random(); 77 | } 78 | 79 | this.draw = function() { 80 | if(_this.alpha <= 0) { 81 | init(); 82 | } 83 | _this.pos.y -= _this.velocity; 84 | _this.alpha -= 0.0005; 85 | ctx.beginPath(); 86 | ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false); 87 | ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')'; 88 | ctx.fill(); 89 | }; 90 | } 91 | 92 | })(); -------------------------------------------------------------------------------- /packages/粒子效果背景/js/demo-3.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var width, height, largeHeader, canvas, ctx, triangles, target, animateHeader = true; 4 | var colors = ['72,35,68', '43,81,102', '66,152,103', '250,178,67', '224,33,48']; 5 | 6 | // Main 7 | initHeader(); 8 | addListeners(); 9 | initAnimation(); 10 | 11 | function initHeader() { 12 | width = window.innerWidth; 13 | height = window.innerHeight; 14 | target = {x: 0, y: height}; 15 | 16 | largeHeader = document.getElementById('large-header'); 17 | largeHeader.style.height = height+'px'; 18 | 19 | canvas = document.getElementById('demo-canvas'); 20 | canvas.width = width; 21 | canvas.height = height; 22 | ctx = canvas.getContext('2d'); 23 | 24 | // create particles 25 | triangles = []; 26 | for(var x = 0; x < 480; x++) { 27 | addTriangle(x*10); 28 | } 29 | } 30 | 31 | function addTriangle(delay) { 32 | setTimeout(function() { 33 | var t = new Triangle(); 34 | triangles.push(t); 35 | tweenTriangle(t); 36 | }, delay); 37 | } 38 | 39 | function initAnimation() { 40 | animate(); 41 | } 42 | 43 | function tweenTriangle(tri) { 44 | var t = Math.random()*(2*Math.PI); 45 | var x = (200+Math.random()*100)*Math.cos(t) + width*0.5; 46 | var y = (200+Math.random()*100)*Math.sin(t) + height*0.5-20; 47 | var time = 4+3*Math.random(); 48 | 49 | TweenLite.to(tri.pos, time, {x: x, 50 | y: y, ease:Circ.easeOut, 51 | onComplete: function() { 52 | tri.init(); 53 | tweenTriangle(tri); 54 | }}); 55 | } 56 | 57 | // Event handling 58 | function addListeners() { 59 | window.addEventListener('scroll', scrollCheck); 60 | window.addEventListener('resize', resize); 61 | } 62 | 63 | function scrollCheck() { 64 | if(document.body.scrollTop > height) animateHeader = false; 65 | else animateHeader = true; 66 | } 67 | 68 | function resize() { 69 | width = window.innerWidth; 70 | height = window.innerHeight; 71 | largeHeader.style.height = height+'px'; 72 | canvas.width = width; 73 | canvas.height = height; 74 | } 75 | 76 | function animate() { 77 | if(animateHeader) { 78 | ctx.clearRect(0,0,width,height); 79 | for(var i in triangles) { 80 | triangles[i].draw(); 81 | } 82 | } 83 | requestAnimationFrame(animate); 84 | } 85 | 86 | // Canvas manipulation 87 | function Triangle() { 88 | var _this = this; 89 | 90 | // constructor 91 | (function() { 92 | _this.coords = [{},{},{}]; 93 | _this.pos = {}; 94 | init(); 95 | })(); 96 | 97 | function init() { 98 | _this.pos.x = width*0.5; 99 | _this.pos.y = height*0.5-20; 100 | _this.coords[0].x = -10+Math.random()*40; 101 | _this.coords[0].y = -10+Math.random()*40; 102 | _this.coords[1].x = -10+Math.random()*40; 103 | _this.coords[1].y = -10+Math.random()*40; 104 | _this.coords[2].x = -10+Math.random()*40; 105 | _this.coords[2].y = -10+Math.random()*40; 106 | _this.scale = 0.1+Math.random()*0.3; 107 | _this.color = colors[Math.floor(Math.random()*colors.length)]; 108 | setTimeout(function() { _this.alpha = 0.8; }, 10); 109 | } 110 | 111 | this.draw = function() { 112 | if(_this.alpha >= 0.005) _this.alpha -= 0.005; 113 | else _this.alpha = 0; 114 | ctx.beginPath(); 115 | ctx.moveTo(_this.coords[0].x+_this.pos.x, _this.coords[0].y+_this.pos.y); 116 | ctx.lineTo(_this.coords[1].x+_this.pos.x, _this.coords[1].y+_this.pos.y); 117 | ctx.lineTo(_this.coords[2].x+_this.pos.x, _this.coords[2].y+_this.pos.y); 118 | ctx.closePath(); 119 | ctx.fillStyle = 'rgba('+_this.color+','+ _this.alpha+')'; 120 | ctx.fill(); 121 | }; 122 | 123 | this.init = init; 124 | } 125 | 126 | })(); -------------------------------------------------------------------------------- /packages/粒子效果背景/js/demo-4.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var width, height, largeHeader, canvas, ctx, lines, target, size, animateHeader = true; 4 | 5 | // Main 6 | initHeader(); 7 | addListeners(); 8 | initAnimation(); 9 | 10 | function initHeader() { 11 | width = window.innerWidth; 12 | height = window.innerHeight; 13 | size = width > height ? height : width; 14 | target = {x: 0, y: height}; 15 | 16 | largeHeader = document.getElementById('large-header'); 17 | largeHeader.style.height = height+'px'; 18 | 19 | canvas = document.getElementById('demo-canvas'); 20 | canvas.width = width; 21 | canvas.height = height; 22 | ctx = canvas.getContext('2d'); 23 | 24 | // create particles 25 | lines = []; 26 | for(var i = 0; i < 90; i++) { 27 | var l = new Line(Math.random()*360); 28 | lines.push(l); 29 | } 30 | } 31 | 32 | function initAnimation() { 33 | animate(); 34 | } 35 | 36 | // Event handling 37 | function addListeners() { 38 | window.addEventListener('scroll', scrollCheck); 39 | window.addEventListener('resize', resize); 40 | } 41 | 42 | function scrollCheck() { 43 | if(document.body.scrollTop > height) animateHeader = false; 44 | else animateHeader = true; 45 | } 46 | 47 | function resize() { 48 | width = window.innerWidth; 49 | height = window.innerHeight; 50 | size = width > height ? height : width; 51 | largeHeader.style.height = height+'px'; 52 | canvas.width = width; 53 | canvas.height = height; 54 | } 55 | 56 | function animate() { 57 | if(animateHeader) { 58 | ctx.clearRect(0,0,width,height); 59 | for(var i in lines) { 60 | lines[i].draw(); 61 | } 62 | } 63 | requestAnimationFrame(animate); 64 | } 65 | 66 | // Canvas manipulation 67 | function Line(angle) { 68 | var _this = this; 69 | 70 | // constructor 71 | (function() { 72 | _this.angle = angle; 73 | 74 | })(); 75 | 76 | this.draw = function() { 77 | 78 | var r1 = Math.random()*(size < 400 ? 400 : size)*0.4; 79 | var r2 = Math.random()*(size < 400 ? 400 : size)*0.4; 80 | var x1 = r1*Math.cos(_this.angle*(Math.PI/180)) + width*0.5; 81 | var y1 = r1*Math.sin(_this.angle*(Math.PI/180)) + height*0.48; 82 | var x2 = r2*Math.cos(_this.angle*(Math.PI/180)) + width*0.5; 83 | var y2 = r2*Math.sin(_this.angle*(Math.PI/180)) + height*0.48; 84 | ctx.beginPath(); 85 | ctx.moveTo(x1, y1); 86 | ctx.lineTo(x2, y2); 87 | ctx.strokeStyle = 'rgba(255,193,127,'+(0.5+Math.random()*0.5)+')'; 88 | 89 | ctx.stroke(); 90 | 91 | ctx.beginPath(); 92 | ctx.arc(x1, y1, 2, 0, 2 * Math.PI, false); 93 | ctx.fillStyle = 'rgba(255,165,70,'+(0.5+Math.random()*0.5)+')'; 94 | ctx.fill(); 95 | 96 | _this.angle += Math.random(); 97 | }; 98 | } 99 | 100 | })(); -------------------------------------------------------------------------------- /packages/粒子效果背景/js/rAF.js: -------------------------------------------------------------------------------- 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating 3 | 4 | // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel 5 | 6 | // MIT license 7 | 8 | (function() { 9 | var lastTime = 0; 10 | var vendors = ['ms', 'moz', 'webkit', 'o']; 11 | for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 12 | window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; 13 | window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 14 | || window[vendors[x]+'CancelRequestAnimationFrame']; 15 | } 16 | 17 | if (!window.requestAnimationFrame) 18 | window.requestAnimationFrame = function(callback, element) { 19 | var currTime = new Date().getTime(); 20 | var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 21 | var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 22 | timeToCall); 23 | lastTime = currTime + timeToCall; 24 | return id; 25 | }; 26 | 27 | if (!window.cancelAnimationFrame) 28 | window.cancelAnimationFrame = function(id) { 29 | clearTimeout(id); 30 | }; 31 | }()); -------------------------------------------------------------------------------- /packages/自定义粒子动画/normalize.min.css: -------------------------------------------------------------------------------- 1 | button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */ -------------------------------------------------------------------------------- /packages/轮播图变大/css/sequence-theme.mono.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | 4 | body, 5 | html, 6 | .seq { 7 | width: 100%; 8 | height: 100%; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | .seq { 14 | position: relative; 15 | overflow: hidden; 16 | font-family: sans-serif; 17 | color: white; 18 | text-align: center; 19 | background-color: #2A93BC; 20 | -webkit-transition-duration: .5s; 21 | transition-duration: .5s; 22 | -webkit-transition-property: background-color; 23 | transition-property: background-color; 24 | } 25 | 26 | .seq .seq-preloader { 27 | background-color: #2A93BC; 28 | text-align: left; 29 | } 30 | 31 | .seq .seq-preload-circle { 32 | fill: #fff; 33 | } 34 | 35 | .seq .seq-canvas, 36 | .seq .seq-canvas > * { 37 | height: 100%; 38 | width: 100%; 39 | margin: 0; 40 | padding: 0; 41 | list-style: none; 42 | } 43 | 44 | .seq .seq-canvas > * { 45 | position: absolute; 46 | top: 0; 47 | bottom: 0; 48 | height: auto; 49 | padding: 32px; 50 | -moz-box-sizing: border-box; 51 | box-sizing: border-box; 52 | } 53 | 54 | .seq.seq-step1 { 55 | background-color: #2A93BC; 56 | } 57 | 58 | .seq.seq-step2 { 59 | background-color: #6BC85E; 60 | } 61 | 62 | .seq.seq-step3 { 63 | background-color: #45367E; 64 | } 65 | 66 | .seq .seq-feature { 67 | width: 70%; 68 | max-width: 100%; 69 | height: auto; 70 | } 71 | 72 | .seq .seq-valign { 73 | /* Remove 4px gap to allow consistent valign */ 74 | font-size: 0; 75 | } 76 | 77 | .seq .seq-valign:before { 78 | /* Ghost element */ 79 | content: ""; 80 | height: 100%; 81 | } 82 | 83 | .seq .seq-valign:before, 84 | .seq .seq-valign > .seq-vcenter { 85 | /* Vertically align the ghost and desired elements */ 86 | display: inline-block; 87 | vertical-align: middle; 88 | } 89 | 90 | .seq .seq-valign > .seq-vcenter { 91 | /* Reset font-size on valigned elements */ 92 | font-size: 16px; 93 | } 94 | 95 | .seq .seq-title { 96 | margin: 0; 97 | font-size: 1em; 98 | font-family: 'Exo 2', sans-serif; 99 | text-transform: uppercase; 100 | opacity: 0; 101 | -webkit-transform: translateX(50px) translateZ(0); 102 | -ms-transform: translateX(50px) translateZ(0); 103 | transform: translateX(50px) translateZ(0); 104 | -webkit-transition-duration: .5s; 105 | transition-duration: .5s; 106 | -webkit-transition-property: opacity, -webkit-transform; 107 | transition-property: opacity, transform; 108 | } 109 | 110 | .seq .seq-feature { 111 | -webkit-transform: translateZ(0) scale(0); 112 | -ms-transform: translateZ(0) scale(0); 113 | transform: translateZ(0) scale(0); 114 | -webkit-transition-duration: .5s; 115 | transition-duration: .5s; 116 | -webkit-transition-property: -webkit-transform, opacity; 117 | transition-property: transform, opacity; 118 | } 119 | 120 | .seq .seq-in .seq-title { 121 | opacity: 1; 122 | -webkit-transform: translateX(0) translateZ(0); 123 | -ms-transform: translateX(0) translateZ(0); 124 | transform: translateX(0) translateZ(0); 125 | } 126 | 127 | .seq .seq-in .seq-feature { 128 | -webkit-transform: translateZ(0) scale(1); 129 | -ms-transform: translateZ(0) scale(1); 130 | transform: translateZ(0) scale(1); 131 | } 132 | 133 | .seq .seq-out .seq-title { 134 | opacity: 0; 135 | -webkit-transform: translateX(-50px) translateZ(0); 136 | -ms-transform: translateX(-50px) translateZ(0); 137 | transform: translateX(-50px) translateZ(0); 138 | } 139 | 140 | .seq .seq-out .seq-feature { 141 | -webkit-transform: translateZ(0) scale(1); 142 | -ms-transform: translateZ(0) scale(1); 143 | transform: translateZ(0) scale(1); 144 | opacity: 0; 145 | } 146 | 147 | .seq .seq-nav { 148 | display: none; 149 | position: absolute; 150 | z-index: 100; 151 | top: 50%; 152 | left: 0; 153 | right: 0; 154 | max-width: 640px; 155 | width: 100%; 156 | border: none; 157 | margin: 0 auto; 158 | padding: 0; 159 | } 160 | 161 | .seq.seq-active { 162 | /* Show navigation when JS is enabled */ 163 | } 164 | 165 | .seq.seq-active .seq-nav { 166 | display: block; 167 | } 168 | 169 | .seq .seq-next, 170 | .seq .seq-prev { 171 | position: absolute; 172 | margin-top: -20px; 173 | padding: 0; 174 | background: transparent; 175 | border: none; 176 | padding: .75em; 177 | cursor: pointer; 178 | color: white; 179 | font-size: .75em; 180 | text-transform: uppercase; 181 | opacity: .7; 182 | -webkit-transition-duration: .25s; 183 | transition-duration: .25s; 184 | -webkit-transition-property: opacity; 185 | transition-property: opacity; 186 | } 187 | 188 | .seq .seq-next:hover, 189 | .seq .seq-prev:hover { 190 | opacity: 1; 191 | } 192 | 193 | .seq .seq-next { 194 | right: .625em; 195 | } 196 | 197 | .seq .seq-prev { 198 | left: .625em; 199 | } 200 | 201 | .seq .seq-pagination { 202 | display: none; 203 | margin: 0 1em; 204 | padding: 0; 205 | } 206 | 207 | .seq .seq-pagination li { 208 | position: relative; 209 | list-style: none; 210 | display: inline-block; 211 | vertical-align: middle; 212 | width: 40px; 213 | height: 40px; 214 | margin: 0 .5em; 215 | } 216 | 217 | .seq .seq-pagination li:before { 218 | content: ""; 219 | display: block; 220 | position: absolute; 221 | top: 100%; 222 | left: 50%; 223 | width: 6px; 224 | height: 6px; 225 | margin-top: .5em; 226 | border-radius: 50%; 227 | background: white; 228 | opacity: 0; 229 | -webkit-transition-duration: .25s; 230 | transition-duration: .25s; 231 | -webkit-transition-property: opacity; 232 | transition-property: opacity; 233 | } 234 | 235 | .seq .seq-pagination .seq-current:before { 236 | opacity: .7; 237 | } 238 | 239 | .seq .seq-pagination img, 240 | .seq .seq-pagination a { 241 | display: block; 242 | border: none; 243 | } 244 | 245 | @media only screen and (min-width: 460px) { 246 | .seq .seq-feature { 247 | max-height: 50vh; 248 | width: auto; 249 | max-width: 100%; 250 | height: auto; 251 | } 252 | } 253 | 254 | @media only screen and (min-width: 320px) and (min-height: 320px) { 255 | .seq .seq-canvas > * { 256 | bottom: 80px; 257 | bottom: 5rem; 258 | } 259 | 260 | .seq .seq-title { 261 | font-size: 1.4em; 262 | } 263 | 264 | .seq .seq-nav { 265 | /* 266 | * Position the nav across the bottom 267 | */ 268 | top: auto; 269 | bottom: 2.5em; 270 | } 271 | 272 | .seq .seq-next, 273 | .seq .seq-prev, 274 | .seq .seq-pagination { 275 | position: relative; 276 | display: inline-block; 277 | vertical-align: middle; 278 | margin-top: 0; 279 | } 280 | 281 | .seq .seq-pagination { 282 | /* 283 | * Show the pagination 284 | */ 285 | display: inline-block; 286 | } 287 | } 288 | 289 | @media only screen and (min-height: 480px) { 290 | .seq .seq-feature { 291 | /* 292 | * The image can now become its full native height 293 | */ 294 | max-height: 100%; 295 | } 296 | } 297 | -------------------------------------------------------------------------------- /packages/轮播图变大/css/sequence-theme.mono.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": ";;;;;;;;;;;;;;;;;;;;AAqBQ,8DAAsD;AAE9D;;IAEK;EACH,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EAEZ,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;AAGZ,IAAK;EACH,QAAQ,EAAE,QAAQ;EAClB,QAAQ,EAAE,MAAM;EAChB,WAAW,EAAE,UAAU;EACvB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;EAClB,gBAAgB,EAAE,OAAO;ECrCvB,2BAAoB,EAAE,GAAe;EAC7B,mBAAY,EAAE,GAAe;EADrC,2BAAoB,EAAE,gBAAe;EAC7B,mBAAY,EAAE,gBAAe;;ADwCvC,mBAAe;EACb,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,IAAI;;AAGlB,wBAAoB;EAClB,IAAI,EAAE,IAAI;;AAGZ;oBACgB;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,IAAI;;AAGlB,oBAAgB;EACd,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,MAAM,EAAE,CAAC;EACT,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,UAAU;;AAGxB,cAAY;EACV,gBAAgB,EAAE,OAAO;;AAG3B,cAAY;EACV,gBAAgB,EAAE,OAAO;;AAG3B,cAAY;EACV,gBAAgB,EAAE,OAAO;;AAG3B,iBAAa;EACX,KAAK,EAAE,GAAG;EACV,SAAS,EAAE,IAAI;EACf,MAAM,EAAE,IAAI;;AAGd,gBAAY;;EAEV,SAAS,EAAE,CAAC;;AAEZ,uBAAS;;EAEP,OAAO,EAAE,EAAE;EACX,MAAM,EAAE,IAAI;;AAGd;+BACe;;EAEb,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,MAAM;;AAGxB,+BAAe;;EAEb,SAAS,EAAE,IAAI;;AAInB,eAAW;EACT,MAAM,EAAE,CAAC;EACT,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,mBAAmB;EAChC,cAAc,EAAE,SAAS;EACzB,OAAO,EAAE,CAAC;EClHV,iBAAoB,EAAE,8BAAe;EAC7B,SAAY,EAAE,8BAAe;EADrC,2BAAoB,EAAE,GAAe;EAC7B,mBAAY,EAAE,GAAe;EADrC,2BAAoB,EAAE,kBAAe;EAC7B,mBAAY,EAAE,kBAAe;;ADuHvC,iBAAa;ECxHX,iBAAoB,EAAE,sBAAe;EAC7B,SAAY,EAAE,sBAAe;EADrC,2BAAoB,EAAE,GAAe;EAC7B,mBAAY,EAAE,GAAe;EADrC,2BAAoB,EAAE,kBAAe;EAC7B,mBAAY,EAAE,kBAAe;;AD8HrC,uBAAW;EACT,OAAO,EAAE,CAAC;EChIZ,iBAAoB,EAAE,2BAAe;EAC7B,SAAY,EAAE,2BAAe;;ADmIrC,yBAAa;ECpIb,iBAAoB,EAAE,sBAAe;EAC7B,SAAY,EAAE,sBAAe;;ADyIrC,wBAAW;EACT,OAAO,EAAE,CAAC;EC3IZ,iBAAoB,EAAE,+BAAe;EAC7B,SAAY,EAAE,+BAAe;;AD8IrC,0BAAa;EC/Ib,iBAAoB,EAAE,sBAAe;EAC7B,SAAY,EAAE,sBAAe;EDgJnC,OAAO,EAAE,CAAC;;AAId,aAAS;EACP,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,GAAG;EACZ,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,MAAM;EACd,OAAO,EAAE,CAAC;;AAGZ,eAAa;;;AAEX,wBAAS;EACP,OAAO,EAAE,KAAK;;AAIlB;cACU;EACR,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,WAAW;EACvB,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,KAAK;EAChB,cAAc,EAAE,SAAS;EACzB,OAAO,EAAE,EAAE;ECtLX,2BAAoB,EAAE,IAAe;EAC7B,mBAAY,EAAE,IAAe;EADrC,2BAAoB,EAAE,OAAe;EAC7B,mBAAY,EAAE,OAAe;;ADyLrC;oBAAQ;EACN,OAAO,EAAE,CAAC;;AAId,cAAU;EACR,KAAK,EAAE,MAAM;;AAGf,cAAU;EACR,IAAI,EAAE,MAAM;;AAGd,oBAAgB;EACd,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,CAAC;;AAEV,uBAAG;EACD,QAAQ,EAAE,QAAQ;EAClB,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,YAAY;EACrB,cAAc,EAAE,MAAM;EACtB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,MAAM;;AAEd,8BAAS;EACP,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,IAAI;EACT,IAAI,EAAE,GAAG;EACT,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,GAAG;EAClB,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,CAAC;EChOd,2BAAoB,EAAE,IAAe;EAC7B,mBAAY,EAAE,IAAe;EADrC,2BAAoB,EAAE,OAAe;EAC7B,mBAAY,EAAE,OAAe;;ADsOrC,wCAAoB;EAClB,OAAO,EAAE,EAAE;;AAGb;sBACE;EACA,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;;AAIhB,yCAA0C;EAExC,iBAAa;IACX,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,IAAI;;;AAIhB,iEAAkE;EAChE,oBAAgB;IACd,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,IAAI;;EAGd,eAAW;IACT,SAAS,EAAE,KAAK;;EAGlB,aAAS;;;;IAIP,GAAG,EAAE,IAAI;IACT,MAAM,EAAE,KAAK;;EAGf;;sBAEgB;IACd,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,YAAY;IACrB,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,CAAC;;EAGf,oBAAgB;;;;IAId,OAAO,EAAE,YAAY;;;AAIzB,0CAA2C;EACzC,iBAAa;;;;IAIX,UAAU,EAAE,IAAI", 4 | "sources": ["../scss/sequence-theme.mono.scss","../scss/partials/mixins.scss"], 5 | "names": [], 6 | "file": "sequence-theme.mono.css" 7 | } 8 | -------------------------------------------------------------------------------- /packages/轮播图变大/css/sequence-theme.mono.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";@import url(https://fonts.googleapis.com/css?family=Exo+2:900);.seq,body,html{width:100%;height:100%;margin:0;padding:0}.seq{position:relative;overflow:hidden;font-family:sans-serif;color:#fff;text-align:center;background-color:#2A93BC;-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:background-color;transition-property:background-color}.seq .seq-preloader{background-color:#2A93BC;text-align:left}.seq .seq-preload-circle{fill:#fff}.seq .seq-canvas,.seq .seq-canvas>*{height:100%;width:100%;margin:0;padding:0;list-style:none}.seq .seq-canvas>*{position:absolute;top:0;bottom:0;height:auto;padding:32px;-moz-box-sizing:border-box;box-sizing:border-box}.seq.seq-step1{background-color:#2A93BC}.seq.seq-step2{background-color:#6BC85E}.seq.seq-step3{background-color:#45367E}.seq .seq-feature{width:70%;max-width:100%;height:auto}.seq .seq-valign{font-size:0}.seq .seq-valign:before{content:"";height:100%}.seq .seq-valign:before,.seq .seq-valign>.seq-vcenter{display:inline-block;vertical-align:middle}.seq .seq-valign>.seq-vcenter{font-size:16px}.seq .seq-title{margin:0;font-size:1em;font-family:'Exo 2',sans-serif;text-transform:uppercase;opacity:0;-webkit-transform:translateX(50px) translateZ(0);-ms-transform:translateX(50px) translateZ(0);transform:translateX(50px) translateZ(0);-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,transform}.seq .seq-feature{-webkit-transform:translateZ(0) scale(0);-ms-transform:translateZ(0) scale(0);transform:translateZ(0) scale(0);-webkit-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:-webkit-transform,opacity;transition-property:transform,opacity}.seq .seq-in .seq-title{opacity:1;-webkit-transform:translateX(0) translateZ(0);-ms-transform:translateX(0) translateZ(0);transform:translateX(0) translateZ(0)}.seq .seq-in .seq-feature{-webkit-transform:translateZ(0) scale(1);-ms-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1)}.seq .seq-out .seq-title{opacity:0;-webkit-transform:translateX(-50px) translateZ(0);-ms-transform:translateX(-50px) translateZ(0);transform:translateX(-50px) translateZ(0)}.seq .seq-out .seq-feature{-webkit-transform:translateZ(0) scale(1);-ms-transform:translateZ(0) scale(1);transform:translateZ(0) scale(1);opacity:0}.seq .seq-nav{display:none;position:absolute;z-index:100;top:50%;left:0;right:0;max-width:640px;width:100%;border:0;margin:0 auto;padding:0}.seq.seq-active .seq-nav{display:block}.seq .seq-next,.seq .seq-prev{position:absolute;margin-top:-20px;background:0 0;border:0;padding:.75em;cursor:pointer;color:#fff;font-size:.75em;text-transform:uppercase;opacity:.7;-webkit-transition-duration:.25s;transition-duration:.25s;-webkit-transition-property:opacity;transition-property:opacity}.seq .seq-next:hover,.seq .seq-prev:hover{opacity:1}.seq .seq-next{right:.625em}.seq .seq-prev{left:.625em}.seq .seq-pagination{display:none;margin:0 1em;padding:0}.seq .seq-pagination li{position:relative;list-style:none;display:inline-block;vertical-align:middle;width:40px;height:40px;margin:0 .5em}.seq .seq-pagination li:before{content:"";display:block;position:absolute;top:100%;left:50%;width:6px;height:6px;margin-top:.5em;border-radius:50%;background:#fff;opacity:0;-webkit-transition-duration:.25s;transition-duration:.25s;-webkit-transition-property:opacity;transition-property:opacity}.seq .seq-pagination .seq-current:before{opacity:.7}.seq .seq-pagination a,.seq .seq-pagination img{display:block;border:0}@media only screen and (min-width:460px){.seq .seq-feature{max-height:50vh;width:auto;max-width:100%;height:auto}}@media only screen and (min-width:320px) and (min-height:320px){.seq .seq-canvas>*{bottom:80px;bottom:5rem}.seq .seq-title{font-size:1.4em}.seq .seq-nav{top:auto;bottom:2.5em}.seq .seq-next,.seq .seq-pagination,.seq .seq-prev{position:relative;display:inline-block;vertical-align:middle;margin-top:0}.seq .seq-pagination{display:inline-block}}@media only screen and (min-height:480px){.seq .seq-feature{max-height:100%}} -------------------------------------------------------------------------------- /packages/轮播图变大/images/bananas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/bananas.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/bananas@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/bananas@2x.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/coconut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/coconut.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/coconut@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/coconut@2x.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | next 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/轮播图变大/images/orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/orange.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/orange@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/orange@2x.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/prev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | prev 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/轮播图变大/images/tn-bananas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/tn-bananas.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/tn-bananas@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/tn-bananas@2x.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/tn-coconut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/tn-coconut.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/tn-coconut@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/tn-coconut@2x.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/tn-orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/tn-orange.png -------------------------------------------------------------------------------- /packages/轮播图变大/images/tn-orange@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/轮播图变大/images/tn-orange@2x.png -------------------------------------------------------------------------------- /packages/轮播图变大/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | jQuery带缩略图的焦点图动画DEMO演示 9 | 14 | 15 | 16 | 22 | 23 | 24 | 25 | 26 |
    27 |
      28 | 29 |
    • 30 |
      31 | A cartoon illustration of a bunch of bananas 33 |

      Bananas

      34 |
      35 |
      • 36 | 37 |
    • 38 |
      39 | A cartoon illustration of half a coconut 41 |

      Coconut

      42 |
      43 |
      • 44 | 45 |
    • 46 |
      47 | A cartoon illustration of a round orange 49 |

      Orange

      50 |
      51 |
      • 52 |
    53 | 54 |
    55 | 56 | 59 | 60 | 77 | 78 | 81 | 82 |
    83 |
    84 | 85 | 86 | 87 | 88 | 89 |
    90 | 91 | 92 |
    93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /packages/轮播图变大/scripts/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v3.1.5 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | (function(){function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,o=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if("object"==typeof e){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;e.length>t;t+=1)n.push(e[t].listener);return n},i.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},i.addListener=function(e,n){var i,r=this.getListenersAsObject(e),o="object"==typeof n;for(i in r)r.hasOwnProperty(i)&&-1===t(r[i],n)&&r[i].push(o?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(e){return this.getListeners(e),this},i.defineEvents=function(e){for(var t=0;e.length>t;t+=1)this.defineEvent(e[t]);return this},i.removeListener=function(e,n){var i,r,o=this.getListenersAsObject(e);for(r in o)o.hasOwnProperty(r)&&(i=t(o[r],n),-1!==i&&o[r].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},i.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},i.manipulateListeners=function(e,t,n){var i,r,o=e?this.removeListener:this.addListener,s=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(i=n.length;i--;)o.call(this,t,n[i]);else for(i in t)t.hasOwnProperty(i)&&(r=t[i])&&("function"==typeof r?o.call(this,i,r):s.call(this,i,r));return this},i.removeEvent=function(e){var t,n=typeof e,i=this._getEvents();if("string"===n)delete i[e];else if("object"===n)for(t in i)i.hasOwnProperty(t)&&e.test(t)&&delete i[t];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(e,t){var n,i,r,o,s=this.getListenersAsObject(e);for(r in s)if(s.hasOwnProperty(r))for(i=s[r].length;i--;)n=s[r][i],n.once===!0&&this.removeListener(e,n.listener),o=n.listener.apply(this,t||[]),o===this._getOnceReturnValue()&&this.removeListener(e,n.listener);return this},i.trigger=n("emitEvent"),i.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},i.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},e.noConflict=function(){return r.EventEmitter=o,e},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return e}):"object"==typeof module&&module.exports?module.exports=e:this.EventEmitter=e}).call(this),function(e){function t(t){var n=e.event;return n.target=n.target||n.srcElement||t,n}var n=document.documentElement,i=function(){};n.addEventListener?i=function(e,t,n){e.addEventListener(t,n,!1)}:n.attachEvent&&(i=function(e,n,i){e[n+i]=i.handleEvent?function(){var n=t(e);i.handleEvent.call(i,n)}:function(){var n=t(e);i.call(e,n)},e.attachEvent("on"+n,e[n+i])});var r=function(){};n.removeEventListener?r=function(e,t,n){e.removeEventListener(t,n,!1)}:n.detachEvent&&(r=function(e,t,n){e.detachEvent("on"+t,e[t+n]);try{delete e[t+n]}catch(i){e[t+n]=void 0}});var o={bind:i,unbind:r};"function"==typeof define&&define.amd?define("eventie/eventie",o):e.eventie=o}(this),function(e,t){"function"==typeof define&&define.amd?define(["eventEmitter/EventEmitter","eventie/eventie"],function(n,i){return t(e,n,i)}):"object"==typeof exports?module.exports=t(e,require("eventEmitter"),require("eventie")):e.imagesLoaded=t(e,e.EventEmitter,e.eventie)}(this,function(e,t,n){function i(e,t){for(var n in t)e[n]=t[n];return e}function r(e){return"[object Array]"===d.call(e)}function o(e){var t=[];if(r(e))t=e;else if("number"==typeof e.length)for(var n=0,i=e.length;i>n;n++)t.push(e[n]);else t.push(e);return t}function s(e,t,n){if(!(this instanceof s))return new s(e,t);"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=o(e),this.options=i({},this.options),"function"==typeof t?n=t:i(this.options,t),n&&this.on("always",n),this.getImages(),a&&(this.jqDeferred=new a.Deferred);var r=this;setTimeout(function(){r.check()})}function c(e){this.img=e}function f(e){this.src=e,v[e]=this}var a=e.jQuery,u=e.console,h=u!==void 0,d=Object.prototype.toString;s.prototype=new t,s.prototype.options={},s.prototype.getImages=function(){this.images=[];for(var e=0,t=this.elements.length;t>e;e++){var n=this.elements[e];if("IMG"===n.nodeName&&this.addImage(n),n.nodeType&&(1===n.nodeType||9===n.nodeType))for(var i=n.querySelectorAll("img"),r=0,o=i.length;o>r;r++){var s=i[r];this.addImage(s)}}},s.prototype.addImage=function(e){var t=new c(e);this.images.push(t)},s.prototype.check=function(){function e(e,r){return t.options.debug&&h&&u.log("confirm",e,r),t.progress(e),n++,n===i&&t.complete(),!0}var t=this,n=0,i=this.images.length;if(this.hasAnyBroken=!1,!i)return this.complete(),void 0;for(var r=0;i>r;r++){var o=this.images[r];o.on("confirm",e),o.check()}},s.prototype.progress=function(e){this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded;var t=this;setTimeout(function(){t.emit("progress",t,e),t.jqDeferred&&t.jqDeferred.notify&&t.jqDeferred.notify(t,e)})},s.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";this.isComplete=!0;var t=this;setTimeout(function(){if(t.emit(e,t),t.emit("always",t),t.jqDeferred){var n=t.hasAnyBroken?"reject":"resolve";t.jqDeferred[n](t)}})},a&&(a.fn.imagesLoaded=function(e,t){var n=new s(this,e,t);return n.jqDeferred.promise(a(this))}),c.prototype=new t,c.prototype.check=function(){var e=v[this.img.src]||new f(this.img.src);if(e.isConfirmed)return this.confirm(e.isLoaded,"cached was confirmed"),void 0;if(this.img.complete&&void 0!==this.img.naturalWidth)return this.confirm(0!==this.img.naturalWidth,"naturalWidth"),void 0;var t=this;e.on("confirm",function(e,n){return t.confirm(e.isLoaded,n),!0}),e.check()},c.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("confirm",this,t)};var v={};return f.prototype=new t,f.prototype.check=function(){if(!this.isChecked){var e=new Image;n.bind(e,"load",this),n.bind(e,"error",this),e.src=this.src,this.isChecked=!0}},f.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},f.prototype.onload=function(e){this.confirm(!0,"onload"),this.unbindProxyEvents(e)},f.prototype.onerror=function(e){this.confirm(!1,"onerror"),this.unbindProxyEvents(e)},f.prototype.confirm=function(e,t){this.isConfirmed=!0,this.isLoaded=e,this.emit("confirm",this,t)},f.prototype.unbindProxyEvents=function(e){n.unbind(e.target,"load",this),n.unbind(e.target,"error",this)},s}); -------------------------------------------------------------------------------- /packages/轮播图变大/scripts/sequence-theme.mono.js: -------------------------------------------------------------------------------- 1 | 2 | // Get the Sequence.js element 3 | var sequenceElement = document.getElementById("sequence"); 4 | 5 | var options = { 6 | animateCanvas: false, 7 | phaseThreshold: false, 8 | reverseWhenNavigatingBackwards: true, 9 | preloader: true 10 | } 11 | 12 | // Launch Sequence on the element, and with the options we specified above 13 | var mySequence = sequence(sequenceElement, options); 14 | -------------------------------------------------------------------------------- /packages/轮播图变大/scripts/sequence-theme.mono.min.js: -------------------------------------------------------------------------------- 1 | var sequenceElement=document.getElementById("sequence"),options={animateCanvas:!1,phaseThreshold:!1,reverseWhenNavigatingBackwards:!0,preloader:!0},mySequence=sequence(sequenceElement,options); -------------------------------------------------------------------------------- /packages/页面过渡效果合集/css/component.css: -------------------------------------------------------------------------------- 1 | html, body { height: 100%; } 2 | 3 | .pt-perspective { 4 | position: relative; 5 | width: 100%; 6 | height: 100%; 7 | -webkit-perspective: 1200px; 8 | -moz-perspective: 1200px; 9 | perspective: 1200px; 10 | -webkit-transform-style: preserve-3d; 11 | -moz-transform-style: preserve-3d; 12 | transform-style: preserve-3d; 13 | } 14 | 15 | .pt-page { 16 | width: 100%; 17 | height: 100%; 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | visibility: hidden; 22 | overflow: hidden; 23 | -webkit-backface-visibility: hidden; 24 | -moz-backface-visibility: hidden; 25 | backface-visibility: hidden; 26 | -webkit-transform: translate3d(0, 0, 0); 27 | -moz-transform: translate3d(0, 0, 0); 28 | transform: translate3d(0, 0, 0); 29 | } 30 | 31 | .pt-page-current, 32 | .no-js .pt-page { 33 | visibility: visible; 34 | } 35 | 36 | .no-js body { 37 | overflow: auto; 38 | } 39 | 40 | .pt-page-ontop { 41 | z-index: 999; 42 | } 43 | 44 | /* Text Styles, Colors, Backgrounds */ 45 | 46 | .pt-page h1 { 47 | position: absolute; 48 | font-weight: 300; 49 | font-size: 4.4em; 50 | line-height: 1; 51 | letter-spacing: 6px; 52 | margin: 0; 53 | top: 12%; 54 | width: 100%; 55 | text-align: center; 56 | text-transform: uppercase; 57 | word-spacing: -0.3em; 58 | } 59 | 60 | .pt-page h1 span { 61 | font-family: 'Satisfy', serif; 62 | font-weight: 400; 63 | font-size: 40%; 64 | text-transform: none; 65 | word-spacing: 0; 66 | letter-spacing: 0; 67 | display: block; 68 | opacity: 0.4; 69 | } 70 | 71 | .pt-page h1 strong { 72 | color: rgba(0,0,0,0.1); 73 | } 74 | 75 | .pt-page-1 { 76 | background: #0ac2d2; 77 | } 78 | 79 | .pt-page-2 { 80 | background: #7bb7fa; 81 | } 82 | 83 | .pt-page-3 { 84 | background: #60d7a9; 85 | } 86 | 87 | .pt-page-4 { 88 | background: #fdc162; 89 | } 90 | 91 | .pt-page-5 { 92 | background: #fd6a62; 93 | } 94 | 95 | .pt-page-6 { 96 | background: #f68dbb; 97 | } 98 | 99 | /* Triggers (menu and button) */ 100 | 101 | .pt-triggers { 102 | position: absolute; 103 | width: 300px; 104 | z-index: 999999; 105 | top: 12%; 106 | left: 50%; 107 | margin-top: 130px; 108 | -webkit-transform: translateX(-50%); 109 | -moz-transform: translateX(-50%); 110 | -ms-transform: translateX(-50%); 111 | transform: translateX(-50%); 112 | } 113 | 114 | .no-js .pt-triggers { 115 | display: none; 116 | } 117 | 118 | .pt-triggers .dl-menuwrapper button, 119 | .pt-touch-button { 120 | border: none; 121 | font-size: 14px; 122 | font-weight: 700; 123 | text-transform: uppercase; 124 | margin: 10px 0 20px; 125 | padding: 0px 20px; 126 | line-height: 50px; 127 | height: 50px; 128 | width: 100%; 129 | cursor: pointer; 130 | display: block; 131 | font-family: 宋体,Arial; 132 | box-shadow: 0 3px 0 rgba(0,0,0,0.1); 133 | -webkit-touch-callout: none; 134 | -webkit-user-select: none; 135 | -khtml-user-select: none; 136 | -moz-user-select: none; 137 | -ms-user-select: none; 138 | user-select: none; 139 | } 140 | 141 | .pt-touch-button { 142 | background: #fff; 143 | color: #aaa; 144 | } 145 | 146 | .pt-triggers .dl-menuwrapper button { 147 | margin-bottom: 0; 148 | } 149 | 150 | .pt-touch-button:active { 151 | box-shadow: 0 1px 0 rgba(0,0,0,0.1); 152 | } 153 | 154 | .touch .pt-triggers .dl-menuwrapper { 155 | display: none; 156 | } 157 | 158 | .pt-message { 159 | display: none; 160 | position: absolute; 161 | z-index: 99999; 162 | bottom: 0; 163 | left: 0; 164 | width: 100%; 165 | background: #da475c; 166 | color: #fff; 167 | text-align: center; 168 | } 169 | 170 | .pt-message p { 171 | margin: 0; 172 | line-height: 60px; 173 | font-size: 26px; 174 | } 175 | 176 | .no-cssanimations .pt-message { 177 | display: block; 178 | } 179 | 180 | @media screen and (max-width: 47.4375em) { 181 | .pt-page h1 { 182 | font-size: 3em; 183 | } 184 | 185 | .pt-triggers .dl-menuwrapper { 186 | display: block; 187 | } 188 | } 189 | 190 | @media screen and (max-height: 45.9em) { 191 | .pt-triggers .dl-menuwrapper li a { 192 | padding-top: 2px; 193 | padding-bottom: 2px; 194 | } 195 | .pt-triggers .dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after { 196 | line-height: 24px; 197 | } 198 | } 199 | 200 | @media screen and (max-height: 38em) { 201 | .pt-triggers .dl-menuwrapper { 202 | display: block; 203 | } 204 | } 205 | -------------------------------------------------------------------------------- /packages/页面过渡效果合集/css/default.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | 3 | 4 | @font-face { 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 16 | body, html { font-size: 100%; padding: 0; margin: 0;} 17 | 18 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 19 | .clearfix:before, .clearfix:after { content: " "; display: table; } 20 | .clearfix:after { clear: both; } 21 | 22 | body { 23 | font-family: '微软雅黑',黑体,宋体,Arial; 24 | color: #fff; 25 | background: #333; 26 | overflow: hidden; 27 | } 28 | 29 | a { 30 | color: #ddd; 31 | text-decoration: none; 32 | } 33 | 34 | a:hover { 35 | color: #fff; 36 | } 37 | 38 | /* Header Style */ 39 | .tystudio-top { 40 | background: #fff; 41 | background: rgba(255, 255, 255, 0.1); 42 | text-transform: uppercase; 43 | position: fixed; 44 | width: 100%; 45 | font-size: 0.68em; 46 | line-height: 2.2; 47 | z-index: 50000; 48 | top: 0; 49 | left: 0; 50 | } 51 | 52 | .tystudio-top a { 53 | padding: 0 1em; 54 | letter-spacing: 0.1em; 55 | color: #fff; 56 | display: inline-block; 57 | } 58 | 59 | .tystudio-top a:hover { 60 | background: rgba(255,255,255,0.2); 61 | } 62 | 63 | .tystudio-top span.right { 64 | float: right; 65 | } 66 | 67 | .tystudio-top span.right a { 68 | float: left; 69 | display: block; 70 | } 71 | 72 | .tystudio-icon:before { 73 | margin: 0 4px; 74 | speak: none; 75 | font-style: normal; 76 | font-weight: normal; 77 | font-variant: normal; 78 | text-transform: none; 79 | line-height: 1; 80 | -webkit-font-smoothing: antialiased; 81 | } 82 | 83 | @media screen and (max-width: 25em) { 84 | .tystudio-icon span { 85 | display: none; 86 | } 87 | } 88 | 89 | -------------------------------------------------------------------------------- /packages/页面过渡效果合集/fonts/menuicons/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/realwds/super-single-page/25aa7dacfb27a66133a8d91eb717a358406c7080/packages/页面过渡效果合集/fonts/menuicons/icomoon.woff -------------------------------------------------------------------------------- /pages/台湾网站查封单页面.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 網站已遭查禁 7 | 8 | 10 | 146 | 147 | 148 | 149 |
    150 |
    151 |
    152 | 155 |
    156 | 170 |
    171 |
    172 | 173 | 174 | -------------------------------------------------------------------------------- /pages/各种吱口令套路网页.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 点击复制支付宝 10 | 23 | 24 | 25 | 26 |

    狂戳屏幕

    27 | 29 | 30 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /pages/抽奖小游戏.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 抽奖 7 | 63 | 64 | 65 | 66 |
    67 |

    开始抽奖了

    68 | 马上开奖 69 | 开始 70 | 停止 71 |
    72 |
    73 |

    说明：鼠标或者键盘回车键控制抽奖或者结束

    74 |
    75 | 76 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /pages/新浪每日搞笑动图.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 新浪每日搞笑动图 8 | 83 | 84 | 85 | 86 | 87 |
    88 | 89 |
      90 |
      91 | 上一页 92 | 下一页 93 |
      94 |
      95 | 96 | 97 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /pages/照片展示.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 照片展示 6 | 7 | 8 | 10 | 12 | 16 | 17 | 18 | 19 | 20 |
      21 | 22 | 31 | 32 |
      33 |
      34 | 35 |
      36 |
      37 |
      38 |
      39 |

      控制台

      40 |

      Alejandro相册共有张图片哦，人生的每一帧都值得记录。

      41 |
      42 |
      43 | 49 |
      50 |

      © 2020 YOYLING · Alejandro .

      51 |
      52 |
      53 |
      54 |

      关于Alejandro

      55 |

      不是每个人都能成为摄影师，但好的摄影作品可以出自任何人。
      我最喜欢摄影中你无法预期的下一刻。

      56 |
      57 |
      58 |
      59 |
      60 |
      61 | 103 | 104 | 105 | 107 | 108 | 110 | 111 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /pages/网站自动跳转网页.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 网站自动跳转网页（新代码） 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 70 | 71 | 72 |
      14 |

      15 |

      16 | 17 | www.baidu.com这个域名即将暂停使用 18 | 19 |

      20 |

      　

      21 |

      22 | 23 | 网站新地址： 24 | blog.realwds.com 25 | 记得收藏哦！ 26 | 27 |

      28 |

      29 | 30 | 31 | 32 |

      33 |

      34 | 42 |
      43 | 50 | 68 |

      69 |
      73 | 74 | 75 | -------------------------------------------------------------------------------- /pages/阿里云盘公告页.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 净网公告 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 25 | 27 | 28 | 29 | 119 | 120 | 121 | 122 | 123 | 124 |
      125 |
      126 |
      127 | 响应净网专项行动 128 | 维护网络清朗环境 129 |
      130 |
      131 | 响应净网专项行动，维护网络清朗环境 132 |
      133 |
      134 |
      135 | 为营造积极健康、向上向善的网络文化环境，配合全国“扫黄打非”工作办公室、中央宣传部、中央网信办、工业和信息化部、公安部、文化和旅游部、国家广播电视总局等部门开展的多项净网行动，阿里云盘将持之以恒提升信息安全治理能力，对用户上传、存储、分享、传播内容中涉及违法违规、历史虚无主义、低俗色情等内容，加大清理力度，对违规账号进行严肃处置。 136 |
      137 |
      营造天清气朗的网络文化环境，需要你我的共同努力。阿里云盘在此呼吁每一位云盘用户，对于有害信息和不良内容不上传、不存储、不分享，弘扬社会主义核心价值观，共建网络文明空间。 138 |
      139 |
      如有任何违规信息，欢迎广大用户向阿里云盘进行投诉、举报，阿里云盘将认真核查，及时处理。
      140 |
      141 |
      142 |
      143 | 145 |
      146 |
      147 |
      powered by 企业智能|宜搭
      148 | 149 | 150 | 151 | 152 | 165 | 166 | 167 | 168 | --------------------------------------------------------------------------------