I would rotate an object on FabricJS canvas, but when I rotate, its position changed. And I can't use center origin, just left/top, beacuse I save coordinates to database reference by left/top position.
Can you help me? Any idea?
Here is the example.
Thanks
var canvas = window._canvas = new fabric.Canvas('c');
canvas.add(new fabric.Triangle({
width: 100,
height: 100,
left: 0,
top: 0,
angle: 0,
fill: '#00AC6B'
}));
function rotateObject(angleOffset) {
var obj = canvas.getActiveObject();
if (!obj) return;
var angle = obj.getAngle() + angleOffset;
angle = angle > 360 ? 90 : angle < 0 ? 270 : angle;
obj.setAngle(angle).setCoords();
canvas.renderAll();
document.getElementById('log').innerHTML += 'Left: ' + obj.left + ', top: ' + obj.top + '<br>';
}
fabric.util.addListener(document.getElementById('rotate-left'), 'click', function () {
rotateObject(-90);
});
fabric.util.addListener(document.getElementById('rotate-right'), 'click', function () {
rotateObject(90);
});
canvas {
border: 1px solid #999;
}
.log {
height: 220px;
overflow: auto;
border: 1px solid #999;
padding: 5px;
margin-top: 10px;
}
<script src="https://rawgit.com/kangax/fabric.js/1.x/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<div>
<button id="rotate-left">Rotate left</button>
<button id="rotate-right">Rotate right</button>
</div>
<div id="log" class="log">
</div>
Related
my problem is that i have buttons : "view" button that enable OrbitControls , "move" button that disable OrbitControls so i can use DragControls, "cube" button that add a cube (or many cubes) to the scene and everything works fine, but when i added a "remove" button so i can remove the cube, it didnt work it says that the cube is not defined. So what should i do ? `
//variables :
var objects = [];
//scene
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
//camera
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//adding light
scene.add( new THREE.AmbientLight( 0x0f0f0f ) );
var light = new THREE.SpotLight( 0xffffff, 1 );
light.position.set( 0, 500, 2000 );
scene.add(light);
//controls
const orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
const dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
//fix the window resize problem
window.addEventListener('resize', function(){
renderer.setSize(window.innerWidth,window.innerHeight) ;
camera.aspect = window.innerWidth / window.innerHeight ;
camera.updateProjectionMatrix();
}) ;
//animate
function animate() {
requestAnimationFrame( animate );
renderer.render(scene, camera);
};
//cloning
function createCube () {
var geometry = new THREE.BoxGeometry( 120, 120, 120 );
var cube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0x00004B } ) );
scene.add( cube );
objects.push( cube );
cube.position.x = 0;
cube.position.y = -30;
}
function createRockCube() {
var texture = new THREE.TextureLoader().load( 'rock.jpg' );
var rock_geometry = new THREE.BoxGeometry( 120, 120, 120 );
var rock_material = new THREE.MeshBasicMaterial( {map: texture} );
var rock_cube = new THREE.Mesh( rock_geometry, rock_material );
scene.add( rock_cube );
objects.push( rock_cube );
rock_cube.position.x = -200;
rock_cube.position.y = -30;
}
function createRobot() {
var objLoader = new THREE.OBJLoader();
objLoader.setPath('/examples/3d-obj-loader/assets/') ;
objLoader.load('r2-d2.obj', function (object) {
object.position.x = 500 ;
object.position.y = -100 ;
object.traverse( ( o )=> {
if ( o.isMesh ) objects.push( o );
} );
scene.add(object);
}) ;
}
function createRobot2() {
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/examples/3d-obj-loader/assets/') ;
mtlLoader.load('r2-d2.mtl', (materials)=> {
materials.preload();
var objLoader2 = new THREE.OBJLoader();
objLoader2.setMaterials(materials);
objLoader2.setPath('/examples/3d-obj-loader/assets/') ;
objLoader2.load('r2-d2.obj', (object2) =>{
object2.position.x = 300 ;
object2.position.y = -100 ;
object2.traverse( ( o ) => {
if ( o.isMesh ) objects.push( o );
} );
scene.add(object2);
});
})
}
function disableControl(){
orbitControls.enabled = false;
}
function enableControl(){
orbitControls.enabled = true;
}
function removeCube () {
cube.geometry.dispose();
cube.material.dispose();
scene.remove(cube);
}
animate();
body {
margin: 0px;
background-color: rgb(240, 240, 240);
}
canvas {
width: 100%;
height: 100vh ;
position: absolute;
}
/* objects buttons */
#btn-cube {
background-color: rgb(0, 0, 75);
position: absolute;
left: 70px;
height: 50px;
width: 100px;
cursor: pointer;
}
#rock-btn img {
position: absolute;
top: 75px;
left: 70px;
height: 50px;
width: 100px;
cursor: pointer;
}
#robot-btn {
position: absolute;
left: 70px;
height: 50px;
width: 100px;
cursor: pointer;
}
#robot2-btn {
position: absolute;
top: 55%;
left: 70px;
height: 50px;
width: 100px;
cursor: pointer;
}
#move-btn {
position: absolute;
top: 90%;
left: 55%;
height: 50px;
width: 100px;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
font-size: 20px;
font-family: cursive;
}
#view-btn {
position: absolute;
top: 90%;
left: 45%;
height: 50px;
width: 100px;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
font-size: 20px;
font-family: cursive;
}
/*menu*/
nav {
width: 250px;
position: absolute;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
border-radius: 10px;
box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.5);
transition: 0.3s ease;
}
nav ul {
position: relative;
top: 50px;
list-style-type: none;
}
nav ul li a {
display: flex;
align-items: center;
font-family: cursive;
font-size: 20px;
text-decoration: none;
text-transform: capitalize;
color:black;
padding: 10px 30px;
height: 50px;
transition: 0.5s ease;
}
nav ul li a:hover {
cursor: pointer;
color: #fff;
}
nav ul .cubes {
position: absolute;
left: 250px;
width: 200px;
top : 0;
display: none;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.1);
}
nav ul .robots {
position: absolute;
left: 250px;
width: 200px;
top : 80;
display: none;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
background: rgba(0, 0, 0, 0.1);
}
nav ul span {
position: absolute;
right: 20px;
font-size: 20px;
}
nav ul .dropdown:hover ul{
display: initial;
}
nav ul .dropdown2:hover ul{
display: initial;
}
#open-btn {
display: none;
position: absolute;
top: 12px;
cursor: pointer;
font-size: 30px;
}
.close-btn {
position: absolute;
top: 10px;
right: 5px;
cursor: pointer;
font-size: 36px;
color: rgb(66, 64, 40);
}
#remove-btn {
position: absolute;
top: 90%;
left: 30%;
height: 50px;
width: 100px;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
font-size: 20px;
font-family: cursive;
}
<html>
<head>
<title>Kitchen Planner Ama Mn Jumia </title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<script src="./three.min.js"></script>
<script src="./DragControls.js"></script>
<script src="./OrbitControls.js"></script>
<script src="./OBJLoader.js"></script>
<script src="./MTLLoader.js"></script>
<script src="./app.js"></script>
<script src="./menu.js"></script>
<nav id="menu" >
<div id="open-btn" onclick="openFunction()"> ☰ </div>
×
<ul>
<li id="dropdown" class="dropdown">Cubes <span>›</span>
<ul class="cubes">
<li><button id="btn-cube" onclick="createCube()"></button>
<li><button id="rock-btn" onclick="createRockCube()" ><img src="./rock.jpg"></button>
</ul>
</li>
<li id="dropdown2" class="dropdown2">Robots <span>›</span>
<ul class="robots">
<li><button id="robot-btn" onclick="createRobot()"> Robot </button>
<li><button id="robot2-btn" onclick="createRobot2()"> Robot 2 </button>
</ul>
</li>
</ul>
</nav>
<button id="move-btn" onclick="disableControl()">move</button>
<button id="view-btn" onclick="enableControl()"> view </button>
<button id="remove-btn" onclick="removeCube()"> remove </button>
</body>
</html>
`
You have to declare your cube variable outside of createCube(). It's then in a scope that can be accessed by removeCube().
I have problem with how to re-presentation of node in SVG with "letter-spacing" in SVG document to fabric.TextBox.
In file SVG text node is:
<text transform="matrix(1 0 0 1 51.5211 22.2889)" style="fill:#3C2415; font-size:11px; letter-spacing:3;">MINH TUẤN</text>
And my fabric.TextBox is:
var textbox_0_1 = new fabric.Textbox("MINH TUẤN", {
width: 200,
fontSize: 11,
fill: "#3C2415",
editable: true,
textAlign: "center",
charSpacing: 3,
});
Here is display on SVG & FabricJS:
How to find correct charSpacing which is respectively with letter-spacing attribute in SVG's Text node ?
Notes:
In fabric.TextBox document write:
charSpacing :Number
additional space between characters expressed in thousands of em unit
And in document for SVG write:
(if no unit identifier is provided) values in user space — for example, "15"
And Here is my code:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var textbox_0_1 = new fabric.Textbox("MINH TUẤN", {
top: 20,
left: 20,
width: 200,
fontSize: 11,
fill: "#000000",
editable: true,
textAlign: "center",
charSpacing: 3,
});
canvas.add(textbox_0_1);
setObjectCoords();
canvas.renderAll();
function setObjectCoords() {
canvas.forEachObject(function(object) {
object.setCoords();
});
}
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Thank you,
You need to parse from pixel to em.
DEMO
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
width: 300,
height: 100
});
var letterSpacing = 5, fontSize = 30;
var textbox = new fabric.Text("MINH TUẤN", {
top: 20,
fontSize: fontSize,
fill: "#000000",
fontFamily : "Verdana"
});
canvas.add(textbox);
var parsedSpacing = fabric.util.parseUnit(letterSpacing, fontSize) / fontSize * 1000;
textbox.set({charSpacing : parsedSpacing});
canvas.requestRenderAll();
console.log(parsedSpacing)
canvas{
border:1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<svg width="300" height="100" viewBox="0 0 300 100">
<text font-size="30" letter-spacing="5" font-family="Verdana" y="40">MINH TUẤN</text>
</svg>
<canvas id="editorCanvas"></canvas>
I want to display an path in Fabric.JS, in svg file:
<g>
<path style="fill:none;stroke:#000000;stroke-miterlimit:10;"
d="M221.58-0.55 c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72"/>
</g>
And code in my Fabricjs
var Path_0_1 = new fabric.Path('M221.58-0.55 c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72', {
fill: 'none',
stroke: '#000000',
strokeMiterLimit: 10,
opacity: 1,
});
But result is not same:
Expected:
Path in FabricJS display same as in SVG file.
Here is my code:
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var Path_0_1 = new fabric.Path('M221.58-0.55 c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72', {
// fill : 'none',
stroke: '#000000',
strokeMiterLimit: 10,
opacity: 1,
});
canvas.add(Path_0_1);
canvas.moveTo(Path_0_1, 1);
setObjectCoords();
canvas.renderAll();
function setObjectCoords() {
canvas.forEachObject(function(object) {
object.setCoords();
});
}
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
And here is my svg file:
https://svgur.com/s/Bw6
Set fill value '' || null || 'transparent', so on ctx.fill() it wont fill anything to the object.
DEMO
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
var Path_0_1 = new fabric.Path('M221.58-0.55c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72', {
fill : null,
stroke: '#000000',
});
canvas.add(Path_0_1);
#canvasContainer {
width: 100%;
height: 100vh;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
For example I have svg container with 800px width and 600px height.
I wand to add a tick every 40px, so it will be 20 ticks on x-coordinate (with numbers from 0 to 20) and 15 ticks on y-coordinate (with numbers from 0 to 15).
here is an image
How can I do it? I use d3.js v5
There is my code (with zooming and dragging):
<!DOCTYPE html>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
display: block;
}
.box, .reset, .x, .y, .board {
display: block;
}
.box {
position: relative;
width: 100%;
height: 100%;
}
.reset {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border-right: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
background-color: #FCFCFC;
z-index: 100;
}
.x {
position: absolute;
left: 20px;
top: 0;
width: calc(100% - 20px);
height: 20px;
background-color: #FCFCFC;
}
.y {
position: absolute;
left: 0;
top: 20px;
width: 20px;
height: calc(100% - 20px);
background-color: #FCFCFC;
}
.board {
position: absolute;
left: 0;
top: 0;
width: calc(100% - 20px);
height: calc(100% - 20px);
}
#board {
padding-left: 20px;
padding-top: 20px;
}
body {
font: 10px sans-serif;
shape-rendering: crispEdges;
background-color: #E5E5E5;
}
path.domain {
stroke: none;
}
g.tick line {
stroke: #D3D3D3;
stroke-width: 2;
}
g.tick text {
fill: #C4C4C4;
}
</style>
<body>
<div class="box">
<div class="reset"></div>
<div class="x"></div>
<div class="y"></div>
<div class="board"></div>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
function isInteger(num) {
return (num ^ 0) === num;
}
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var svg = d3.select(".board").append("svg")
.attr("id", "board")
.attr("width", width - 20)
.attr("height", height - 20)
// .append("g");
var zoom = d3.zoom()
// .scaleExtent([1, 32])
.on("zoom", zoomed);
svg.call(zoom);
x_scale = d3.scaleLinear().domain([0, 20]).range([0, width]);
y_scale = d3.scaleLinear().domain([0, 20]).range([0, height]);
var x_axis = d3.axisTop(x_scale)
.ticks(?) //I dont know what do I have to write
.tickFormat(function(d, i) {
if (isInteger(d)) {
return d;
}
})
.tickSize(5)
var x_axis_group = svg.append("g")
.attr("transform", "translate(20, 0)")
.call(x_axis);
var y_axis = d3.axisLeft(y_scale)
.ticks(?) /I dont know what do I have to write
.tickFormat(function(d, i) {
if (isInteger(d)) {
return d;
}
})
.tickSize(5);
var y_axis_group = svg.append("g")
.attr("transform", "translate(0, 20)")
.call(y_axis);
function zoomed() {
var new_x_scale = d3.event.transform.rescaleX(x_scale);
var new_y_scale = d3.event.transform.rescaleY(y_scale);
x_axis_group.call(x_axis.scale(new_x_scale));
y_axis_group.call(y_axis.scale(new_y_scale));
}
</script>
I'm trying to create a parallax effect whereby an absolutely positioned child element should move at a rate slower than it's parent on scroll.
The child will always be 130% height of the parent but the parent can be any height:
HTML:
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window">
<div class="parallax-image image-2"></div>
<div class="parallax-content">Hello World</div>
</div>
CSS:
.parallax-window {
min-height: 300px;
position: relative;
overflow: hidden;
}
.parallax-window.lg {
min-height: 600px;
}
.parallax-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.image-1 {
background-image: url(https://i.ytimg.com/vi/TbC-vUPMR7k/maxresdefault.jpg);
}
.image-2 {
background-image: url(https://i.ytimg.com/vi/xi5-YrAEChc/maxresdefault.jpg);
}
I have a formula to move the image but my maths is clearly way off:
var win = $(window),
win_h = win.height(),
parallaxers = $('.parallax-window');
function scroll_events() {
var win_top = win.scrollTop(),
win_btm = win_top + win_h;
parallaxers.each(function() {
var cont = $(this),
cont_top = cont.offset().top,
cont_h = cont.height(),
cont_btm = cont_top + cont_h,
para = cont.find('.parallax-image'),
para_h = Math.round(cont_h * 1.3);
if (cont_btm > win_top && cont_top <= win_btm) {
var diff = (win_h - cont_h) / (win_h - para_h),
value = -Math.round((win_top * diff));
// para.css('transform', 'translate3d(0,' + value*-1 + 'px, 0)');
para.css('top', value + 'px');
}
});
}
The images move but not at the correct rate.
The image should be in line with the top of the parent when the element first comes into the viewport. Then after scrolling, the bottom of the image should be in line with the bottom of the parent when it reaches the top of the viewport.
Any help would be massively appreciated!
FIDDLE (https://jsfiddle.net/8dwLwgy7/1/)
I figured this out.
For anyone stumbling on this in the future - the trick was to replace the window scrolled value with the remainder of the window scrolled amount minus the element's offset top, minus the height of the element.
Then calculate the speed by dividing the difference between the container height and the element height with largest of either the window and the container:
// Wrong:
// value = -Math.round((win_top * diff));
// Right:
var diff = elem_h - cont_h,
max = Math.max(cont_h, win_h),
speed = diff / max,
cont_scrolled = win_top - cont_top - cont_h,
value = Math.round(cont_scrolled * speed);
para.css('top', value + 'px');
Full working code:
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
(function($) {
var win = $(window),
win_h = win.height();
parallaxers = $('.parallax-window'),
parallax_objs = [],
scroll_busy = false;
function init_parallax() {
win_h = win.height();
parallax_objs = [];
parallaxers.each(function() {
var cont = $(this),
elem = cont.find('.parallax-image'),
cont_top = cont.offset().top,
cont_h = cont.height(),
elem_h = Math.round(cont_h * 1.3),
diff = elem_h - cont_h,
max = Math.max(cont_h, win_h),
speed = diff / max,
parallaxer = {
cont_top: cont_top,
cont_h: cont_h,
elem: elem,
speed: speed
};
parallax_objs.push(parallaxer);
});
}
function on_scroll() {
if (!scroll_busy) {
scroll_busy = true;
window.requestAnimationFrame(init_scroll);
}
}
function init_scroll() {
scroll_events()
scroll_busy = false;
}
function scroll_events() {
var win_top = win.scrollTop(),
win_btm = win_top + win_h;
$.each(parallax_objs, function(i, para) {
cont_btm = para.cont_top + para.cont_h;
if( cont_btm > win_top && para.cont_top <= win_btm ) {
var cont_scrolled = win_top - para.cont_top - para.cont_h,
value = Math.round(cont_scrolled * para.speed);
para.elem.css('top', value + 'px');
}
});
}
$(document).ready(function() {
init_parallax();
win.resize(init_parallax);
scroll_events();
win.scroll(on_scroll);
});
})(jQuery);
.parallax-window {
min-height: 300px;
position: relative;
overflow: hidden;
}
.parallax-window.lg {
min-height: 600px;
}
.parallax-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.image-1 {
background-image: url(https://i.ytimg.com/vi/TbC-vUPMR7k/maxresdefault.jpg);
}
.image-2 {
background-image: url(https://i.ytimg.com/vi/xi5-YrAEChc/maxresdefault.jpg);
}
.parallax-content {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
font-family: arial, sans-serif;
font-size: 60px;
color: #fff;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window">
<div class="parallax-image image-2"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window">
<div class="parallax-image image-2"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
Updated Fiddle: https://jsfiddle.net/8dwLwgy7/2/