We Keep Coding

How can I effectively pan an entire image programmatically?

I have a 11500x11500 div that consists of 400 images, that obviously overflows the viewport.
I would like to pan around the whole div programmatically.
I want to generate an animation and by the time the animation is over, the whole of the div must have been panned across the viewport, top to bottom, left to right.
Right now, I am "splitting" my 11500x1500 div into tiles. The maximum width and height of each tile is the width and height of the viewport.
I store the coordinates of each tile and then I randomly choose one, pan it left-to-right and then move on to the next one.
I would like to know:
whether my method is correct or whether I am missing something in my calculations/approach and it could be improved. Given the size, it is hard for me to tell whether I'm actually panning the whole of the div after all
whether I can make the panning effect feel more "organic"/"natural". In order to be sure that the whole div is eventually panned, I pick each tile and pan it left-to-right, move on to the next one etc. This feels kind of rigid and too formalised. Is there a way to pan at let's say an angle or with a movement that is even more random and yet be sure that the whole div will eventually be panned ?
Thank in advance for any help.
This is the jsfiddle and this is the code (for the sake of the example/test every "image" is actually a div containing its index as text):
function forMs(time) {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, time)
})
}
let container = document.getElementById('container')
let {
width,
height
} = container.getBoundingClientRect()
let minLeft = window.innerWidth - width
let minTop = window.innerHeight - height
let i = 0
while (i < 400) {
// adding "image" to the container
let image = document.createElement('div')
// add some text to the "image"
// to know what we're looking at while panning
image.innerHTML = ''
let j = 0
while (j < 100) {
image.innerHTML += ` ${i + 1}`
j++
}
container.appendChild(image)
i++
}
let coords = []
let x = 0
while (x < width) {
let y = 0
while (y < height) {
coords.push({
x,
y
})
y += window.innerHeight
}
x += window.innerWidth
}
async function pan() {
if (!coords.length) {
return;
}
let randomIdx = Math.floor(Math.random() * coords.length)
let [randomCoord] = coords.splice(randomIdx, 1);
console.log(coords.length)
container.classList.add('fast')
// update style in new thread so new transition-duration is applied
await forMs(10)
// move to new yet-unpanned area
container.style.top = Math.max(-randomCoord.y, minTop) + 'px'
container.style.left = Math.max(-randomCoord.x, minLeft) + 'px'
// wait (approx.) for transition to end
await forMs(2500)
container.classList.remove('fast')
// update style in new thread so new transition-duration is applied
await forMs(10)
//pan that area
let newLeft = -(randomCoord.x + window.innerWidth)
if (newLeft < minLeft) {
newLeft = minLeft
}
container.style.left = newLeft + 'px'
// wait (approx.) for transition to end
await forMs(4500)
// move on to next random area
await pan()
}
pan()
html,
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
left: 0;
text-align: left;
width: 11500px;
height: 11500px;
transition: all 4s ease-in-out;
transition-property: top left;
font-size: 0;
}
#container.fast {
transition-duration: 2s;
}
#container div {
display: inline-block;
height: 575px;
width: 575px;
border: 1px solid black;
box-sizing: border-box;
font-size: 45px;
overflow: hidden;
word-break: break-all;
}
<div id="container"></div>

