mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-24 13:53:21 +02:00
Zoom mode: unstyled slide number and zoom out when click outside the slide
This commit is contained in:
Luis
@@ -75,22 +75,41 @@ export default class Zoom {
|
||||
DOM.after(this.zws_.el, this.ws_.el);
|
||||
|
||||
// Creates the container for each slide
|
||||
this.zws_.slides.forEach( elem => {
|
||||
const wrap = DOM.wrap(elem.el, 'div');
|
||||
wrap.className = CLASSES.WRAP;
|
||||
const div = DOM.wrap(wrap, 'div');
|
||||
div.className = CLASSES.DIV;
|
||||
// Adding some layer for controling click events
|
||||
const divLayer = document.createElement('div');
|
||||
divLayer.className = 'zoom-layer';
|
||||
divLayer.addEventListener('click', e => {
|
||||
this.zoomOut();
|
||||
this.ws_.goToSlide(elem.i);
|
||||
});
|
||||
wrap.appendChild(divLayer);
|
||||
this.zws_.slides.forEach( elem => this.createSlideBlock_(elem));
|
||||
}
|
||||
|
||||
this.setSizes_(div, wrap, elem);
|
||||
/**
|
||||
* Creates a block structure around the slide
|
||||
* @param {Element} elem slide element
|
||||
*/
|
||||
createSlideBlock_(elem) {
|
||||
// Wraps the slide around a container
|
||||
const wrap = DOM.wrap(elem.el, 'div');
|
||||
wrap.className = CLASSES.WRAP;
|
||||
// Slide container, need due to flexbox styles
|
||||
const div = DOM.wrap(wrap, 'div');
|
||||
div.className = CLASSES.DIV;
|
||||
// Adding some layer for controling click events
|
||||
const divLayer = document.createElement('div');
|
||||
divLayer.className = 'zoom-layer';
|
||||
divLayer.addEventListener('click', e => {
|
||||
this.zoomOut();
|
||||
this.ws_.goToSlide(elem.i);
|
||||
e.stopPropagation();
|
||||
});
|
||||
wrap.appendChild(divLayer);
|
||||
// Slide number
|
||||
const slideNumber = document.createElement('span');
|
||||
slideNumber.className = 'slide-number';
|
||||
slideNumber.textContent = `${elem.i+1} / ${this.zws_.slides.length}`;
|
||||
div.appendChild(slideNumber);
|
||||
// Zoom out when click in slide "border"
|
||||
div.addEventListener('click', e => {
|
||||
this.ws_.toggleZoom();
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
this.setSizes_(div, wrap, elem);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/*!
|
||||
* Name: WebSlides
|
||||
* Version: 1.2.1
|
||||
* Date: 2017-04-08
|
||||
* Date: 2017-04-09
|
||||
* Description: Making HTML presentations easy
|
||||
* URL: https://github.com/webslides/webslides#readme
|
||||
* Credits: @jlantunez, @LuisSacristan, @Belelros
|
||||
@@ -2545,23 +2545,49 @@ var Zoom = function () {
|
||||
|
||||
// Creates the container for each slide
|
||||
this.zws_.slides.forEach(function (elem) {
|
||||
var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div');
|
||||
wrap.className = CLASSES.WRAP;
|
||||
var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div');
|
||||
div.className = CLASSES.DIV;
|
||||
// Adding some layer for controling click events
|
||||
var divLayer = document.createElement('div');
|
||||
divLayer.className = 'zoom-layer';
|
||||
divLayer.addEventListener('click', function (e) {
|
||||
_this.zoomOut();
|
||||
_this.ws_.goToSlide(elem.i);
|
||||
});
|
||||
wrap.appendChild(divLayer);
|
||||
|
||||
_this.setSizes_(div, wrap, elem);
|
||||
return _this.createSlideBlock_(elem);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a block structure around the slide
|
||||
* @param {Element} elem slide element
|
||||
*/
|
||||
|
||||
}, {
|
||||
key: 'createSlideBlock_',
|
||||
value: function createSlideBlock_(elem) {
|
||||
var _this2 = this;
|
||||
|
||||
// Wraps the slide around a container
|
||||
var wrap = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(elem.el, 'div');
|
||||
wrap.className = CLASSES.WRAP;
|
||||
// Slide container, need due to flexbox styles
|
||||
var div = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].wrap(wrap, 'div');
|
||||
div.className = CLASSES.DIV;
|
||||
// Adding some layer for controling click events
|
||||
var divLayer = document.createElement('div');
|
||||
divLayer.className = 'zoom-layer';
|
||||
divLayer.addEventListener('click', function (e) {
|
||||
_this2.zoomOut();
|
||||
_this2.ws_.goToSlide(elem.i);
|
||||
e.stopPropagation();
|
||||
});
|
||||
wrap.appendChild(divLayer);
|
||||
// Slide number
|
||||
var slideNumber = document.createElement('span');
|
||||
slideNumber.className = 'slide-number';
|
||||
slideNumber.textContent = elem.i + 1 + ' / ' + this.zws_.slides.length;
|
||||
div.appendChild(slideNumber);
|
||||
// Zoom out when click in slide "border"
|
||||
div.addEventListener('click', function (e) {
|
||||
_this2.ws_.toggleZoom();
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
this.setSizes_(div, wrap, elem);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets layers size
|
||||
* @param {Element} div flexbox element
|
||||
@@ -2634,12 +2660,12 @@ var Zoom = function () {
|
||||
}, {
|
||||
key: 'onWindowResize',
|
||||
value: function onWindowResize(ev) {
|
||||
var _this2 = this;
|
||||
var _this3 = this;
|
||||
|
||||
this.zws_.slides.forEach(function (elem) {
|
||||
var wrap = elem.el.parentElement;
|
||||
var div = wrap.parentElement;
|
||||
_this2.setSizes_(div, wrap, elem);
|
||||
_this3.setSizes_(div, wrap, elem);
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
4
static/js/webslides.min.js
vendored
4
static/js/webslides.min.js
vendored
File diff suppressed because one or more lines are too long
1940
tests/classes.html
1940
tests/classes.html
File diff suppressed because it is too large
Load Diff
722
tests/media.html
722
tests/media.html
@@ -1,722 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en" prefix="og: http://ogp.me/ns#">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- CLEAN MARKUP = GOOD KARMA.
|
||||
Hi source code lover,
|
||||
|
||||
you're a curious person and a fast learner ;)
|
||||
Let's make something beautiful together. Contribute on Github:
|
||||
https://github.com/webslides/webslides
|
||||
|
||||
Thanks!
|
||||
-->
|
||||
<!-- SEO -->
|
||||
<title>WebSlides Tutorial: Videos, Images, and Maps</title>
|
||||
<meta name="description" content="How to embed images, videos, and maps in your presentation.">
|
||||
|
||||
<!-- URL CANONICAL -->
|
||||
<link rel="canonical" href="https://webslides.tv/demos/media">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
|
||||
|
||||
<!-- CSS Base -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="https://webslides.tv/wdev/static/css/base.css">
|
||||
|
||||
<!-- CSS Colors -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="https://webslides.tv/wdev/static/css/colors.css">
|
||||
|
||||
<!-- Optional - CSS SVG Icons (Font Awesome) -->
|
||||
<link rel="stylesheet" type='text/css' media='all' href="https://webslides.tv/wdev/static/css/svg-icons.css">
|
||||
|
||||
<!-- SOCIAL CARDS -->
|
||||
|
||||
<!-- FACEBOOK -->
|
||||
<meta property="fb:app_id" content="293222087723772">
|
||||
<meta property="og:url" content="https://webslides.tv/demos/media" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:title" content="WebSlides Tutorial: Media" />
|
||||
<meta property="og:description" content="How to embed images, videos, and maps in your presentation.">
|
||||
<meta property="og:updated_time" content="2017-03-30T16:24:56">
|
||||
<meta property="og:image" content="https://webslides.tv/static/images/share-media.jpg" >
|
||||
<meta property="og:image:width" content="800">
|
||||
<meta property="og:image:height" content="429">
|
||||
|
||||
<!-- TWITTER -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@webslides">
|
||||
<meta name="twitter:creator" content="@jlantunez">
|
||||
<meta name="twitter:title" content="WebSlides Tutorial: Media">
|
||||
<meta name="twitter:description" content="How to embed images, videos, and maps in your presentation.">
|
||||
<meta name="twitter:image" content="https://webslides.tv/static/images/share-media.jpg">
|
||||
|
||||
<!-- FAVICONS -->
|
||||
<link rel="shortcut icon" sizes="16x16" href="https://webslides.tv/wdev/static/images/favicons/favicon.png">
|
||||
<link rel="shortcut icon" sizes="32x32" href="https://webslides.tv/wdev/static/images/favicons/favicon-32.png">
|
||||
<link rel="apple-touch-icon icon" sizes="76x76" href="https://webslides.tv/wdev/static/images/favicons/favicon-76.png">
|
||||
<link rel="apple-touch-icon icon" sizes="120x120" href="https://webslides.tv/wdev/static/images/favicons/favicon-120.png">
|
||||
<link rel="apple-touch-icon icon" sizes="152x152" href="https://webslides.tv/wdev/static/images/favicons/favicon-152.png">
|
||||
<link rel="apple-touch-icon icon" sizes="180x180" href="https://webslides.tv/wdev/static/images/favicons/favicon-180.png">
|
||||
<link rel="apple-touch-icon icon" sizes="192x192" href="https://webslides.tv/wdev/static/images/favicons/favicon-192.png">
|
||||
|
||||
<!-- Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="theme-color" content="#333333">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header role="banner">
|
||||
<nav role="navigation">
|
||||
<p class="logo"><a href="https://webslides.tv/wdev" title="WebSlides">WebSlides</a></p>
|
||||
<ul>
|
||||
<li class="github">
|
||||
<a rel="external" href="https://github.com/webslides/webslides" title="Github">
|
||||
<svg class="fa-github">
|
||||
<use xlink:href="#fa-github"></use>
|
||||
</svg>
|
||||
<em>WebSlides</em>
|
||||
</a>
|
||||
</li>
|
||||
<li class="twitter">
|
||||
<a rel="external" href="https://twitter.com/webslides" title="Twitter">
|
||||
<svg class="fa-twitter">
|
||||
<use xlink:href="#fa-twitter"></use>
|
||||
</svg>
|
||||
<em>@WebSlides</em>
|
||||
</a>
|
||||
</li>
|
||||
<!-- <li class="dribbble"><a rel="external" href="http://dribbble.com/webslides" title="Dribbble"><svg class="fa-dribbble"><use xlink:href="#fa-dribbble"></use></svg> <em>webslides</em></a></li> -->
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main role="main">
|
||||
<article id="webslides">
|
||||
|
||||
<!-- Quick Guide
|
||||
- Each parent <section> in the <article id="webslides"> element is an individual slide.
|
||||
- Vertical sliding = <article id="webslides" class="vertical">
|
||||
- <div class="wrap"> = container 90% / <div class="wrap size-50"> = 45%;
|
||||
-->
|
||||
|
||||
<section class="bg-black-blue aligncenter">
|
||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/Zq_K89I9E-8/)"></span>
|
||||
<!--.wrap = container (width: 90%) -->
|
||||
<div class="wrap">
|
||||
<p class="text-subtitle">WebSlides Tutorial</p>
|
||||
<h1 class="text-landing">Media</h1>
|
||||
<p class="text-symbols">* * *</p>
|
||||
<p>
|
||||
<a class="button ghost" href="https://github.com/webslides/webslides" title="Download WebSlides">
|
||||
<svg class="fa-github">
|
||||
<use xlink:href="#fa-github"></use>
|
||||
</svg>
|
||||
Free Download
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="aligncenter">
|
||||
<div class="wrap">
|
||||
<h2><strong>A quick reference guide for beginners</strong></h2>
|
||||
<p class="text-intro">Videos, images, maps, and charts.</p>
|
||||
<ul class="flexblock border">
|
||||
<li>
|
||||
<!--div required = padding li or li>a-->
|
||||
<div>
|
||||
<h3><a target="_blank" href="#slide=3">Images</a></h3>
|
||||
<ol>
|
||||
<li><a target="_blank" href="#slide=4">Background Images</a></li>
|
||||
<li><a target="_blank" href="#slide=6">Overlays (light and dark)</a></li>
|
||||
<li><a target="_blank" href="#slide=10">500+ SVG Icons</a></li>
|
||||
<li><a target="_blank" href="#slide=11">Logos</a></li>
|
||||
<li><a target="_blank" href="#slide=12">Avatars</a></li>
|
||||
<li><a target="_blank" href="#slide=13">Devices</a></li>
|
||||
<li><a target="_blank" href="#slide=14">Screenshots</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<!--div required = padding li or li>a-->
|
||||
<div>
|
||||
<h3><a target="_blank" href="#slide=15">Videos</a></h3>
|
||||
<ol>
|
||||
<li><a target="_blank" href="#slide=16">Background Videos (hosted)</a></li>
|
||||
<li><a target="_blank" href="#slide=18">Embed YouTube videos</a></li>
|
||||
<li><a target="_blank" href="#slide=20">Fullscreen YouTube videos</a></li>
|
||||
<li>
|
||||
<a target="_blank" href="#slide=22"><strong>YouTube API:</strong></a>
|
||||
<ol>
|
||||
<li><a target="_blank" href="#slide=23">Autoplay, loop, mute, and no controls</a></li>
|
||||
<li><a target="_blank" href="#slide=25">Fullscreen video</a></li>
|
||||
<li><a target="_blank" href="#slide=27">Background video with overlay</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<!--div required = padding li or li>a-->
|
||||
<div>
|
||||
<h3><a target="_blank" href="#slide=30">Maps & Charts</a></h3>
|
||||
<ol>
|
||||
<li><a target="_blank" href="#slide=31">Embedding maps</a></li>
|
||||
<li><a target="_blank" href="#slide=32">Fullscreen maps</a></li>
|
||||
<li><a target="_blank" href="#slide=33">Embedding charts</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<span class="background-bottom" style="background-image:url('https://source.unsplash.com/GQD3Av_9A88/1600x800)"></span>
|
||||
<div class="wrap aligncenter">
|
||||
<h3>
|
||||
<svg class="fa-camera">
|
||||
<use xlink:href="#fa-camera"></use>
|
||||
</svg>
|
||||
Insert images wherever you want
|
||||
</h3>
|
||||
<p class="text-intro">15 different positions.</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<h3>15 Different Backgrounds</h3>
|
||||
<ul class="text-cols">
|
||||
<li><strong>.background</strong> (fullscreen)</li>
|
||||
<li>.background-top (cover)</li>
|
||||
<li>.background-bottom (cover)</li>
|
||||
<li>.background.light (opacity)</li>
|
||||
<li>.background.dark (opacity)</li>
|
||||
<li>.background-center</li>
|
||||
<li>.background-center-top</li>
|
||||
<li>.background-center-bottom</li>
|
||||
<li>.background-left</li>
|
||||
<li>.background-left-top</li>
|
||||
<li>.background-left-bottom</li>
|
||||
<li>.background-right</li>
|
||||
<li>.background-right-top</li>
|
||||
<li>.background-right-bottom</li>
|
||||
<li>.background-anim (animated)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-50">
|
||||
<h4>
|
||||
<svg class="fa-camera">
|
||||
<use xlink:href="#fa-camera"></use>
|
||||
</svg>
|
||||
.background = Fullscreen Backgrounds
|
||||
</h4>
|
||||
<p class="text-intro"><a href="https://source.unsplash.com/">How to embed Unsplash photos? →</a></p>
|
||||
<pre><section>
|
||||
<span class="background" style="background-image:url('https://source.unsplash.com/nwfuaYecNUs/')"></span>
|
||||
<div class="wrap">
|
||||
<h1>Slide</h1>
|
||||
</div>
|
||||
</section></pre>
|
||||
<p>
|
||||
<svg class="fa-info">
|
||||
<use xlink:href="#fa-info"></use>
|
||||
</svg>
|
||||
Position .background outside of .wrap container.
|
||||
</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<span class="background-right-bottom" style="background-image:url('/wdev/static/images/iphone-hand.png')"></span>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>.background-(position)</h3>
|
||||
<p><code>.background-right-bottom</code></p>
|
||||
<ul class="flexblock specs">
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-wifi">
|
||||
<use xlink:href="#fa-wifi"></use>
|
||||
</svg>
|
||||
<h2>Ultra-Fast WiFi</h2>
|
||||
Simple and secure file sharing.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-battery-full">
|
||||
<use xlink:href="#fa-battery-full"></use>
|
||||
</svg>
|
||||
<h2>All day battery life</h2>
|
||||
Your battery worries may be over.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-life-ring">
|
||||
<use xlink:href="#fa-life-ring"></use>
|
||||
</svg>
|
||||
<h2>Lifetime Warranty </h2>
|
||||
We'll fix it or if we can't, we'll replace it.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="aligncenter bg-black">
|
||||
<span class="background anim" style="background-image:url('https://source.unsplash.com/n9WPPWiPPJw/')"></span>
|
||||
<!--.wrap = container (width: 90%) -->
|
||||
<div class="wrap">
|
||||
<h2>.background.anim</h2>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-black aligncenter">
|
||||
<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
|
||||
<div class="wrap size-50">
|
||||
<h1 class="text-landing text-shadow">Opacity</h1>
|
||||
<p><code>[class*="bg-"] > .background.light</code></p>
|
||||
<pre><section class="bg-black">
|
||||
<span class="background light" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
|
||||
<div class="wrap">
|
||||
<h1>Slide</h1>
|
||||
</div>
|
||||
</section></pre>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-black aligncenter">
|
||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso')"></span>
|
||||
<div class="wrap size-50">
|
||||
<h1 class="text-landing text-shadow">Opacity</h1>
|
||||
<p><code>[class*="bg-"] > .background.dark</code></p>
|
||||
<pre><section class="bg-black">
|
||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/1_CMoFsPfso/')"></span>
|
||||
<div class="wrap">
|
||||
<h1>Slide</h1>
|
||||
</div>
|
||||
</section></pre>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-50">
|
||||
<p class="text-subtitle">Optional · 500+ icons</p>
|
||||
<h2>
|
||||
<a href="http://fontawesome.io/icons/">
|
||||
<svg class="fa-flag">
|
||||
<use xlink:href="#fa-flag"></use>
|
||||
</svg>
|
||||
Font Awesome
|
||||
</a>
|
||||
as SVG icons
|
||||
</h2>
|
||||
<pre><svg class="fa-flag">
|
||||
<use xlink:href="#fa-flag"></use>
|
||||
</svg></pre>
|
||||
<p>How to change icons?</p>
|
||||
<ol class="text-cols">
|
||||
<li>Go to <a href="http://fontastic.me/">fontastic.me</a>.</li>
|
||||
<li>Create a free account.</li>
|
||||
<li>Select new icons.</li>
|
||||
<li>Publish as SVG sprite.</li>
|
||||
<li>Edit <strong>svg-icons.css</strong> and <strong>svg.icons.js</strong>.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<h2>Transparent Logos</h2>
|
||||
<p>
|
||||
Change the color of a .svg/.png image using CSS. Images are property of their respective owners.
|
||||
</p>
|
||||
<hr>
|
||||
<ul class="flexblock blink">
|
||||
<li>
|
||||
<a href="#" title="Block Link = .blink">
|
||||
<div>
|
||||
<img src="/wdev/static/images/logos/google.svg" alt="Google">
|
||||
<p><strong>Height recommended</strong>: 48px</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" title="Block Link = .blink">
|
||||
<div>
|
||||
<img class="blacklogo" src="/wdev/static/images/logos/airbnb.svg" alt="Airbnb">
|
||||
<p><code>img.blacklogo</code></p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" title="Block Link = .blink">
|
||||
<div>
|
||||
<img class="graylogo" src="/wdev/static/images/logos/microsoft.svg" alt="Microsoft">
|
||||
<p><code>img.graylogo</code></p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="bg-blue">
|
||||
<a href="" title="Block Link = .blink">
|
||||
<div>
|
||||
<img class="whitelogo" src="/wdev/static/images/logos/netflix.svg" alt="Netflix">
|
||||
<p><code>img.whitelogo</code></p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<!--.wrap = container (width: 90%) -->
|
||||
<div class="wrap">
|
||||
<blockquote class="text-quote">
|
||||
<p>An avatar is the graphical representation of the user or the user's alter ego or character. The <a href="https://en.wikipedia.org/wiki/Avatar_(computing)">word avatar</a> originates in Hinduism.</p>
|
||||
<p><cite> <a href="http://twitter.com/username/"><img class="avatar-56" src="/wdev/static/images/avatar.jpg" alt="Avatar"> @username</a>, .avatar-56</cite></p>
|
||||
</blockquote>
|
||||
<hr>
|
||||
<p><code>img[class*="avatar-"]</code> (80, 72, 64, 56, 48, and 40).</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="grid vertical-align">
|
||||
<div class="column">
|
||||
<h2>Devices</h2>
|
||||
<ul class="flexblock specs">
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-wifi">
|
||||
<use xlink:href="#fa-wifi"></use>
|
||||
</svg>
|
||||
<h2>Ultra-Fast WiFi</h2>
|
||||
Simple and secure file sharing.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-battery-full">
|
||||
<use xlink:href="#fa-battery-full"></use>
|
||||
</svg>
|
||||
<h2>All day battery life</h2>
|
||||
Your battery worries may be over.
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<svg class="fa-life-ring">
|
||||
<use xlink:href="#fa-life-ring"></use>
|
||||
</svg>
|
||||
<h2>Lifetime Warranty </h2>
|
||||
We'll fix it or if we can't, we'll replace it.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- end .column-->
|
||||
<div class="column">
|
||||
<figure>
|
||||
<img class="aligncenter" src="/wdev/static/images/iphone.png" alt="iPhone">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- end .column-->
|
||||
</div>
|
||||
<!-- end .grid-->
|
||||
</div>
|
||||
<!-- end .wrap-->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<figure class="browser">
|
||||
<img alt="Screenshot" src="https://webslides.tv/static/images/cover-apple.jpg">
|
||||
</figure>
|
||||
</div>
|
||||
<!-- .end .content-left -->
|
||||
<div class="content-left">
|
||||
<h2>Screenshots</h2>
|
||||
<p>HTML/CSS Browser.</p>
|
||||
<pre><figure class="browser">
|
||||
<img alt="Screenshot" src="image.jpg">
|
||||
</figure></pre>
|
||||
</div>
|
||||
<!-- .end .content-left -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-blue">
|
||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/R1J6Z1cnJZc/1600x800)"></span>
|
||||
<div class="wrap aligncenter">
|
||||
<h2>
|
||||
Videos
|
||||
</h2>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<h3>Background Videos</h3>
|
||||
<pre><video class="background-video" autoplay muted loop poster="image.jpg">
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
</video></pre>
|
||||
<p><code>.background-video</code></p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen bg-red aligncenter">
|
||||
<div class="embed">
|
||||
<video class="background-video dark" autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
|
||||
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<h2><strong>Audio</strong></h2>
|
||||
<p>Overlay: <code>section.bg-red > .background-video.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen bg-blue aligncenter">
|
||||
<div class="embed">
|
||||
<video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
|
||||
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
<div class="wrap">
|
||||
<h2><strong>Muted</strong></h2>
|
||||
<p>Overlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>Responsive Videos</h3>
|
||||
<p>Just copy and paste the code from YouTube to your slide.</p>
|
||||
<pre><div class="embed">
|
||||
<strong><iframe src="https://www.youtube.com/embed/XjJQBjWYDTs">
|
||||
</iframe></strong>
|
||||
</div></pre>
|
||||
<p><code>.embed</code> (responsive)</p>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<div class="content-left">
|
||||
<!-- <div class="embed"> = Responsive -->
|
||||
<div class="embed">
|
||||
<iframe src="https://www.youtube.com/embed/XjJQBjWYDTs" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- end .embed -->
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<!-- Responsive video/iframe... Add <div class="embed"> -->
|
||||
<div class="embed">
|
||||
<iframe width="800" height="450" src="https://www.youtube.com/embed/3Q3eITC01Fg" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<h3>Fullscreen YouTube Video</h3>
|
||||
<pre><strong><section class="fullscreen"></strong>
|
||||
<div class="embed">
|
||||
<iframe src="https://www.youtube.com/embed/iY05U7GaU5I">
|
||||
</iframe>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p><code>.fullscreen</code> > <code>.embed</code> (responsive)</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen">
|
||||
<!-- Fullscreen Video -->
|
||||
<div class="embed">
|
||||
<iframe width="800" height="450" src="https://www.youtube.com/embed/xSMB7kBynZA?playsinline=1" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</section>
|
||||
<section class="frame">
|
||||
<p class="aligncenter"><svg class="fa-thumbs-up large">
|
||||
<use xlink:href="#fa-thumbs-up"></use>
|
||||
</svg></p>
|
||||
<div class="wrap size-60 bg-white">
|
||||
<h3><a href="https://developers.google.com/youtube"><svg class="fa-youtube">
|
||||
<use xlink:href="#fa-youtube"></use>
|
||||
</svg> YouTube API</a></h3>
|
||||
<p class="text-intro">Embed videos with <strong>loop, autoplay, and muted</strong> attributes. The video will automatically play when the slide is loaded.</p>
|
||||
|
||||
<p><strong>You should use a local or a remote server</strong> since the YouTube API doesn't seem to work nicely when using the file directly on the browser.</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<h3><svg class="fa-youtube">
|
||||
<use xlink:href="#fa-youtube"></use>
|
||||
</svg>YouTube API Parameters</h3>
|
||||
<p>Syntax: <code>data-autoplay, data-loop, data-no-controls, data-mute</code>.</p>
|
||||
<hr>
|
||||
<div class="grid">
|
||||
<div class="column">
|
||||
<pre><div class="embed">
|
||||
<strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-loop>
|
||||
</div></strong>
|
||||
</div></pre>
|
||||
<p>autoplay + loop</p>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
<div class="column">
|
||||
<pre><div class="embed">
|
||||
<strong><div data-youtube data-youtube-id="CQY3KUR3VzM" data-autoplay data-mute data-no-controls>
|
||||
</div></strong>
|
||||
</div></pre>
|
||||
<p>autoplay + mute + no controls.</p>
|
||||
</div>
|
||||
<!-- .end .column -->
|
||||
</div>
|
||||
<!-- .end .grid -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
<h3>YouTube API</h3>
|
||||
<p><code>autoplay + loop</code></p>
|
||||
<pre><div class="embed">
|
||||
<div data-youtube data-youtube-id="_m67JbGjWnc" <strong>data-autoplay data-loop</strong>>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
<div class="content-left">
|
||||
<!-- <div class="embed"> = Responsive -->
|
||||
<div class="embed">
|
||||
<div data-youtube data-youtube-id="_m67JbGjWnc" data-autoplay data-loop></div>
|
||||
</div>
|
||||
<!-- end .embed -->
|
||||
</div>
|
||||
<!-- end .content-left -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-70">
|
||||
<h3><strong>Let's make some magic with the YouTube API</strong></h3>
|
||||
<p>How to make a fullscreen YouTube video? <code>.fullscreen > .embed</code></p>
|
||||
<hr>
|
||||
<pre><strong><section class="fullscreen"></strong>
|
||||
<div class="embed">
|
||||
<div data-youtube data-youtube-id="dmkwb2KfLW8" <strong>data-autoplay data-loop data-no-controls</strong></div>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p>The video will automatically play when the slide is loaded.</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen">
|
||||
<!-- Fullscreen Video -->
|
||||
<div class="embed">
|
||||
<div data-youtube data-youtube-id="dmkwb2KfLW8" data-autoplay data-loop data-no-controls></div>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-70">
|
||||
<h3><strong>Fullscreen YouTube video background</strong></h3>
|
||||
<p>Overlaying a transparent background on an embedded Youtube video:</p>
|
||||
<hr>
|
||||
<pre><strong><section class="fullscreen bg-black"></strong>
|
||||
<div class="embed dark">
|
||||
<div data-youtube data-youtube-id="c9psfOxJysw" <strong>data-autoplay data-loop data-mute data-no-controls</strong></div>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen bg-blue">
|
||||
<!-- Fullscreen Video -->
|
||||
<div class="embed dark">
|
||||
<div data-youtube data-youtube-id="SomZsr1J7ao" data-autoplay data-loop data-mute data-no-controls></div>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
<div class="wrap aligncenter">
|
||||
<h2><strong>Overlay</strong></h2>
|
||||
<p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-primary">
|
||||
<span class="background-bottom dark" style="background-image:url('https://source.unsplash.com/RkBTPqPEGDo/1600x800)"></span>
|
||||
<div class="wrap aligncenter">
|
||||
<h3>
|
||||
<svg class="fa-map">
|
||||
<use xlink:href="#fa-map"></use>
|
||||
</svg>
|
||||
Maps & Charts
|
||||
</h3>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-black-blue frame">
|
||||
<div class="wrap size-50">
|
||||
<p class="text-context">Status of Net Neutrality around the world.</p>
|
||||
<div class="embed">
|
||||
<iframe width='800' height='450' src='https://dejiaccessnow.carto.com/viz/4f239c60-356f-11e5-b01c-0e853d047bba/embed_map' allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen frame">
|
||||
<div class="embed">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.254536199183!2d-5.994303837186783!3d37.38381233311839!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbaa976bfaec1fe87!2sReal+Alc%C3%A1zar+de+Sevilla!5e0!3m2!1ses!2ses!4v1489408674667" width="600" height="450" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<h3><a href="https://www.theatlas.com/" title="I love Quartz's charts">Charts</a></h3>
|
||||
<!-- Responsive video/iframe/chart... Add <div class="embed"> -->
|
||||
<div class="embed">
|
||||
<!-- I love Quartz's charts -->
|
||||
<div class="atlas-chart" data-id="rJt91kGnx" data-width="640" data-height="449"><img alt="Chart" src="https://www.theatlas.com/i/atlas_rJt91kGnx.png" style="max-width: 100%;"></div><script src="https://www.theatlas.com/javascripts/atlas.js"></script>
|
||||
</div>
|
||||
<!-- end .embed -->
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<!--main-->
|
||||
|
||||
<!-- Required -->
|
||||
<script src="../static/js/webslides.js"></script>
|
||||
<script>
|
||||
window.ws = new WebSlides();
|
||||
</script>
|
||||
|
||||
<!-- OPTIONAL - svg-icons.js (fontastic.me - Font Awesome as svg icons) -->
|
||||
<script defer src="/wdev/static/js/svg-icons.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,29 +0,0 @@
|
||||
|
||||
#webslides-zoomed.grid {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#webslides-zoomed.grid > .column {
|
||||
position: relative;
|
||||
}
|
||||
#webslides-zoomed.grid > .column > .wrap-zoom {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
}
|
||||
#webslides-zoomed.grid > .column {
|
||||
width: 25%;
|
||||
}
|
||||
#webslides-zoomed.grid > .column > .wrap-zoom > .slide {
|
||||
transform: scale(0.25) translate(-150%, -150vh);
|
||||
display: flex !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
clip: rect(0px auto auto 0);
|
||||
}
|
||||
#webslides-zoomed.grid > .column > .wrap-zoom > .zoom-layer {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
window.addEventListener("load", () => {
|
||||
var getValue = ( px ) => {
|
||||
return new Number( px.replace( /[^\d\.]/g, '' ) );
|
||||
};
|
||||
|
||||
|
||||
var wrap = ( query, tag ) => {
|
||||
// Now webslides is a grid
|
||||
const ws = document.getElementById('webslides');
|
||||
ws.classList.add('grid');
|
||||
|
||||
document.querySelectorAll( query ).forEach( elem => {
|
||||
const div = document.createElement( 'div' );
|
||||
div.className = 'column';
|
||||
elem.parentElement.insertBefore( div, elem );
|
||||
const wrap = document.createElement( 'div' );
|
||||
wrap.className = 'wrap-zoom';
|
||||
div.appendChild( wrap );
|
||||
wrap.appendChild( elem );
|
||||
|
||||
const divCSS = window.getComputedStyle( div );
|
||||
const divW = getValue( divCSS.width );
|
||||
const marginW = getValue( divCSS.paddingLeft ) + getValue( divCSS.paddingRight );
|
||||
const marginH = getValue( divCSS.paddingTop ) + getValue( divCSS.paddingBottom );
|
||||
|
||||
// div.style.height = divH + 'px';
|
||||
elem.style.width = ( window.innerWidth - marginW * 4 ) + 'px';
|
||||
elem.style.height = ( window.innerHeight - marginH * 4 ) + 'px';
|
||||
|
||||
const slideCSS = window.getComputedStyle( elem );
|
||||
wrap.style.height = ( getValue( slideCSS.height ) / 4 ) + 'px';
|
||||
});
|
||||
};
|
||||
|
||||
//wrap( '.slide', 'div' );
|
||||
});
|
||||
Reference in New Issue
Block a user