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();
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!
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!
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!