I think following improvements can be made:
Hide overflow on html and body so user can not move scrollbar and disturb the flow.
Calculate minLeft and minTop every time to account for window resizing. You might need ResizeObserver to recalculate things.
Increase transition times to avoid Cybersickness. In worse case RNG will pick bottom right tile first so your container will move the longest in 2seconds! Maybe, you can zoom-out and move then zoom-in then perform pan. Or use any serpentine path which will make shorter jumps.
Performance improvements:
Use transform instead of top, left for animation.
Use will-change: transform;. will-change will let browser know what to optimize.
Use translate3D() instead of translate(). ref
Use requestAnimationFrame. Avoid setTimeout, setInterval.
This is an old but good article: https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
Modified code to use transform:
function forMs(time) {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, time)
})
}
let container = document.getElementById('container')
let stat = document.getElementById('stats');
let {
width,
height
} = container.getBoundingClientRect()
let minLeft = window.innerWidth - width
let minTop = window.innerHeight - height
let i = 0
while (i < 400) {
// adding "image" to the container
let image = document.createElement('div')
// add some text to the "image"
// to know what we're looking at while panning
image.innerHTML = ''
let j = 0
while (j < 100) {
image.innerHTML += ` ${i + 1}`
j++
}
container.appendChild(image)
i++
}
let coords = []
let x = 0
while (x < width) {
let y = 0
while (y < height) {
coords.push({
x,
y
})
y += window.innerHeight
}
x += window.innerWidth
}
let count = 0;
async function pan() {
if (!coords.length) {
stat.innerText = 'iteration: ' +
(++count) + '\n tile# ' + randomIdx + ' done!!';
stat.style.backgroundColor = 'red';
return;
}
let minLeft = window.innerWidth - width
let minTop = window.innerHeight - height
let randomIdx = Math.floor(Math.random() * coords.length);
randomIdx = 1; //remove after debugging
let [randomCoord] = coords.splice(randomIdx, 1);
stat.innerText = 'iteration: ' +
(++count) + '\n tile# ' + randomIdx;
console.log(coords.length + ' - ' + randomIdx)
container.classList.add('fast')
// update style in new thread so new transition-duration is applied
await forMs(10)
// move to new yet-unpanned area
let yy = Math.max(-randomCoord.y, minTop);
let xx = Math.max(-randomCoord.x, minLeft);
move(xx, yy);
// wait (approx.) for transition to end
await forMs(2500)
container.classList.remove('fast')
// update style in new thread so new transition-duration is applied
await forMs(10)
//pan that area
let newLeft = -(randomCoord.x + window.innerWidth)
if (newLeft < minLeft) {
newLeft = minLeft
}
xx = newLeft;
//container.style.left = newLeft + 'px'
move(xx, yy);
// wait (approx.) for transition to end
await forMs(4500)
// move on to next random area
await pan()
}
pan()
function move(xx, yy) {
container.style.transform = "translate3D(" + xx + "px," + yy + "px,0px)";
}
html,
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
text-align: left;
width: 11500px;
height: 11500px;
transition: all 4s ease-in-out;
transition-property: transform;
font-size: 0;
will-change: transform;
}
#container.fast {
transition-duration: 2s;
}
#container div {
display: inline-block;
height: 575px;
width: 575px;
border: 1px solid black;
box-sizing: border-box;
font-size: 45px;
overflow: hidden;
word-break: break-all;
}
#stats {
border: 2px solid green;
width: 100px;
background-color: lightgreen;
position: fixed;
opacity: 1;
top: 0;
left: 0;
z-index: 10;
}
<div id=stats>iteration: 1 tile# 11</div>
<div id="container"></div>
Note I haven't implemented everything in above snippet.

element not appends in body on window onload

I have been created the function which detects the screen zoom-in or zoom-out function. I am trying if window zoom == 100 or is in normal size the notification will remove else it append instantly.
In my code, it's working perfectly but it not working on window load, for showing the demo and result I have to click ctrl+ or ctrl-.
I am trying as window load it auto decide and append if window zoom, not 100 or normal.
Please help me with how I fix this?
function informationbar(percentage, zoomstatus) {
$("body").append('<div id="informationbar" style="top: 0px;"><img src="#" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px" />You are using the window screen on ' + percentage + '% ' + zoomstatus + ' resolution, might some options are not visible properly on this current resolution please fit the screen on 100% as this our highly recommendation.</div>');
}
$(window).resize(function() {
var browserZoomLevel = Math.round(window.devicePixelRatio * 100);
if (browserZoomLevel !== '100') {
if (browserZoomLevel > "100") {
var status = "ZoomIn";
} else {
var status = "ZoomOut";
}
informationbar(browserZoomLevel, status);
} else {
$("div#informationbar").remove();
}
});
var browserZoomLevel = Math.round(window.devicePixelRatio * 100);
if (browserZoomLevel == '100') {
$("div#informationbar").remove();
} else {
if (browserZoomLevel > "100") {
var status = "ZoomIn";
} else {
var status = "ZoomOut";
}
informationbar(browserZoomLevel, status);
}
#informationbar {
position: fixed;
left: 0;
width: 100 %;
text - indent: 5 px;
padding: 5 px 0;
background - color: lightyellow;
border - bottom: 1 px solid black;
font: bold 12 px Verdana;
}
* html# informationbar {
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat" ? document.documentElement.clientWidth + "px": body.clientWidth + "px");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You seem to be using !== to compare numbers and strings, e.g. browserZoomLeveL !== '100' where browserZoomLevel = Math.round(...).
That will always give false, since the a string isn't a number, and === is strict about types. You should replace === '100' with just === 100.

Make simple js fiddle animation start on button click instead of page load.

