Static Image to Video Block
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 - 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();
Developer | GRAY GHOST |
Username | grayghostvisuals |
Uploaded | December 08, 2022 |
Rating | 3 |
Size | 4,864 Kb |
Views | 32,384 |
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!
Name | Size |
French Curve | 5,330 Kb |
Filter Animation | 2,234 Kb |
Facebook Android App Off Canvas Menu Pattern | 9,817 Kb |
Off Canvas Overlay Full Screen | 5,270 Kb |
ScrollTop Demo | 7,104 Kb |
Underneath | 93,385 Kb |
Sticky Scroll | 3,015 Kb |
RWD Accordion | 3,860 Kb |
Mocean SliderModals | 4,731 Kb |
The Wheel of Circles | 2,919 Kb |
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!
Name | Username | Size |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Basic jQuery Filter list | Mtedwards | 2,464 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Slide like Mailbox | Hmps | 3,758 Kb |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
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!