基于js全屏动画焦点图幻灯片
今天给大家分享一款基于js全屏动画焦点图幻灯片。这款焦点图内的内容以动画形式出现和消失。效果图如下:
实现的代码。
html代码:
<div class="slideshow" id="slideshow">
<ol class="slides">
<li class="current">
<div class="description">
<h2>
Tilted Content Slideshow</h2>
<p>
This slider, as seen on the landing page of the <a href="http://www.w2bc.com/">FWA</a>,
plays with 3D perspective and performs some interesting animations on the right-hand
side images.</p>
</div>
<div class="tiltview col">
<a href="http://www.w2bc.com/">
<img src="img/1_screen.jpg" /></a> <a href="https://www.w2bc.com/">
<img src="img/2_screen.jpg" /></a>
</div>
</li>
<li>
<div class="description">
<h2>
CSS Animations</h2>
<p>
We are using 12 different animations for showing and hiding the items of a slide.
The animations are defined by randomly adding data-attributes called <code>data-effect-in</code>
and <code>data-effect-out</code> for every slide.
</p>
</div>
<div class="tiltview row">
<a href="http://www.w2bc.com/">
<img src="img/3_mobile.jpg" /></a> <a href="http://www.w2bc.com/">
<img src="img/4_mobile.jpg" /></a>
</div>
</li>
<li>
<div class="description">
<h2>
Tilted Items</h2>
<p>
The perspective view is achieved by adding a perspective value to the slide list
item and tilting a division that contains the two screenshots.</p>
</div>
<div class="tiltview col">
<a href="http://www.w2bc/">
<img src="img/5_screen.jpg" /></a> <a href="http://www.w2bc.com/">
<img src="img/6_screen.jpg" /></a>
</div>
</li>
<li>
<div class="description">
<h2>
Column or Row</h2>
<p>
The items in the tilted container are either laid out in a column or in a row. For
some directions we need to adjust the animation delays for the items, since we don't
want the items to overlap each other when they move in or out.</p>
</div>
<div class="tiltview row">
<a href="http://www.w2bc/">
<img src="img/1_mobile.jpg" /></a> <a href="https://tsovet.com/">
<img src="img/2_mobile.jpg" /></a>
</div>
</li>
<li>
<div class="description">
<h2>
Responsiveness</h2>
<p>
For smaller screens, the items on the right hand side will become less opaque and
serve as decoration only. The focus will be on the description which will occupy
all the width.</p>
</div>
<div class="tiltview col">
<a href="http://www.w2bc.com/">
<img src="img/3_screen.jpg" /></a> <a href="http://foodsense.is/">
<img src="img/4_screen.jpg" /></a>
</div>
</li>
<li>
<div class="description">
<h2>
Navigation</h2>
<p>
For the "line" navigation we use a little trick to make the clickable area a bit
bigger: we add a thick white border to the top and bottom of the span. Since the
border is part of the element, it will be part of the clickable zone.</p>
</div>
<div class="tiltview row">
<a href="http://www.w2bc.com/">
<img src="img/5_mobile.jpg" /></a> <a href="http://www.herschelsupply.com/">
<img src="img/6_mobile.jpg" /></a>
</div>
</li>
</ol>
</div>
via:http://www.w2bc.com/Article/23685
基于js全屏动画焦点图幻灯片的更多相关文章
- 基于jQuery的网站首页宽屏焦点图幻灯片
今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 基于Ascensor.js全屏切换页面插件
今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 全新jquery多点滑动幻灯片——全屏动画animateSlide
首页banner的酷炫效果多来自全屏大图的幻灯片动画,下面提供一种完美兼容的jquery动画特效:全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创). 直接上代码,把h ...
- JS框架_(JQuery.js)文章全屏动画切换
百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...
- jQuery可自动播放动画焦点图插件Koala
Koala是一款简单而实用的jQuery焦点图幻灯片插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放.该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图 ...
- 基于HTML5全屏图文左右滑动切换特效
基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <main> & ...
- 基于jQuery果冻式按钮焦点图切换代码
基于jQuery果冻式按钮焦点图切换代码.这是一款基于jQuery+CSS3实现的图片切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&quo ...
- JS全屏漂浮广告、移入光标停止移动
点击这里查看效果 以下是代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...
- [HTML]JS全屏代码
video全屏参考:https://www.thecssninja.com/javascript/fullscreen <!doctype html> <html> <h ...
随机推荐
- .NET中的六个重要概念
内容导读 概述 当你声明一个变量背后发生了什么? 堆和栈 值类型和引用类型 哪些是值类型,哪些是引用类型? 装箱和拆箱 装箱和拆箱的性能问题 一.概述 本文会阐述六个重要的概念:堆.栈.值类型.引用类 ...
- poj 1260 Pearls 斜率优化dp
这个题目数据量很小,但是满足斜率优化的条件,可以用斜率优化dp来做. 要注意的地方,0也是一个决策点. #include <iostream> #include <cstdio> ...
- python 3 爬取百度图片
python 3 爬取百度图片 学习了:https://blog.csdn.net/X_JS612/article/details/78149627
- 【Project Euler 8】Largest product in a series
题目要求是: The four adjacent digits in the 1000-digit number that have the greatest product are 9 × 9 × ...
- LeetCode 303 Range Sum Query - Immutable(范围总和查询-永久不变)(*)
翻译 给定一个整型数组nums,找出在索引i到j(i小于等于j)之间(包含i和j)的全部元素之和. 比如: 给定nums = [-2,0,3,-5,2,-1] sumRange(0, 2) -> ...
- function.length和arguments的区别
function.length:接收到函数体外的参数计算长度 arguments:接收到函数体内的参数计算长度 /** * 函数参数长度和伪数组(arguments)长度不一样! -> 接收到函 ...
- 异步任务,HttpContext.Current为null解决办法
最近在开发一个后台管理系统项目,为了提高登录的速度,就把记录登录日志放到一个异步任务里面. Action taskAction = () => { SaveLog(); }; Task task ...
- 右键菜单 GenericMenu
http://www.cnblogs.com/zhaoqingqing/p/3799294.html 自定义窗口中使用右键菜单: // This example shows how to create ...
- Android画布更新过程OnDraw调用过程
onDraw是触发的外置接口,用户能够复写这种方法,这样当回调onDraw时,就能够绘制出用户须要的画面 这个接口方法相似onLayout的回调,利用layout(l,t,r,b)就能够触发. 而这里 ...
- alibaba dexposed初步解析
alibaba新出了一个非侵入的aop库,感觉不错.那么楼主这次就来学习一下这个库的详细应用,原理以及能够达到的效果. 这里先给出相应的githubproject传送门:https://github. ...