1. Add Vimeo iframe
|
1 |
<iframe id="vimPlayer" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> |
2. Load Froogaloop and add some Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var vimID = ""; var playerID = "vimPlayer"; $("#vimPlayer").attr("src", "//player.vimeo.com/video/"+vimID+"?api=1&title=0&byline=0&portrait=0&color=f00010&player_id="+playerID); Froogaloop(jQuery('#'+playerID)[0]).addEvent('ready', ready); function ready(playerID){ Froogaloop(playerID).addEvent('play', play(playerID)); Froogaloop(playerID).addEvent('seek', seek); Froogaloop(playerID).api('play'); } function play(playerID){ alert(playerID + " is playing"); } function seek() { alert('Seeking'); } |
This will add a READY event for the player, which allows you to handle other stuff within that function from that point on. Like making the video responsive using fitVid for example :)
Its important that you reference the playerID in the actual iframe source or the ready function will never fire !
“WebP is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.” – Wikipedia
As the WebP is not widely supported, you need to use polyfills or workarounds to actually use it. But it makes a lot of sense when you are building image heavy applications for the web. It decreases file-sizes immensely and supports transparency as PNG does.
To allow WebP upload in WordPress, add this to your functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 |
add_filter('upload_mimes','webp_mime_type'); function webp_mime_type($mimes){ return array_merge($mimes,array ( 'webp' => 'image/webp' )); } |
Browsers with native support will show WebP images natively, for browsers without support deploy WebPJS developed by Google. Download and add it to your theme functions.php
|
1 2 3 4 5 6 7 8 9 |
function webp_script() { // Loads JavaScript file for webp image support in all browsers wp_enqueue_script( 'webpjs-script', get_template_directory_uri() . '/js/webpjs-0.0.2.min.js'); } add_action( 'wp_enqueue_scripts', 'webp_script' ); |
This should do the trick and enable WebP for all modern browsers, see browser support on the WebPJS development page.
Here another little nice trick to check for WebP using Javascript and replace webp with png images.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
window.testWebP = function(callback) { var webP = new Image(); webP.onload = webP.onerror = function () { callback(webP.height == 2); }; webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'; }; window.testWebP(function(support) { if(!support){ $('img[src$=".webp"]').each(function(index,element) { element.src = element.src.replace('.webp','.png'); }); } }); |
Enjoy
Alex
Easily reveal elements as they enter the viewport. No dependancies.
Usage examples:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <!-- All your stuff up here... --> <script src='/js/scrollReveal.min.js'></script> <script> window.sr = new scrollReveal(); </script> </body> </html> |
|
1 2 3 4 |
<div data-sr="enter left, hustle 20px"> Foo </div> <div data-sr="wait 2.5s, ease-in-out 100px"> Bar </div> <div data-sr="move 16px scale up 20%, over 2s"> Baz </div> <div data-sr="enter bottom, roll 45deg, over 2s"> Bun </div> |
Github: scrollReveal
Pure CSS
|
1 2 3 4 5 |
.svg{ background-image: url('image.png'); background-image: none,url('image.svg'), url('image.png'); background-size: 100% 100%; } |
Using Modernizer + jQuery
|
1 2 3 4 5 |
if(!Modernizr.svg) { $('img[src*="svg"]').attr('src', function() { return $(this).attr('src').replace('.svg', '.png'); }); } |
Custom detection of SVG
|
1 2 3 4 5 6 7 |
var supportsSVG = function() { return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1"); } if (!supportsSVG()) { // work your magic } |
The SVG converter is a web frontend to a jQuery Plugin, that allows you to include those line drawings on your webpage.
I have been working on a full integration of fullpage.js into Visual Composer for WordPress. This allows to easily build fullpage layouts, with different pages and full slide capabilities. Also added iScroller functionality, to allow overflow content to work nicely on certain pages. All of this is working with simple drag & drop :) and can be used by any unexperienced user.
I am currently cleaning up the addon, but I am not sure yet if I will offer it as a commercial addon or keep it for my internal projects only :)
Will post a video later this week.
Cheers
Alex
|
1 2 3 4 5 6 7 |
var reorder = function(selector){ var ul = document.querySelector(selector); for (var i = ul.children.length; i >= 0; i--) { ul.appendChild(ul.children[Math.random() * i | 0]); } } |
“Holland America Line Reisprofile Test” provides an interface for customers to find out which cruise type they are.
By sliding the images you are choosing your preferences and define your cruise type, which allows you to get an individual set of cruises sent to you.
Audiosprite is a node.js ffmpeg wrapper to concat small audio files into one single file. It even allows you to define the gap between each file.
Continue reading Audiosprite – node.js ffmpeg wrapper to concat small audio files into one
