I saw this cool scrolling effect online...
Where the image blends with the next image when scrolling through sections. I've been trying to reproduce it, but I can't seem to figure it out?
How can I create this effect on the web?
Here is the link to where I saw the effect... http://readingbuddysoftware.com/how-it-works/
I've tried using position: fixed on the screenshots with the z-index of the section higher then the image, but the last screenshot is always on the top.
Any ideas?
Update: For various reasons (including placement, using slants...), I can't use the background-image css solution. I need a solution for using the <img> element.
This can be done using background-attchement:fixed and two similar images.
Here is a simple example:
body {
min-height:200vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 20px 20px no-repeat;
background-attachment:fixed;
}
.box {
margin-top:220px;
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 20px 20px no-repeat,
grey;
background-attachment:fixed;
}
<div class="box">
</div>
That you can easily scale with many images:
body {
min-height:250vh;
margin:0;
background:url(https://picsum.photos/id/1069/150/150?grayscale) 50px 50px/auto no-repeat;
background-attachment:fixed;
}
.box {
height:200px;
background:url(https://picsum.photos/id/1069/150/150) 50px 50px/auto no-repeat,
grey;
background-attachment:fixed;
}
.box:first-child {
margin-top:200px;
}
<div class="box">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/11/150/150);background-color:yellow">
</div>
<div class="box" style="background-image:url(https://picsum.photos/id/106/150/150);background-color:pink">
</div>
You can also consider the use of img and position:fixed but you will need some trick to hide the overflow using clip-path
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
clip-path: inset(0);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
Or using mask
body {
min-height: 250vh;
margin: 0;
padding-top: 100px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
-webkit-mask:linear-gradient(#fff,#fff);
mask:linear-gradient(#fff,#fff);
}
<div class="box">
<img src="https://picsum.photos/id/1074/200/120?grayscale">
</div>
<div class="box" style="background-color:red;">
<img src="https://picsum.photos/id/1074/200/120">
</div>
<div class="box" style="background-color:yellow;">
<img src="https://picsum.photos/id/1024/200/120?grayscale">
</div>
<div class="box" style="background-color:pink;">
<img src="https://picsum.photos/id/1024/200/120">
</div>
For better support, here is a similar idea with some JS to avoid the use of clip-path or mask
I will update the position of the image using a CSS variables but you can easily do without:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 150vh;
margin: 0;
}
img {
position: fixed;
top: 20px;
left: 20px;
}
.box {
margin-top: 220px;
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
.box img {
top: calc(-220px + 20px + var(--scroll-var));
/* margin of box + top of the other image + scroll*/
position: absolute;
}
<img src="https://picsum.photos/id/1069/150/150?grayscale">
<div class="box">
<img src="https://picsum.photos/id/1069/150/150">
</div>
With many images:
window.onscroll = function() {
var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
--scroll-var: 0px;
}
body {
min-height: 250vh;
margin: 0;
padding-top:200px;
}
img {
position: fixed;
top: 50px;
left: 50px;
}
.box {
height: 200px;
background: grey;
position: relative;
overflow: hidden;
}
img.f1 {
top: calc(-200px + 50px + var(--scroll-var));
position: absolute;
}
img.f2 {
top: calc(-400px + 50px + var(--scroll-var));
position: absolute;
}
img.f3 {
top: calc(-600px + 50px + var(--scroll-var));
position: absolute;
}
<img src="https://picsum.photos/id/1069/100/100?grayscale">
<div class="box">
<img class="f1" src="https://picsum.photos/id/1069/100/100">
</div>
<div class="box" style="background-color:yellow;">
<img class="f2" src="https://picsum.photos/id/107/100/100">
</div>
<div class="box" style="background-color:pink;">
<img class="f3" src="https://picsum.photos/id/1072/100/100">
</div>
I need help getting anotation values from Annotorius Library. I have a ton of code (too much to post) for annotating images in a slider. Now I need to grab the annotation data (position, size and comment) to post to my server (php and mySQL).
Could anyone post some sample code that I can learn from?
If I'm not misunderstanding. the data you looking for is:
- position: x, y
- size: width, height
- comment: the annotation text
try this:
var datapost = new Array();
//loop all annotation
anno.getAnnotations().forEach(function(element){
var details = '==============================================================\n';
details += '\n image : ' + element.src;
details += '\n comment : ' + element.text;
var geometry = element.shapes[0].geometry;
var imgObj = new Image();
imgObj.src = element.src;
//get position and size by pixel
var position_x = Math.round(imgObj.width * geometry.x);
var position_y = Math.round(imgObj.height * geometry.y);
var size_width = Math.round(imgObj.width * geometry.width);
var size_height = Math.round(imgObj.height * geometry.height);
details += '\n position_x : ' + position_x;
details += '\n position_y : ' + position_y;
details += '\n width : ' + size_width;
details += '\n height : ' + size_height;
console.log(details);
//add data to post
datapost.push({
'image' : element.src,
'position_x' : position_x,
'position_y' : position_y,
'width' : size_width,
'height' : size_height,
'comment' : element.text
});
});
//post data to the server here
console.log(datapost);
After a lot of R&D , I can not get my answer . Now i have use jssor slider of jquery and https://annotorious.github.io/index.html library. Complete code is shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link type="text/css" rel="stylesheet" href="http://annotorious.github.com/latest/annotorious.css" />
<script type="text/javascript" src="js/annotorious.min.js"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jssor.slider-21.1.6.mini.js" type="text/javascript"></script>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:helvetica, arial, verdana, sans-serif">
<style>
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05l.jssora05ldn (mousedown)
.jssora05r.jssora05rdn (mousedown)
.jssora05l.jssora05lds (disabled)
.jssora05r.jssora05rds (disabled)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url('img/a17.png') no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
.jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; }
.jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; }
/* jssor slider thumbnail navigator skin 01 css *//*.jssort01-99-66 .p (normal).jssort01-99-66 .p:hover (normal mouseover).jssort01-99-66 .p.pav (active).jssort01-99-66 .p.pdn (mousedown)*/.jssort01-99-66 .p { position: absolute; top: 0; left: 0; width: 99px; height: 66px;}.jssort01-99-66 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}.jssort01-99-66 .w { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}.jssort01-99-66 .c { position: absolute; top: 0px; left: 0px; width: 95px; height: 62px; border: #000 2px solid; box-sizing: content-box; background: url('img/t01.png') -800px -800px no-repeat; _background: none;}.jssort01-99-66 .pav .c { top: 2px; _top: 0px; left: 2px; _left: 0px; width: 95px; height: 62px; border: #000 0px solid; _border: #fff 2px solid; background-position: 50% 50%;}.jssort01-99-66 .p:hover .c { top: 0px; left: 0px; width: 97px; height: 64px; border: #fff 1px solid; background-position: 50% 50%;}.jssort01-99-66 .p.pdn .c { background-position: 50% 50%; width: 95px; height: 62px; border: #000 2px solid;}* html .jssort01-99-66 .c, * html .jssort01-99-66 .pdn .c, * html .jssort01-99-66 .pav .c { /* ie quirks mode adjust */ width /**/: 99px; height /**/: 66px;}
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 960px; height: 480px; overflow: hidden; visibility: hidden; background-color: #24262e;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 240px; width: 720px; height: 480px; overflow: hidden;">
<div data-p="150.00">
<img data-u="image" src="img/01.jpg" />
<img data-u="thumb" src="img/thumb-01.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/02.jpg" />
<img data-u="thumb" src="img/thumb-02.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/03.jpg" />
<img data-u="thumb" src="img/thumb-03.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/04.jpg" />
<img data-u="thumb" src="img/thumb-04.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/05.jpg" />
<img data-u="thumb" src="img/thumb-05.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/06.jpg" />
<img data-u="thumb" src="img/thumb-06.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/07.jpg" />
<img data-u="thumb" src="img/thumb-07.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/08.jpg" />
<img data-u="thumb" src="img/thumb-08.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/09.jpg" />
<img data-u="thumb" src="img/thumb-09.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/10.jpg" />
<img data-u="thumb" src="img/thumb-10.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/11.jpg" />
<img data-u="thumb" src="img/thumb-11.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/12.jpg" />
<img data-u="thumb" src="img/thumb-12.jpg" />
</div>
<a data-u="any" href="http://www.jssor.com" style="display:none">Image Gallery with Vertical Thumbnail</a>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/13.jpg" />
<img data-u="thumb" src="img/thumb-13.jpg" />
</div>
<div data-p="150.00" style="display: none;">
<img data-u="image" src="img/14.jpg" />
<img data-u="thumb" src="img/thumb-14.jpg" />
</div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort01-99-66" style="position:absolute;left:0px;top:0px;width:240px;height:480px;" data-autocenter="2">
<!-- Thumbnail Item Skin Begin -->
<div data-u="slides" style="cursor: default;" class="mainrelated">
<div data-u="prototype" class="p">
<div class="w">
<div data-u="thumbnailtemplate" class="t"></div>
</div>
<div class="c"></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora05l" style="top:0px;left:248px;width:40px;height:40px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
</div>
<!-- #endregion Jssor Slider End -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
var jssor_1_SlideshowTransitions = [
{$Duration:1200,$Zoom:1,$Easing:{$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad},$Opacity:2},
{$Duration:1000,$Zoom:11,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,$Zoom:1,$Rotate:1,$During:{$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:0.5,$Cols:2,$Zoom:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:4,$Cols:2,$Zoom:11,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,x:-4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:-0.6,$Zoom:1,$Rotate:1,$During:{$Left:[0.2,0.8],$Zoom:[0.2,0.8],$Rotate:[0.2,0.8]},$Easing:{$Left:$Jease$.$Swing,$Zoom:$Jease$.$Swing,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$Swing},$Opacity:2,$Round:{$Rotate:0.5}},
{$Duration:1000,x:4,$Zoom:11,$Rotate:1,$SlideOut:true,$Easing:{$Left:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.8}},
{$Duration:1200,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1000,x:0.5,y:0.3,$Cols:2,$Zoom:1,$Rotate:1,$SlideOut:true,$Assembly:2049,$ChessMode:{$Column:15},$Easing:{$Left:$Jease$.$InExpo,$Top:$Jease$.$InExpo,$Zoom:$Jease$.$InExpo,$Opacity:$Jease$.$Linear,$Rotate:$Jease$.$InExpo},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1200,x:-4,y:2,$Rows:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Row:28},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.7}},
{$Duration:1200,x:1,y:2,$Cols:2,$Zoom:11,$Rotate:1,$Assembly:2049,$ChessMode:{$Column:19},$Easing:{$Left:$Jease$.$InCubic,$Top:$Jease$.$InCubic,$Zoom:$Jease$.$InCubic,$Opacity:$Jease$.$OutQuad,$Rotate:$Jease$.$InCubic},$Opacity:2,$Round:{$Rotate:0.8}}
];
var jssor_1_options = {
$AutoPlay: false,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions,
$TransitionsOrder: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$Rows: 2,
$Cols: 6,
$SpacingX: 14,
$SpacingY: 12,
$Orientation: 2,
$Align: 156
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*you can remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 960);
refSize = Math.max(refSize, 300);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
// $xx= 0;
// setInterval(function(){
// if($xx==0){
$("#jssor_1").find('img').each(function(index){
$(this).attr('id','myyyyid'+index);
$mainid = $(this).attr('id');
anno.makeAnnotatable(document.getElementById($mainid));
});
// }
// }, 2000);
/*responsive code end*/
});
</script>
</body>
</html>
Complete html+jquery script of slider and annotation . You just copy and paste the code and run on browser. May be it will usefull for you.