I found this rather cool Js fiddle and have been editing the animation a bit and think its something I can use on a current project. However im not the best with Javascript. All I really need to know to accomplish the rest of my goal is how to make the animation not start until you click a button.
Here is the animation for the js fiddle.
http://jsfiddle.net/apipkin/qUTwQ/
Here is the css.
#o {
width: 200px;
height: 400px;
position: relative;
border-bottom: 1px solid blue;}
.bubble {
border: 1px solid
#f40009; display: block;
position: absolute;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
The rest is in the JS fiddle.
Thanks fo any help!

You can simply wrap it in a function and call that function on click.
DEMO
Create a button:
<button id="btn">Click</button>
And this js:
document.getElementById('btn').addEventListener('click', startAnimation);
function startAnimation() {
YUI().use('node', 'anim', 'anim-node-plugin', function(Y) {
var o = Y.one('#o'),
oW = o.get('offsetWidth'),
oH = o.get('offsetHeight'),
max = 12,
min = 4,
bubbles = 20,
timerDelay = 4000;
function makeBubble() {
var b = Y.Node.create('<span class="bubble"></span>');
b.plug(Y.Plugin.NodeFX, {
duration: 7,
easing: Y.Easing.easeOut,
to: {
top: 0,
opacity: 0
},
on: {
end: function() {
Y.later(10000, this, function(){
animBubble(this.get('node'));
});
}
}
});
o.append(b);
animBubble(b);
}
function animBubble(b) {
var v = Math.floor(Math.random() * (max - min)) + min;
b.setStyles({
height: v + 'px',
width: v + 'px',
borderRadius: v + 'px',
top: (oH + 2) + 'px',
opacity: 1
});
b.setStyle('left', Math.floor(Math.random() * (oW - v)));
b.fx.set('duration', Math.floor(Math.random() * 2 + 3));
b.fx.set('to.top', Math.floor(Math.random() * (oH / 2)));
b.fx.run();
}
for (i = 0; i < bubbles; i++) {
Y.later(Math.random() * timerDelay, this, function() {
makeBubble();
});
}
});
}

can't achieve touch compatibility with my jQuery zoom plugin

I modified an MIT licensed Zoom Plugins to fit my needs and it works perfectly well. However, it came from a time before smartphones and tablets and I really want to support them.
I have built a jsFiddle to illustrate my case:
https://jsfiddle.net/xLr86bs8/
Neccessary code:
JavaScript:
(function($){
var defaults = {
cursorColor:'237,241,244',
cursorOpacity: 1,
//cursorBorder: '1px solid black',
//cursorBorderThickness: 1,
cursor:'pointer',
zoomviewsize: [0,0],
magnification: 5,
};
var minitraversalzoomCursor,minitraversalzoomView,minitraversalsettings,minitraversalImageWidth,minitraversalImageHeight,minitraversalOffset,minitraversalzoomimage;
var minitraversalMethods = {
init : function(options){
$this = $(this),
minitraversalzoomCursor = $('.minitraversalzoom-cursor'),
minitraversalzoomView = $('.minitraversalzoom-view'),
minitraversalzoomimage = $('#MiniTraversalZoomImage'),
// This makes the complete addon independent from the size of the zoomwindow
//defaults.zoomviewsize = [$('#RadialBox').width(),$('#RadialBox').height()];
$(document).on('mouseenter touchstart',$this.selector,function(e){
var data = $(this).data();
minitraversalsettings = $.extend({},defaults,options,data);
minitraversalOffset = $(this).offset();
minitraversalImageWidth = $(this).width();
minitraversalImageHeight = $(this).height();
minitraversalsettings.zoomviewsize = [$(this).parent().width(),$(this).parent().height()];
cursorSize = [(minitraversalsettings.zoomviewsize[0]/minitraversalsettings.magnification),(minitraversalsettings.zoomviewsize[1]/minitraversalsettings.magnification)];
$original = $(this);
minitraversalZoomSource = $(this).attr('data-minitraversalzoom');
minitraversalSource = $(this).attr('src');
var posX = e.pageX,posY = e.pageY,zoomViewPositionX;
$('body').prepend('<div class="minitraversalzoom-cursor"> </div>');
$('#MiniZoomBox').addClass('minitraversalzoom-view').prepend('<img id="MiniTraversalZoomImage" src="' + minitraversalZoomSource + '">');
$(minitraversalzoomView.selector).css({
'position':'relative',
'z-index': 7,
'overflow':'hidden',
});
$(minitraversalzoomView.selector).children('img[id="MiniTraversalZoomImage"]').css({
'position':'relative',
'width': minitraversalImageWidth*minitraversalsettings.magnification,
'height': minitraversalImageHeight*minitraversalsettings.magnification,
});
$(minitraversalzoomCursor.selector).css({
'position':'absolute',
'width':cursorSize[0],
'height':cursorSize[1],
'background-color':'rgb('+ minitraversalsettings.cursorColor +')',
'z-index': 7,
'opacity':minitraversalsettings.cursorOpacity,
'cursor':minitraversalsettings.cursor,
'border':minitraversalsettings.cursorBorder,
});
$(minitraversalzoomCursor.selector).css({'top':posY-(cursorSize[1]/2),'left':posX});
$(document).on('mousemove move',document.body,minitraversalMethods.cursorPos);
});
},
cursorPos:function(e){
var posX = e.pageX,posY = e.pageY;
if(posY < minitraversalOffset.top || posX < minitraversalOffset.left || posY > (minitraversalOffset.top+minitraversalImageHeight) || posX > (minitraversalOffset.left+minitraversalImageWidth)){
$(minitraversalzoomCursor.selector).remove();
$(minitraversalzoomimage.selector).remove();
//$(minitraversalzoomView.selector).empty();
//$('#ZoomImage').remove();
//$(this).siblings('img').remove();
//$('#RadialBox > img').remove();
//$('#MiniZoomBox > img[id!="TraversalZoomImage10x"]').remove();
$('#MiniZoomBox').removeClass('minitraversalzoom-view');//.append('<img data-minitraversalzoom="' + minitraversalZoomSource + '" src="' + minitraversalSource + '" class="minitraversalzoom">');
//$('#MiniZoomBox').empty().removeClass('minitraversalzoom-view').append('<img data-minitraversalzoom="' + minitraversalZoomSource + '" src="' + minitraversalSource + '" class="minitraversalzoom">');
//$('#RadialBox').removeClass('minitraversalzoom-view').prepend($original.prop('outerHTML'));
return;
}
if(posX-(cursorSize[0]/2) < minitraversalOffset.left){
posX = minitraversalOffset.left+(cursorSize[0]/2);
}else if(posX+(cursorSize[0]/2) > minitraversalOffset.left+minitraversalImageWidth){
posX = (minitraversalOffset.left+minitraversalImageWidth)-(cursorSize[0]/2);
}
if(posY-(cursorSize[1]/2) < minitraversalOffset.top){
posY = minitraversalOffset.top+(cursorSize[1]/2);
}else if(posY+(cursorSize[1]/2) > minitraversalOffset.top+minitraversalImageHeight){
posY = (minitraversalOffset.top+minitraversalImageHeight)-(cursorSize[1]/2);
}
$(minitraversalzoomCursor.selector).css({'top':posY-(cursorSize[1]/2),'left':posX-(cursorSize[0]/2)});
$(minitraversalzoomView.selector).children('img').css({'top':((minitraversalOffset.top-posY)+(cursorSize[1]/2))*minitraversalsettings.magnification,'left':((minitraversalOffset.left-posX)+(cursorSize[0]/2))*minitraversalsettings.magnification});
/*
$(minitraversalzoomCursor.selector).mouseleave(function(){
$(this).remove();
});*/
}
};
$.fn.minitraversalZoom = function(method){
if(minitraversalMethods[method]){
return minitraversalMethods[method].apply( this, Array.prototype.slice.call(arguments,1));
}else if( typeof method === 'object' || ! method ) {
return minitraversalMethods.init.apply(this,arguments);
}else{
$.error(method);
}
}
$(document).ready(function(){
$('[data-minitraversalzoom]').minitraversalZoom();
});
})(jQuery);
HTML:
<div class="ZoomWindow" id="MiniZoomBox"><img class="minitraversalzoom" data-minitraversalzoom="http://placekitten.com/234/351" src="http://placekitten.com/234/351"/></div>
<div class=""></div>
CSS:
.ZoomWindowContainer{
display: inline-block;
position: relative;
vertical-align: top;
}
.ZoomWindow{
/* display: inline-block;
*/ height: 351px;
width: 234px;
margin-top: 4px;
border: 1px solid #a3b7c7;
}
#MiniZoomBox > img.miniradialzoom, #MiniZoomBox > img.minitraversalzoom, #MiniZoomBox > img.minitangentialzoom{
height: 100%;
}
#MiniZoomBox{
background-color: #0072bd;
/*background: url("/css/styling/magnifier_background-gradient-right.png") repeat-y scroll 0% 0% transparent;*/
/* background: url('/css/styling/10x.png') #0072bd;
*/ background-size: 100%;
overflow: hidden;
}
Could somebody help me to tweek it, in order to make it work?
Update:
I implemented the jQuery.event.move plugin to get new options like movestart, move, etc… and with it, I could get my plugin to work correctly on touchscreens, however, scrolling does not work at all on the site now. So i solved one problem and got another one. Does anyone know, to fix either one of them?
Update Jan. 1st 2016:
I continued programming and this is still the last problem I am facing. Any help is welcomed here ;)

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.