Static Image to Video Block

Developer
Size
4,864 Kb
Views
32,384

How do I make an static image to video block?

Hover or touch the image to display a video and play. Hover off or touch once more to pause the video and display the static image once again.. What is a static image to video block? How do you make a static image to video block? This script and codes were developed by GRAY GHOST on 08 December 2022, Thursday.

Static Image to Video Block Previews

Static Image to Video Block - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Static Image to Video Block</title> <meta name="viewport" content="width=device-width, user-scalable=1, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Still needs some tweaking with the JS. Customized to suite. Add breakpoints where needed. Detects hover events in CSS using 'video' class injected by modernizr to detect for support.
-->
<div class="parent"> <figure class="effeckt-caption" data-effeckt-type="cover-fade"> <img src="http://th09.deviantart.net/fs22/300W/i/2008/168/0/3/Flight_of_the_Seagulls_by_valatdeviantart.jpg" width="300" height="400"alt=""> <figcaption> <div class="effeckt-figcaption-wrap"> <video preload="auto" controls loop width="300px" id="backface-video" height="400px" poster="http://video-js.zencoder.com/oceans-clip.jpg"> <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm"> </video> </div> <p>What an amazing animal right? Look at them go.</p> </figcaption> </figure>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Static Image to Video Block - Script Codes CSS Codes

/** * * 1. Show a 300x400 image on a page. * 2. On rollover of this whole image block start playing a small video. Ideally this video too would be 300x400. * 3. Video should perhaps be 5 seconds long and just loop as long as your mouse is still hovering. * 4. When you hover off, the video goes away and the still image comes back. The key is seeing how seamless it is, does the video have problems loading, what browsers and devices will it work on, etc. * */
/*
*/ html { background: #114A8F; } .effeckt-caption { border: 4px solid #58B5FA; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); height: 400px; margin: 0 auto; width: 300px; } .effeckt-caption img { -webkit-transition: 500ms; transition: 500ms; } .effeckt-caption figcaption { background-color: #000; color: #EFE; position: absolute; -webkit-transition: 500ms; transition: 500ms; width: 100%; } .video .effeckt-caption[data-effeckt-type="cover-fade"] { /*&:hover, &:active,*/ } .video .effeckt-caption[data-effeckt-type="cover-fade"] figcaption { top: 0; left: 0; height: 100%; opacity: 0; } .video .effeckt-caption[data-effeckt-type="cover-fade"].active figcaption { opacity: 1; } .no-video .effeckt-caption[data-effeckt-type="cover-fade"] figcaption { display: none; }

Static Image to Video Block - Script Codes JS Codes

;(function(window){ var // Is Modernizr defined on the global scope Modernizr = typeof Modernizr !== "undefined" ? Modernizr : false, // whether or not is a touch device isTouchDevice = Modernizr ? Modernizr.touch : !!('ontouchstart' in window || 'onmsgesturechange' in window), // Are we expecting a touch or a click? buttonPressedEvent = ( isTouchDevice ) ? 'touchstart' : 'click', // List of all animation/transition properties // with its animationEnd/transitionEnd event animationEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, transitionEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', 'OTransition' : 'oTransitionEnd', 'msTransition' : 'MSTransitionEnd', 'transition' : 'transitionend' }, Effeckt = function() { this.init(); }; // Current version. Effeckt.version = '0.0.1'; // Initialization method Effeckt.prototype.init = function() { this.buttonPressedEvent = buttonPressedEvent; //event trigger after animation/transition end. this.transitionEndEventName = Modernizr ? transitionEndEventNames[Modernizr.prefixed('transition')] : getTransitionEndEventNames(); this.animationEndEventName = Modernizr ? animationEndEventNames[Modernizr.prefixed('animation')] : getAnimationEndEventNames(); this.transitionAnimationEndEvent = this.animationEndEventName + ' ' + this.transitionEndEventName; }; Effeckt.prototype.getViewportHeight = function() { var docElement = document.documentElement, client = docElement['clientHeight'], inner = window['innerHeight']; if( client < inner ) return inner; else return client; }; // Get all the properties for transition/animation end function getTransitionEndEventNames() { return _getEndEventNames( transitionEndEventNames ); } function getAnimationEndEventNames() { return _getEndEventNames( animationEndEventNames ); } function _getEndEventNames(obj) { var events = []; for ( var eventName in obj ) { events.push( obj[ eventName ] ); } return events.join(' '); } // Creates a Effeckt object. window.Effeckt = new Effeckt();
})(this);
/*! * captions.js * * author: Effeckt.css * * Licensed under the MIT license */
var effecktCaptions = { init: function() { this.bindUIActions(); }, bindUIActions: function() { var self = this, v = document.getElementsByTagName("video")[0]; $('[data-effeckt-type]').on('click mouseover mouseout touchstart', function(event) { self.activateCaptions(this); event.preventDefault(); console.log(event.type); if(this.classList.contains('active')) { v.play(); } else { v.pause(); } }); }, activateCaptions: function(el) { var activeClass = 'active'; if (document.documentElement.classList) { el.classList.toggle(activeClass); } else { var $caption = $(el); $caption.toggleClass(activeClass); } }
};
effecktCaptions.init();
Static Image to Video Block - Script Codes
Static Image to Video Block - Script Codes
Home Page Home
Developer GRAY GHOST
Username grayghostvisuals
Uploaded December 08, 2022
Rating 3
Size 4,864 Kb
Views 32,384
Do you need developer help for Static Image to Video Block?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

GRAY GHOST (grayghostvisuals) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!