edge to edge html5 video - javascript

I'm running an HTML5 video on my page and I'd like to make it resize edge to edge in ratio based on the browser's size. It will be set as a background with very little on the page.
To cover my ass, I'm using VideoJS to play the video and handle backwards compatibility. The fullscreen function built into the library works well, but is triggering the browser's native fullscreen function. In some browsers this means black bars, in Safari it means literally fullscreen independent of the browser window. I don't want either of these.
http://videojs.com/
Ideally, it would function like Supersized does for images. The image is always set to the full width of the page, and height is cropped towards the CENTER from there. As you resize the page smaller and smaller, it hits a min-height and begins cropping the width towards the center.
http://lara.fm/
My JavaScript knowledge is minimal, but I'm able to poke and prod to figure things out. I figured that dropping in the Supersized resizing scripts after the VideoJS library and forcing them to work on video tags would work in some way.. at least a starting place, but it didn't work.
Can someone help me understand what function can adjust width to the page, height in ratio, and crop towards the center at a certain width or height? Here's what I've got so far:
http://kzmnt.com/test/
This is a tuffie, I know. Thank you SO much.

You can try the following, (based on the demo you posted)
.video-js-box.fullScreen{
width: 100% !important;
position: relative;
background: black;
}
.fullScreen .video-js{
height: 100% !important;
margin: 0 auto;
display: block;
}
add the class .fullScreen at the video-js-box and see what happens.
I am trying to achieve the effect you described above, and I 'll let you know as soon as I find a better solution.
EDIT: Ok I think I found a solution - (VERSION 2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Video Player</title>
<!-- Include the VideoJS Library -->
<script src="http://kzmnt.com/test/video.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
VideoJS.setupAllWhenReady();
</script>
<!-- Include the VideoJS Stylesheet -->
<link rel="stylesheet" href="http://videojs.com/video-js/video-js.css?v=1292015834" type="text/css" media="screen" title="Video JS">
<style>
body{margin:0;}
.video-js-box.fullScreen{
width: 100% !important;
min-width: 380px !important;
min-height: 280px !important;
position: relative;
background: #eeeeee;
position:absolute;
overflow: hidden;
top:0;
left:0;
height:100% !important;
z-index:998;
}
.fullScreen .video-js{
height:auto;
/*height: 100% !important;
width:100% !important;*/
width:100%;
top:0;
left:0;
margin: 0 auto;
display: block;
}
.video-js-box{
width:400px;
height:auto;
}
.video-js-box video{
width:400px;
height:auto;
}
#buttonImportant{
position:fixed;
top:0;
right:0;
width:100px;
height:100px;
border-radius:8px;
background:#eeeeee;
font-size:1.3em;
z-index:999;
}
</style>
</head>
<body>
<div id="buttonImportant"> CLICK ME!!! </div>
<div class="video-js-box" id="videoContainer">
<video class="video-js" preload loop fullscreen autoplay>
<source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="1280" height="720" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"playlist":["http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.png", {"url": "../vid/kozmonaut_by_christina_tan.mp4","autoPlay":true,"autoBuffering":true}]}' />
</object>
</video>
</div>
<script type="text/javascript">
var clicked = document.getElementById("buttonImportant")
var videoContainer = document.getElementById('videoContainer');
var video = videoContainer.getElementsByTagName('video')[0];
video.style.height="auto";
video.style.width="400px";
clicked.addEventListener('click',function(){
if( videoContainer.className.lastIndexOf("fullScreen")>=0 ){
videoContainer.className="video-js-box";
video.style.height = "";
video.style.width="";
}
else
{
videoContainer.className="video-js-box fullScreen";
video.style.height = "";
video.style.width="";
}
myResizerObject.prevWidth = video.offsetWidth;
myResizerObject.prevHeight = video.offsetHeight;
myResizerObject.Init();
},false);
var RESIZER = function(){
this.prevWidth = video.offsetWidth;
this.prevHeight = video.offsetHeight;
this.videoContainer = document.getElementById('videoContainer');
this.video = videoContainer.getElementsByTagName('video')[0];
this.videoStyle = this.video.style;
var ratio = this.video.offsetHeight/this.video.offsetWidth;
var that = this;
this.Init = function(){
if( that.videoContainer.className.lastIndexOf("fullScreen")>=0 )
{
var videoContOffsetWidth = that.videoContainer.offsetWidth;
var videoOffsetWidth = that.video.offsetWidth;
var videoContOffsetHeight = that.videoContainer.offsetHeight;
var videoOffsetHeight = that.video.offsetHeight;
if(that.prevWidth!= videoContOffsetWidth)
{
that.prevWidth = videoContOffsetWidth;
var desired = videoContainer.offsetHeight/videoContainer.offsetWidth;
if(desired>ratio){
that.videoStyle.width=videoContOffsetWidth*desired+videoContOffsetWidth*desired+"px";
that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
}
else{
that.videoStyle.cssText="height:auto;width:100%;left:0px;top:0px;";
}
}
if(that.prevHeight!=videoContOffsetHeight)
{
that.prevHeight = videoContOffsetHeight;
var desired = videoContOffsetHeight/videoContOffsetWidth;
if(desired>ratio){ console.log(ratio);
that.videoStyle.top = '0px';
that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
that.videoStyle.width = videoContOffsetHeight*desired+videoContOffsetHeight/desired+'px';
}
else
{
that.videoStyle.top = -1*(videoOffsetHeight-videoContOffsetHeight)/2+'px';
}
}
}
};
};
var myResizerObject = new RESIZER();
window.onresize = myResizerObject.Init;
</script>
</body>
</html>
Copy - paste the above code to a new file and test it : )
MAJOR EDIT 2: I refactored my code, and packaged it in a more object oriented form. Now it does move (modified top and left css attributes) so that the video remains centered when the screen ratio changes. It still does a weird little jump but it works quite well.
I will keep working on this task because I think it's a cool feature. Also I have no idea what happens or what would you like to happen during the flash fallback.
ps. I kept the click me button but it is very easy to disable it.

