windows的变革历程

所属分类:UI,其他-滚动,动画效果

 24450  325  查看评论 (5)
分享到微信朋友圈
X
windows的变革历程 ie兼容10

使用到的插件有skrollr(视差滚动)  

https://github.com/Prinzhorn/skrollr#rd

waypoints(滚动监听)

http://prinzhorn.github.io/skrollr/

tooltipster(工具提示)   

http://iamceege.github.io/tooltipster/

unveil(延迟)  

http://luis-almeida.github.io/unveil/

unveil

使用方法

HTML

<img src="bg.png" data-src="img1.jpg" /> 
<img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" /> 
javascript
$(document).ready(function() {
  $("img").unveil();
});

tooltipster

使用方法

HTML

<h1 class=““tooltip”” title=““This” is=“” my=“” image‘s=“” tooltip=“” message!”=“”>Click here</h1>

javascript

$(‘.tooltip’).tooltipster( {

	animation:‘slide’,
	// Default: fade
	arrow:true,
	// Default: true
	arrowColor:‘’,
	// Default: tooltip‘s background color
	delay:200,
	// Default: 200
	fixedWidth:400,
	// Default: 0
	followMouse:true,
	// Default: false
	offsetX:0,
	// Default: 0
	offsetY:0,
	// Default: 0
	overrideText:’‘,
	// Default: ’‘
	position:’bottom - right‘,
	// Default: top
	speed:500,
	// Default: 100
	timer:0,
	// Default: 0
	tooltipTheme:’.my - custom - theme‘ // Default: ’.tooltip-message‘
});
相关插件-滚动,动画效果

自制高度可定制滚动条插件(原创)

自制原生JS高度可定制化的滚动条插件,高度自定义,轻量化,浏览器兼容良好
  滚动
 31776  423

jQueryScrollPage单页全屏滚动效果

漂亮的jQuery单页全屏滚动,带视差效果
  滚动
 35017  392

文字轮播无缝滚动

文字轮播无缝滚动
  滚动
 72861  568

仿股市表格实时轮播

这是一款简单的不需要任何外部插件的轮播效果图
  滚动
 37451  406

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    不到碗里的巧克力 0
    2016/12/28 11:12:50

    页面到那一页,焦点就到哪里就完美了!

    回复
    汪水水。 0
    2015/12/11 21:12:51

    有点卡

        来就来撒0
        2016/1/25 17:01:09
        不是不流畅,是需要连贯的鼠标一直移动才能连续的出效果哦~  很棒的~
    回复
    ba瑞德 0
    2015/9/29 12:09:38

    效果挺好,但有些运行不流畅的感觉

        SiriBen0
        2016/10/5 17:10:36
        刚开始我也以为是不流畅,后来才发现,鼠标一直滚动会发现界面有细微的变化,当那些变化到一定程度,也就是介绍到一定,就会滚动,可惜,本来这个效果可以借用来做自己公司的历程,可惜收费
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复