mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-12 16:14:37 +02:00
updating demos
autoplay feature, background video with overlay...
This commit is contained in:
José Luis Antúnez
committed by
GitHub
GitHub
parent
33c409eb61
commit
ae273d05fc
@@ -2776,23 +2776,31 @@
|
||||
</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>
|
||||
<h3>Background videos</h3>
|
||||
<pre><strong><section class="fullscreen"></strong>
|
||||
<div class="embed">
|
||||
<video autoplay loop poster="image.jpg">
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p>.fullscreen > .embed (responsive) > video</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-blue aligncenter">
|
||||
<video class="background-video dark" autoplay loop muted poster="https://webslides.tv/static/images/peggy.jpg">
|
||||
<section class="fullscreen bg-blue aligncenter">
|
||||
<div class="embed dark">
|
||||
<video 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 class="wrap">
|
||||
<h2><strong>Be Awesome</strong></h2>
|
||||
<p>Overlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
<!-- .end .embed -->
|
||||
<div class="wrap">
|
||||
<h2><strong>Muted</strong></h2>
|
||||
<p>Overlay: <code>section.fullscreen.bg-blue > embed.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-black aligncenter">
|
||||
<span class="background dark" style="background-image:url('https://source.unsplash.com/MDGpwpMY2Ws/')"></span>
|
||||
|
||||
@@ -833,7 +833,7 @@
|
||||
</section>
|
||||
<section class="bg-apple aligncenter">
|
||||
<h2><strong>Thank you!</strong></h2>
|
||||
<p><a href="https://twitter.com/webslides" title="@jlantunez on Twitter">@jlantunez</a></p>
|
||||
<p><a href="https://twitter.com/webslides" title="@WebSlides on Twitter">@WebSlides</a></p>
|
||||
<p class="text-symbols">* * *</p>
|
||||
</section>
|
||||
|
||||
|
||||
245
demos/media.html
245
demos/media.html
@@ -145,29 +145,29 @@
|
||||
<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>
|
||||
<li><a target="_blank" href="#slide=9">Overlays (light and dark)</a></li>
|
||||
<li><a target="_blank" href="#slide=11">500+ SVG Icons</a></li>
|
||||
<li><a target="_blank" href="#slide=13">Logos</a></li>
|
||||
<li><a target="_blank" href="#slide=14">Avatars</a></li>
|
||||
<li><a target="_blank" href="#slide=15">Devices</a></li>
|
||||
<li><a target="_blank" href="#slide=16">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>
|
||||
<h3><a target="_blank" href="#slide=17">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=18">Background Videos (hosted & overlay)</a></li>
|
||||
<li><a target="_blank" href="#slide=22">Embed YouTube videos</a></li>
|
||||
<li><a target="_blank" href="#slide=24">Fullscreen YouTube videos</a></li>
|
||||
<li>
|
||||
<a target="_blank" href="#slide=22"><strong>YouTube API:</strong></a>
|
||||
<a target="_blank" href="#slide=26"><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>
|
||||
<li><a target="_blank" href="#slide=27">Autoplay, loop, mute, and no controls</a></li>
|
||||
<li><a target="_blank" href="#slide=30">Fullscreen video</a></li>
|
||||
<li><a target="_blank" href="#slide=32">Background video with overlay</a></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
@@ -176,11 +176,12 @@
|
||||
<li>
|
||||
<!--div required = padding li or li>a-->
|
||||
<div>
|
||||
<h3><a target="_blank" href="#slide=30">Maps & Charts</a></h3>
|
||||
<h3><a target="_blank" href="#slide=34">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>
|
||||
<li><a target="_blank" href="#slide=35">Embedding maps</a></li>
|
||||
<li><a target="_blank" href="#slide=36">Fullscreen maps</a></li>
|
||||
<li><a target="_blank" href="#slide=37">Fullscreen map with frame</a></li>
|
||||
<li><a target="_blank" href="#slide=38">Embedding charts</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
@@ -287,6 +288,45 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<span class="background-left-bottom" style="background-image:url('../static/images/iphone-hand.png')"></span>
|
||||
<div class="wrap">
|
||||
<div class="content-right">
|
||||
<h3>.background-(position)</h3>
|
||||
<p><code>.background-left-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%) -->
|
||||
@@ -347,6 +387,70 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-green">
|
||||
<div class="wrap">
|
||||
<h3>ul.flexblock.metrics.border</h3>
|
||||
<!-- li>a? Add blink = <ul class="flexblock metrics blink">-->
|
||||
<ul class="flexblock metrics border">
|
||||
<li> Founded
|
||||
<span>2024</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-users">
|
||||
<use xlink:href="#fa-users"></use>
|
||||
</svg>
|
||||
</span>
|
||||
24M Subscribers
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-line-chart">
|
||||
<use xlink:href="#fa-line-chart"></use>
|
||||
</svg>
|
||||
</span>
|
||||
Revenue: $16M
|
||||
</li>
|
||||
<li>
|
||||
Monthly Growth
|
||||
<span>64%</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-building-o">
|
||||
<use xlink:href="#fa-building-o"></use>
|
||||
</svg>
|
||||
</span>
|
||||
8 Offices
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-smile-o">
|
||||
<use xlink:href="#fa-smile-o"></use>
|
||||
</svg>
|
||||
</span>
|
||||
48 Employees
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-usd">
|
||||
<use xlink:href="#fa-usd"></use>
|
||||
</svg>
|
||||
</span>
|
||||
EBITDA: $2,4M
|
||||
</li>
|
||||
<li>
|
||||
<span>
|
||||
<svg class="fa-university">
|
||||
<use xlink:href="#fa-university"></use>
|
||||
</svg>
|
||||
</span>
|
||||
Bank: $32M
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<h2>Transparent Logos</h2>
|
||||
@@ -480,24 +584,55 @@
|
||||
</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>
|
||||
<h3>Background videos</h3>
|
||||
<pre><strong><section class="fullscreen"></strong>
|
||||
<div class="embed">
|
||||
<video autoplay loop poster="image.jpg">
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p>.fullscreen > .embed (responsive) > video</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-blue aligncenter">
|
||||
<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 class="wrap">
|
||||
<h2><strong>Be Awesome</strong></h2>
|
||||
<p>Overlay: <code>section.bg-blue > .background-video.dark</code> or .light</p>
|
||||
<section class="fullscreen aligncenter">
|
||||
<div class="embed">
|
||||
<video autoplay loop poster="https://webslides.tv/static/images/peggy.jpg">
|
||||
<source src="https://webslides.tv/static/videos/peggy.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-60">
|
||||
<h3>Background videos</h3>
|
||||
<p>Transparent overlay:</p>
|
||||
<pre><strong><section class="fullscreen bg-blue"></strong>
|
||||
<div class="embed <strong>dark</strong>">
|
||||
<video autoplay muted loop poster="image.jpg">
|
||||
<source src="video.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p>.fullscreen.bg-blue > .embed.dark (or .light) > video</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen bg-blue aligncenter">
|
||||
<div class="embed dark">
|
||||
<video 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.fullscreen.bg-blue > embed.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap">
|
||||
<div class="content-left">
|
||||
@@ -548,7 +683,7 @@
|
||||
<section class="fullscreen">
|
||||
<!-- Fullscreen Video -->
|
||||
<div class="embed">
|
||||
<iframe width="800" height="450" src="https://www.youtube.com/embed/iY05U7GaU5I" allowfullscreen></iframe>
|
||||
<iframe width="800" height="450" src="https://www.youtube.com/embed/xSMB7kBynZA?playsinline=1" allowfullscreen></iframe>
|
||||
</div>
|
||||
<!-- .end .embed -->
|
||||
</section>
|
||||
@@ -617,6 +752,15 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="frame">
|
||||
<div class="wrap size-60 bg-white">
|
||||
<h3><svg class="fa-info-circle large">
|
||||
<use xlink:href="#fa-info-circle"></use>
|
||||
</svg> <strong>Autoplay Feature</strong></h3>
|
||||
<p class="text-intro">Autoplay is generally disabled on all mobile devices to prevent bandwidth consumption. User must execute the play manually.</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section>
|
||||
<div class="wrap size-70">
|
||||
<h3><strong>Let's make some magic with the YouTube API</strong></h3>
|
||||
@@ -650,6 +794,7 @@
|
||||
</div>
|
||||
<strong></section></strong>
|
||||
</pre>
|
||||
<p><code>.fullscreen[class*="bg-"] > .embed.dark</code> or .light</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
@@ -677,7 +822,7 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="bg-black-blue frame">
|
||||
<section class="bg-black-blue">
|
||||
<div class="wrap size-50">
|
||||
<p class="text-context">Status of Net Neutrality around the world.</p>
|
||||
<div class="embed">
|
||||
@@ -687,6 +832,12 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="fullscreen">
|
||||
<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 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>
|
||||
@@ -705,6 +856,36 @@
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="aligncenter">
|
||||
<!-- .wrap = container width: 90% -->
|
||||
<div class="wrap">
|
||||
<h2><strong>Start in seconds</strong></h2>
|
||||
<p class="text-intro">120+ prebuilt slides ready to use.</p>
|
||||
<p>
|
||||
<a href="https://webslides.tv/webslides-latest.zip" class="button ga-track" data-ga-text="Download WebSlides (last slide demos)" title="Download WebSlides">
|
||||
<svg class="fa-cloud-download">
|
||||
<use xlink:href="#fa-cloud-download"></use>
|
||||
</svg>
|
||||
Free Download
|
||||
</a>
|
||||
<span class="try">
|
||||
<a href="https://www.paypal.me/jlantunez/8" title="Thanks :)">
|
||||
<svg class="fa-paypal">
|
||||
<use xlink:href="#fa-paypal"></use>
|
||||
</svg>
|
||||
Pay what you want.
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- .end .wrap -->
|
||||
</section>
|
||||
<section class="aligncenter">
|
||||
<h2><strong>Thank you!</strong></h2>
|
||||
<p><a href="https://twitter.com/webslides" title="@WebSlides on Twitter">@WebSlides</a></p>
|
||||
<p class="text-symbols">* * *</p>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
<!--main-->
|
||||
|
||||
Reference in New Issue
Block a user