It looks like you're question has been answered, more or less, but for others looking for a quick and dirty way to handle this, I just pulled apart "jQuery Easy Background Resize Plug-In" and made it work for video. Pretty easy.
Html looks like this:
<div id="video-container">
<video autoplay="autoplay" id="video">
<source src="/videos/11280741.mp4" type="video/mp4" />
</video>
</div>
Javascript looks like this (look towards the bottom for the video specific stuff)
/******************************************************
* jQuery plug-in
* Easy Background Image Resizer
* Developed by J.P. Given (http://johnpatrickgiven.com)
* Useage: anyone so long as credit is left alone
******************************************************/
(function($) {
// Global Namespace
var jqez = {};
// Define the plugin
$.fn.ezBgResize = function(options) {
// Set global to obj passed
jqez = options;
// If img option is string convert to array.
// This is in preparation for accepting an slideshow of images.
if (!$.isArray(jqez.img)) {
var tmp_img = jqez.img;
jqez.img = [tmp_img]
}
$("<img/>").attr("src", jqez.img).load(function() {
jqez.width = this.width;
jqez.height = this.height;
// Create a unique div container
$("section#content").append('<div id="jq_ez_bg"></div>');
// Add the image to it.
$("#jq_ez_bg").html('<img src="' + jqez.img[0] + '" width="' + jqez.width + '" height="' + jqez.height + '" border="0">');
// First position object
$("#jq_ez_bg").css("visibility","hidden");
// Overflow set to hidden so scroll bars don't mess up image size.
$("body").css({
"overflow":"hidden"
});
resizeImage();
});
};
$(window).bind("resize", function() {
resizeImage();
});
// Actual resize function
function resizeImage() {
$("#jq_ez_bg").css({
"position":"fixed",
"top":"0px",
"left":"0px",
"z-index":"-1",
"overflow":"hidden",
"width":$(window).width() + "px",
"height":$(window).height() + "px",
"opacity" : jqez.opacity
});
// Image relative to its container
$("#jq_ez_bg").children('img').css("position", "relative");
// Resize the img object to the proper ratio of the window.
var iw = $("#jq_ez_bg").children('img').width();
var ih = $("#jq_ez_bg").children('img').height();
if ($(window).width() > $(window).height()) {
//console.log(iw, ih);
if (iw > ih) {
var fRatio = iw/ih;
$("#jq_ez_bg").children('img').css("width",$(window).width() + "px");
$("#jq_ez_bg").children('img').css("height",Math.round($(window).width() * (1/fRatio)));
var newIh = Math.round($(window).width() * (1/fRatio));
if(newIh < $(window).height()) {
var fRatio = ih/iw;
$("#jq_ez_bg").children('img').css("height",$(window).height());
$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#jq_ez_bg").children('img').css("height",$(window).height());
$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#jq_ez_bg").children('img').css("height",$(window).height());
$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
// Center the image
if (typeof(jqez.center) == 'undefined' || jqez.center) {
if ($("#jq_ez_bg").children('img').width() > $(window).width()) {
var this_left = ($("#jq_ez_bg").children('img').width() - $(window).width()) / 2;
$("#jq_ez_bg").children('img').css({
"top" : 0,
"left" : -this_left
});
}
if ($("#jq_ez_bg").children('img').height() > $(window).height()) {
var this_height = ($("#jq_ez_bg").children('img').height() - $(window).height()) / 2;
$("#jq_ez_bg").children('img').css({
"left" : 0,
"top" : -this_height
});
}
}
$("#jq_ez_bg").css({
"visibility" : "visible"
});
// Allow scrolling again
$("body").css({
"overflow":"auto"
});
$("#video-container").css({
"position":"fixed",
"top":"0px",
"left":"0px",
"z-index":"-1",
"overflow":"hidden",
"width":$(window).width() + "px",
"height":$(window).height() + "px",
"opacity" : jqez.opacity
});
$("#video-container").children('video').css("position", "relative");
var iw = $("#video-container").children('video').width();
var ih = $("#video-container").children('video').height();
if ($(window).width() > $(window).height()) {
//console.log(iw, ih);
if (iw > ih) {
var fRatio = iw/ih;
$("#video-container").children('video').css("width",$(window).width() + "px");
$("#video-container").children('video').css("height",Math.round($(window).width() * (1/fRatio)));
var newIh = Math.round($(window).width() * (1/fRatio));
if(newIh < $(window).height()) {
var fRatio = ih/iw;
$("#video-container").children('video').css("height",$(window).height());
$("#video-container").children('video').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#video-container").children('video').css("height",$(window).height());
$("#video-container").children('video').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#video-container").children('video').css("height",$(window).height());
$("#video-container").children('video').css("width",Math.round($(window).height() * (1/fRatio)));
}
// Center the image
if (typeof(jqez.center) == 'undefined' || jqez.center) {
if ($("#video-container").children('video').width() > $(window).width()) {
var this_left = ($("#video-container").children('video').width() - $(window).width()) / 2;
$("#video-container").children('video').css({
"top" : 0,
"left" : -this_left
});
}
if ($("#video-container").children('video').height() > $(window).height()) {
var this_height = ($("#video-container").children('video').height() - $(window).height()) / 2;
$("#video-container").children('video').css({
"left" : 0,
"top" : -this_height
});
}
}
$("#video-container").css({
"visibility" : "visible"
});
}
})(jQuery);

Related

jQuery photoResize function isn't working

I'm new to jQuery and i'm still in the process of learning HTML and CSS. I wanted to have a responsive image on the homepage of my website that scaled itself with the user's browser window. I found this at github: https://github.com/gutierrezalex/photo-resize.git
but i think i might be using it wrong, since i can't get it to work for me.
Here's my html:
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<reference path="jquery-1.5.1.min.js" />
<script src="jquery-photo-resize.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("img").photoResize()
});
</script>
</head>
and here's the jquery-photo-resize.js file:
function photoResize($) {
"use strict";
$.fn.photoResize = function (options) {
var element = $(this),
defaults = {
bottomSpacing: 10
};
function updatePhotoHeight() {
var o = options,
photoHeight = $(window).height();
$(element).attr('height', photoHeight - o.bottomSpacing);
}
$(element).load(function () {
updatePhotoHeight();
$(window).bind('resize', function () {
updatePhotoHeight();
});
});
options = $.extend(defaults, options);
};
}
Like i said, i'm a novice, so please let me know what i'm doing wrong, and how i can achieve my desired effect.
You don't need jquery for this. Just set a class name and then in your style sheet use a width. If you only set a width it'll auto size the height to maintain the aspect ratio. Same goes for setting the height only. If you set both your aspect ratio may be off. The width can be a percentage of the current element. You could also use vw (view port width). Also calc is super helpful.
{ width:75%}
Update:
.cropper {
width: 75px;
height: 75px;
overflow: hidden;
position: relative;
}
.cropped {
width: 100px;
position: absolute;
left: -12.5px;
top: -12.5px;
}
<div class="cropper">
<img class="cropped" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-256px-SIPI_Jelly_Beans_4.1.07.tiff.jpg"/>
</div>
Here is code :
CSS :
.featured { overflow:hidden;
border:2px solid #000;
position:relative;}
.featured img { width:100%; position:relative;}
#pos_1 { width:200px; height:190px; }
#pos_2 { width:150px; height:250px; }
#pos_3 { width:350px; height:150px; }
HTML :
<div id="topGallery">
<article class="featured" id="pos_1">
<img src="abc.jpd" class="attachment-post-thumbnail wp-post-image" alt="piano" />
</article>
</div>
Javascript :
jQuery(document).ready(function($) {
///HOME PAGE - image resizing
function imageLoaded() {
var w = $(this).width();
var h = $(this).height();
var parentW = $(this).parent().width();
var parentH = $(this).parent().height();
//console.log(w + '-' + h + '-' + parentW + '-' + parentH);
//if (w >= parentW){ //always true because of CSS
if (h > parentH){
$(this).css('top', -(h-parentH)/2);
} else if (h < parentH){
$(this).css('height', parentH).css('width', 'auto');
$(this).css('left', -($(this).width()-parentW)/2);
}
//}
}
$('#topGallery img').each(function() {
if( this.complete ) {
imageLoaded.call( this );
} else {
$(this).one('load', imageLoaded);
}
});
});

How to export a map to fullscreen way (using OpenLayer)?

I have the following code and It works perfectly:
<style>
.map {
width: 100%;
height: 350px;
}
</style>
<div id="map" class="map"></div>
/* Export map to PNG Format */
var exportPNGElement = document.getElementById('pngFormat');
if ('download' in exportPNGElement) {
exportPNGElement.addEventListener('click', function(e) {
map.once('postcompose', function(event) {
var canvas = event.context.canvas;
exportPNGElement.href = canvas.toDataURL('image/png');
});
map.renderSync();
}, false);
} else {
var info = document.getElementById('no-download');
/**
* display error message
*/
info.style.display = '';
}
But now, I'd like to export all this to fullscreen way.
I've tried to insert the following code but It doesn't work.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
Also, I've tried to resize the div map but without sucessful.
var maptoEdit = document.getElementById('map').innerHTML = "<div style='height:100%; width:100%'></div>";
UPDATE:
Finally, I can do it the next way:
//document.getElementById('map').style.width = $(window).width() + 'px'; // Returns width of browser viewport
//document.getElementById('map').style.height= $(window).height() + 'px'; // Returns height of browser viewport
document.getElementById('map').style.width = '1280px';
document.getElementById('map').style.height = '768px';
map.updateSize();

Canvas toggle filling whole page removing scrollbar

I've got a canvas on my page and want to toggle it filling the page and backwards. My page is usually "higher" then a screens height so there is a scrollbar on my page. This scroll-bar does't hide when I'm setting the size of my canvas like that in my css:
canvas {
display: inline;
outline: 0;
margin: 50;
border: 1px solid #E0E0E0;
}
canvas.fullscreen {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
margin: 0;
}
My javascript looks like this:
//toggle the fullscreen mode
function fullscreen() {
if (!fullWindowState) {
fullWindowState = true;
//canvas goes full Window
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.className = "fullscreen"
} else {
fullWindowState = false;
//canvas goes normal
canvas.width = 820;
canvas.height = 600;
canvas.className = "";
}
}
The full code is on github too and the page is on gh-pages
http://patsimm.github.io/mandelight/
I really don't know what to do to remove the scrollbar when the canvas is in "fullscreen" mode. Every help is apreciated!
Thanks!
patsimm
This has something to do width <canvas> tag.
<canvas> will cause scrollbar if not set to display:block.
detail: http://colla.me/bug/show/canvas_cannot_have_exact_size_to_fullscreen
Try setting overflow to hidden when you're in fullWindowState;
//toggle the fullscreen mode
function fullscreen() {
if (!fullWindowState) {
fullWindowState = true;
//canvas goes full Window
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.className = "fullscreen"
document.body.scrollTop = 0; // <-- pull the page back up to the top
document.body.style.overflow = 'hidden'; // <-- relevant addition
} else {
fullWindowState = false;
//canvas goes normal
canvas.width = 820;
canvas.height = 600;
canvas.className = "";
document.body.style.overflow = 'visible'; // <-- toggle back to normal mode
}
}
Use the following CSS style for <html> and <body> tags,
<style>
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
}
</style>
and the following javascript code to set width and height of the <canvas id="canvas"><canvas> element,
<script>
var canvas = document.getElementById('canvas');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
</script>
If you go into full screen mode and use the developer tools to set visibility: hidden on the canvas, you can see that the page content behind the canvas is is too large, causing the scrollbars to appear. I was able to get rid of the scrollbars by setting display: none on the page footer. You could toggle the display property of the footer or other content while in full screen mode since it will be covered up by the canvas anyway.

onClick event on image while already moving

I'm trying to make an image that moves to the right on my website. When you click the image, it should move to the left. For now, this doesn't happen, any ideas? If possible, in pure Javascript and no Jquery ;)
Also, if you click the image for a second time, it should move to the right again. Every consecutive time, the image should move to the other side. I guess this would be best with a for-loop?
<script type"text/javascript">
window.onload = init;
var winWidth = window.innerWidth - movingblockobject.scrollWidth; //get width of window
var movingblock = null //object
movingblock.onclick = moveBlockLeft();
function init() {
movingblock = document.getElementById('movingblockobject'); //get object
movingblock.style.left = '0px'; //initial position
moveBlockRight(); //start animiation
}
function moveBlockRight() {
if (parseInt(movingblock.style.left) < winWidth) { // stop function if element touches max window width
movingblock.style.left = parseInt(movingblock.style.left) + 10 + 'px'; //move right by 10px
setTimeout(moveBlockRight,20); //call moveBlockRight in 20 msec
} else {
return;
}
}
function moveBlockLeft () {
movingblock.style.right = parseInt(movingblock.style.right) + 10 + 'px'
}
</script>
Please first go through the Basics of javascript before trying out something .
window.onload = init;
var winWidth = window.innerWidth;
var movingblock = null;
var intervalid = null;
var isLeft = false;
function init() {
console.log('Init');
movingblock = document.getElementById('movingblockobject');
movingblock.style.left = '0px';
intervalid = setInterval(function() {
moveBlock(true);
}, 2000);
movingblock.onclick = function() {
moveBlock(false);
};
}
function moveBlock(isSetInterval) {
if (!isSetInterval)
isLeft = !isLeft;
if (parseInt(movingblock.style.left) < winWidth) {
if (isLeft)
movingblock.style.left = parseInt(movingblock.style.left) - 10 + 'px';
else
movingblock.style.left = parseInt(movingblock.style.left) + 10 + 'px';
} else {
movingblock.style.left = '0px';
}
}
function moveBlockLeft() {
clearInterval(intervalid);
movingblock.style.right = parseInt(movingblock.style.right) + 10 + 'px';
intervalid = setInterval(moveBlockRight, 20);
}
<div id="movingblockobject" style="width:50px;height:50px;border:solid;position: absolute;">
var movingblock = null
this are mistakes you have delclared it as null and next line you are binding click event.Also for assigning click event you should assign the name of the function.
movingblock.onclick = moveBlockLeft;
above is basic bug there are lot like the above.I feel Self learning is much better for basics
try yourself.
try the above it will work but please try yourself
You should CSS3 transition, works like a charm. Just toggle a class "right"
HTML:
<html>
<head>
<style>
#movingblockobject{
width: 40px;
padding: 10px;
position: fixed;
height:10px;
left:0px;
-webkit-transition: left 2s; /* For Safari 3.1 to 6.0 */
transition: left 2s;
}
#movingblockobject.right{
left:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$( document ).ready(function() {
$('#movingblockobject').on('click', function (e) {
$('#movingblockobject').toggleClass("right");
});
});
</script>
</head>
<body>
<div id="movingblockobject" class="demo">add image here</div>
</body>
</html>

How to remove flicking in IE?

I have created this fiddle where I have flicking problem in IE. Even Chrome isnt good, but in fiddle it looks more or less fine. I think problem is in "size of step" for one scroll, when you grab scroller manualy everything is smooth, but using your mousewheel leads to jumping/flicking in IE and Chrome.
window.addEventListener('scroll', function() { ...}, false);
This is my current HTML:
<div id="fakeBody">
<div id="spacer">scroll down</div>
<div class="niceBanner hide roller" id="niceBannerFrame">
<div id="bannerShadow"></div>
<div id="thumb0">
<div id="niceBannerOriginal" class="roller thumb1 thumb2"></div>
<div id="niceBannerBlur" class="roller deblur thumb1 thumb2"></div>
<div id="blackRow"></div>
</div>
</div>
</div>
Script:
window.addEventListener('scroll', function () {
var totalHeigth, currentScroll, visibleHeight;
var newResolutionBannerHeight = 0;
currentScroll = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
totalHeigth = (document.height !== undefined) ? document.height : document.getElementById("fakeBody").offsetHeight;
visibleHeight = document.documentElement.clientHeight;
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight;
var curentWidth = x;
console.log('curent Width: ' + curentWidth);
if (curentWidth < 1070) {
var newBannerWidth = Math.round((curentWidth / 1070) * 1920);
var newMargin = Math.round((newBannerWidth - curentWidth) / 2);
newResolutionBannerHeight = Math.round((500 / 1920) * newBannerWidth);
} else {}
//now it is easy to recognize if visitor is at the bottom of page
if (visibleHeight + currentScroll >= totalHeigth) {
//do the magic with banner
document.getElementById("niceBannerFrame").className = "unhide";
var bannerHeight = visibleHeight + currentScroll - totalHeigth;
var style = document.createElement('style');
style.type = 'text/css';
var number = (curentWidth < 500) ? 10 + bannerHeight : 50 + bannerHeight; //not ideal solution, slower rolling for small screen, picture is realy small
if (curentWidth > 1070) {
number = (number > 500) ? 500 : number;
var opacityBlur = 1 - (number / 500);
style.innerHTML = '.roller {bottom:-' + number + 'px;} .deblur {opacity:' + opacityBlur + ';} .thumb2{height: 500px;} ';
} else {
number = (number > newResolutionBannerHeight) ? newResolutionBannerHeight : number;
var opacityBlur = 1 - (number / newResolutionBannerHeight);
style.innerHTML = '.roller {bottom:-' + number + 'px;} .deblur {opacity:' + opacityBlur + ';} .thumb2{height:' + newResolutionBannerHeight + 'px;} ';
}
document.head.appendChild(style);
} else {
//it is not good time for magic, scroll a bit more or I will hide already visible bilboard
document.getElementById("niceBannerFrame").className = "hide";
}
}, false);
and CSS:
#spacer {
height: 1000px;
background-color: whitesmoke;
}
#niceBannerOriginal {
background-image:url(http://nzworker.com/jakub-portfolio/justfiles/1920x500_original.jpg);
position: absolute;
z-index:-3;
}
#niceBannerBlur {
background-image:url(http://nzworker.com/jakub-portfolio/justfiles/1920x500_blur.jpg);
position: absolute;
z-index:-2;
}
#bannerShadow {
position:absolute;
background-image:url(http://nzworker.com/jakub-portfolio/justfiles/Stin.png);
background-repeat:repeat-x;
width:100%;
z-index:-1;
height:25px;
}
.hide {
display: none;
}
.unhide {
display: block;
}
#fakeBody {
height:1000px;
position:relative;
top:0;
left:0;
right:0;
}
#blackRow {
display:none;
}
#niceBannerFrame {
overflow: hidden;
}
#media (min-width: 1921px) {
#blackRow {
background-color: #000000;
display: block;
height:500px;
position: absolute;
width: 100%;
z-index: -6;
}
}
/*desktop resolution*/
#media (min-width: 1070px) and (max-width: 1920px) {
.thumb1 {
width: 100%;
height: 500px;
background-position: 50% 50%;
/*image centering*/
}
.thumb2 {
}
}
/*mobile and tablet resolution*/
#media (max-width: 1069px) {
.thumb2 {
width: 100%;
height: 500px;
background-repeat:no-repeat;
/*background-position: 50% 50%; image centering*/
}
#niceBannerOriginal {
background-image:url(http://nzworker.com/jakub-portfolio/justfiles/1920x500_original-thumb.jpg);
background-size: 100%;
}
#niceBannerBlur {
background-image:url(http://nzworker.com/jakub-portfolio/justfiles/1920x500_blur-thumb.jpg);
background-size: 100%;
}
}
My question is do you how to remove this flicking? Or do you know how to cut one mouse wheel step to more smaller ones?
PS: I can not use jQuery or other plugins.
I can't be 100% sure about this, but I think the flickering isn't from the amount you're scrolling, but due to the fact that you're changing the display mode, and pushing the view back up a tiny bit.
Essentially if you are just underneath the visibleHeight+currentScroll >= totalHeigth test by a couple of pixels, then currentScroll get's pushed up a tiny bit when whatever happens in there happens (I don't entirely understand what's going on, so I can't really give any better advice on that), so that it's no longer greater than totalHigth, and so it then fails the test immediately after, hence the flickering.
Worked this out by getting rid of the hide line at the end and it seems to work. Unfortunately I don't entirely understand the code, so I can't give you any better idea than that, though hopefully it points you towards a solution.

Categories