I have multiple Bezier curves that run from top to bottom and sway a little bit! As can be seen in this CodePen, the curves seem to animate as they are supposed to but are not drawn as I expected them to. If I increase the size of the canvas that seems to stretch the Beziers so that after a certain height it looks fine but I can't understand by the curves are all crumpled up on a small canvas height, as they are in this example.
below is my code:
function milestoneLines() {
//get all canvases from the DOM
const canvas = document.querySelectorAll('canvas');
console.log(canvas);
//loop through array of canvases
canvas.forEach(makeCanvas);
function makeCanvas(canvas, index) {
// get canvas width/height
canvas.width = $(".main").eq(index).width();
canvas.height = $(".main").eq(index).height();
//getting the height of all milestones
let milestoneHeight = $(".main").eq(index)
.find('.info_wrapper');
let totalMilestoneHeight = 0;
milestoneHeight.each(function() {
totalMilestoneHeight += $(this).outerHeight();
});
const c = canvas.getContext('2d');
let milestoneHalfHeight = totalMilestoneHeight / 2;
let milestoneQuarterHeight = totalMilestoneHeight / 4;
let milestoneHalfWidth = canvas.width / 2;
let bezEndY = $('.main').eq(index).offset().top +
$('.main').eq(index).outerHeight();
let bezStartY = $('.main').eq(index)
.find(".dot").eq(0).offset().top;
// Bezier Curve points
let bezStart = {
x: milestoneHalfWidth,
y: bezStartY
};
let bezCp1 = {
x: milestoneHalfWidth - 35,
y: milestoneHalfHeight
};
let bezCp2 = {
x: milestoneHalfWidth,
y: milestoneHalfHeight + milestoneQuarterHeight
};
let bezEnd = {
x: milestoneHalfWidth,
y: bezEndY
};
//Line 1
//dx = xvelocity
let dx1Line1 = .6;
let dx2Line1 = .6;
let bezCp1Line1x = bezCp1.x;
let bezCp2Line1x = bezCp2.x;
//Line 2
//dx = xvelocity
let dx1Line2 = .8;
let dx2Line2 = .8;
let bezCp1Line2x = bezCp1.x;
let bezCp2Line2x = bezCp2.x;
//Line 3
//dx = xvelocity
let dx1Line3 = 1;
let dx2Line3 = 1;
let bezCp1Line3x = bezCp1.x;
let bezCp2Line3x = bezCp2.x;
//Line 4
//dx = xvelocity
let dx1Line4 = .9;
let dx2Line4 = .9;
let bezCp1Line4x = bezCp1.x;
let bezCp2Line4x = bezCp2.x;
function bezCurve() {
c.clearRect(0, 0, canvas.width, canvas.height);
//different start positions for the bezier curves
let bufferX = 120;
let bufferY = 120;
let bufferStartY = 80;
for (var i = 0; i < 4; i++) {
c.beginPath();
if (i == 0) {
c.moveTo(bezStart.x, bezStart.y + bufferStartY);
c.bezierCurveTo(bezCp1Line1x - bufferX, bezCp1.y - bufferY, bezCp2Line1x + bufferX, bezCp2.y - bufferY, bezEnd.x, bezEnd.y);
if (bezCp1Line1x > (bezCp1.x + 280) || bezCp1Line1x < bezCp1.x) {
dx1Line1 = -dx1Line1;
}
if (bezCp2Line1x < (bezCp2.x - 280) || bezCp2Line1x > bezCp2.x) {
dx2Line1 = -dx2Line1;
}
bezCp1Line1x -= dx1Line1;
bezCp2Line1x += dx2Line1;
c.strokeStyle = "red";
}
if (i == 2) {
c.moveTo(bezStart.x, bezStart.y + bufferStartY);
c.bezierCurveTo(bezCp1Line3x + bufferX, bezCp1.y + bufferY, bezCp2Line3x - bufferX, bezCp2.y + bufferY, bezEnd.x, bezEnd.y);
if (bezCp1Line3x < (bezCp1.x - 320) || bezCp1Line3x > bezCp1.x) {
dx1Line3 = -dx1Line3;
}
if (bezCp2Line3x > (bezCp2.x + 320) || bezCp2Line3x < bezCp2.x) {
dx2Line3 = -dx2Line3;
}
bezCp1Line3x -= dx1Line3;
bezCp2Line3x += dx2Line3;
c.strokeStyle = "green";
}
if (i == 1) {
c.moveTo(bezStart.x, bezStart.y + bufferStartY);
c.bezierCurveTo(bezCp1Line2x + bufferX, bezCp1.y + bufferY, bezCp2Line2x - bufferX, bezCp2.y + bufferY, bezEnd.x, bezEnd.y);
if (bezCp1Line2x < (bezCp1.x - 350) || bezCp1Line2x > bezCp1.x) {
dx1Line2 = -dx1Line2;
}
if (bezCp2Line2x > (bezCp2.x + 350) || bezCp2Line2x < bezCp2.x) {
dx2Line2 = -dx2Line2;
}
bezCp1Line2x -= dx1Line2;
bezCp2Line2x += dx2Line2;
c.strokeStyle = "blue";
}
if (i == 3) {
c.moveTo(bezStart.x, bezStart.y + bufferStartY);
c.bezierCurveTo(bezCp1Line4x - bufferX, bezCp1.y - bufferY, bezCp2Line4x + bufferX, bezCp2.y - bufferY, bezEnd.x, bezEnd.y);
if (bezCp1Line4x > (bezCp1.x + 320) || bezCp1Line4x < bezCp1.x) {
dx1Line4 = -dx1Line4;
}
if (bezCp2Line4x < (bezCp2.x - 320) || bezCp2Line4x > bezCp2.x) {
dx2Line4 = -dx2Line4;
}
bezCp1Line4x -= dx1Line4;
bezCp2Line4x += dx2Line4;
c.strokeStyle = "grey";
}
c.lineWidth = 6;
//c.strokeStyle = "#FCE6DF";
c.stroke();
bufferX = bufferX - 30;
bufferY = bufferY - 30;
bufferStartY = bufferStartY - 20;
}
requestAnimationFrame(bezCurve);
}
bezCurve();
}
}
$(document).ready(milestoneLines);
#milestone_canvas {
position: absolute;
}
.main {
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
margin-bottom: 50px;
border: solid 2px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
z-index: 100;
}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
.text {
float: left;
position: absolute;
max-width: 500px;
}
<div class="main">
<canvas id="milestone_canvas"> </canvas>
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="dot "></div>
</div>
</div>
</div>
Related
I am trying to make a slider from div to div but the position of the div is always wrong I don't seem to manage to code it right to fix it in the right position, I have tried floats, inline everything but nothing seems to work. so the parent class is "products" the ensemble class is "product" and each div is "product-1, product-2 etc."
Here is the whole wesite from a to z.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Paritrāṇa Sari collection</title>
<script
src="jquery-3.5.1.min.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!-- <script src="function.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="normalize.css">
<style type="text/css">
* {
margin: 0;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
font-family: sans-serif;
box-sizing: border-box;
}
/*:root {
cursor: url(model.png), auto;
}*/
/*html {zoom: 160%;}*/
body {
background-color: #e4e0dd;
}
.wrapper {
margin: 0;
padding: 0;
display: inline-block;
}
#c {
display: block;
margin: 20px auto 0;
}
#info {
position: absolute;
left: -1px;
top: -1px;
width: auto;
max-width: 420px;
height: auto;
background: #f8f8f8;
border-bottom-right-radius: 10px;
border:1px solid #ccc;
}
#top {
/*background: #fff;*/
width: 100%;
height: auto;
position: relative;
/* border-bottom: 1px solid #eee;*/
}
p {
font-family: Arial, sans-serif;
color: #666;
text-align: justify;
font-size: 16px;
margin: 0px 16px;
}
.center {
text-align: center;
}
#net {
text-align:center;
white-space:nowrap;
font-size:19px;
background:rgba(0,0,0,0.1);
padding:8px 12px;
border-radius:8px;
display:block;
color:#888;
}
.bull {
opacity: 0.3;
margin: 0 6px;
font-size: 14px;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-bottom: 1px solid black;
}
.column {
flex-basis: 100%;
border-right: 1px solid black;
padding-left: 5px;
}
.row_1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.column_1 {
flex-basis: 100%;
}
#media screen and (min-width: 800px) {
.column {
flex: 1;
}
.column_1 {
flex: 1;
}
}
#media screen and (min-width: 800px) {
._25 {
flex: 1.5;
}
._55 {
flex: 7.5;
}
._20 {
flex: 2;
}
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: white;
background: black;}
a:active {
text-decoration: none;
color: white;
background: black;
}
img {
text-align: center;
justify-content: center;
object-position: center;
top: 0;
left: 0;
width: 50%;
height: auto;
z-index: 1000;
}
.signupsubmit {
transform: rotateY(50deg) rotateX(50deg);
-webkit-transform: rotateY(50deg) rotateX(50deg);
transition: 1s;
}
.signupsubmit:hover {
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
/*.active {
zoom: 160%;
}*/
body .cursor {
pointer-events: none;
}
body .cursor__ball {
position: fixed;
top: 0;
left: 0;
mix-blend-mode: difference;
z-index: 1000;
}
body .cursor__ball circle {
fill: #f7f8fa;
}
section {float: left;}
::selection {
background-color: rgba(0, 0, 0, 0.25);
color: white;
}
::-moz-selection {
background-color: rgba(0, 0, 0, 0.25);
color: white;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
a :hover {
z-index: 10000000;
}
.hidden {
/* display: none; */
opacity: 0;
}
/* */
.container {
position: absolute;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
/* width: 200vh;
height: 100vh;*/
/* background-color: aqua;*/
*/
overflow: hidden;
}
.products {
position: relative;
display: inline-block;
/* width: 1000%;
height: 100%;
left: 0%;
/* background-color: blueviolet;*/*/
transition: left .5s ease-in-out;
}
.product {
/* width: 70vh;
height: 100%;*/
float: left;
display: inline-block;
}
.product-1 {
/* background-color: beige;*/
}
.product-2 {
background-color: red;
}
.product-3 {
background-color: slategray;
}
.product-4 {
background-color: burlywood;
}
.buttonLeft, .buttonRight {
height: 100%;
width: 20%;
position: absolute;
background-color: red;
transition: opacity .5s ease-in-out;
top: 50px;
cursor: pointer;
z-index: 1;
}
.buttonLeft:hover, .buttonRight:hover {
opacity: 0.2;
}
.buttonLeft {
left: 0px;
cursor: w-resize;
}
.buttonRight {
right: 0px;
cursor: e-resize;
}
</style>
<script>
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
</script>
</head>
<body>
<!-- cursor -->
<div class="cursor">
<div class="cursor__ball cursor__ball--big">
<svg height="60" width="60">
<circle cx="15" cy="15" r="16" stroke-width="0"></circle>
</svg>
</div>
<!-- small ball cursor -->
<div class="cursor__ball cursor__ball--small">
<svg height="10" width="10">
<circle cx="5" cy="5" r="4" stroke-width="0"></circle>
</svg>
</div>
</div>
<!-- cursor end -->
<!-- navigation -->
<nav>
<div class="row" style="background-color:white;">
<div class="column">
Paritrāṇa Sari collection
</div>
<div class="column">
Concept
</div>
<div class="column">
Process
</div>
</div>
<div class="row" style="background-color:white;">
<div class="column">
Red sari N°1
</div>
<div class="column">
Orange sari N°2
</div>
<div class="column">
Saffron sari N°3
</div>
<div class="column">
Yellow sari N°4
</div>
<div class="column">
Turmeric sari N°5
</div>
<div class="column">
Green sari N°6
</div>
<div class="column">
Blue sari N°7
</div>
<div class="column">
Pink sari N°8
</div>
<div class="column">
Black sari N°9
</div>
<div class="column">
White sariN°10
</div>
<div class="column">
Violet sari N°11
</div>
</div>
</nav>
<!-- navigation end -->
<!-- wrapper slider -->
<section class="container">
<div class="products">
<div class="wrapper product product-1">
<img src="./img.png" style="margin-top: -2000px; position: absolute;" />
<canvas
width="1900"
height="300"
style="margin-top: -2000px; position: absolute;"
></canvas>
<div class="row_1">
<!-- <div style="overflow:auto"> -->
<div class="column _25" style="overflow-y: auto;">
Project photoshoot
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
</div>
<div class="column _55">
<canvas id="c" width="800" height="376"> </canvas>
<div class="row_1">
<div class="column_1">
<div id="top">
<a id="close" href="">Reset tissue —</a>
</div>
</div>
<div class="column_1">
<div>
<p>This project is based on the red celebratory color………</p>
</div>
</div>
<div class="column_1">
<div style="background-color:red;height: 50px;width: 50px;"></div>
</div>
</div>
<div
class="column _20 signupsubmit"
style="border-top: 1px solid black;border-right: 0px;"
>
Red is a celebratory color. It commemorates a couple’s union. It
symbolizes love, sensuality, and passion. That’s why it features
prominently in auspicious occasions, such as weddings, festivals, and
births. As red also signifies chastity, it is the color of choice for
brides. After the wedding ceremony, the bride adopts a red spot on the
forehead called “bindi,” which cements her marital status. When she
dies, her family wraps her in red fabric for cremation. As red also
depicts dominance, it empowers the saree wearer and draws attention
toward her. It’s no surprise that extroverts and A-type personalities
prefer red. Pairing a red saree with a gold top amplifies the look. To
tone it down, use a silver blouse instead. Accessorize with silver or
gold jewelry. Red is associated with Durga, a Hindu goddess with a red
tongue, red eyes, and a blazing image. That’s why devotees use it
extensively in prayer rituals. Worshippers throw red powder on
deities’ statues during prayer ceremonies and phallic symbols because
red is the color of Kshatriya, the warrior caste. Designers dress
charitable, brave, and protective deities in red. Red also symbolizes
fertility and prosperity because it is the color of the clay that
produces spices and harvests, which in turn, improve lives.
</div>
</div>
</div>
</div>
<div class="wrapper product product-2" style="float: left;display: inline;clear: both;top: 0;position: absolute;">
<img src="./img2.png" style="margin-top: -2000px; position: absolute;" />
<canvas
width="1900"
height="300"
style="margin-top: -2000px; position: absolute;"
></canvas>
<div class="row_1">
<!-- <div style="overflow:auto"> -->
<div class="column _25" style="overflow-y: auto;">
Project photoshoot
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div id="img1" class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
<div class="signupsubmit" style="width:100%;">
<img src="model.png" />
</div>
</div>
<div class="column _55">
<canvas id="c" width="800" height="376"> </canvas>
<div class="row_1">
<div class="column_1">
<div id="top">
<a id="close" href="">Reset tissue —</a>
</div>
</div>
<div class="column_1">
<div>
<p>This project is based on the red celebratory color………</p>
</div>
</div>
<div class="column_1">
<div style="background-color:red;height: 50px;width: 50px;"></div>
</div>
</div>
<div
class="column _20 signupsubmit"
style="border-top: 1px solid black;border-right: 0px;"
>
Orange attracts attention and energy like the color red, except it’s more sedate. It signifies freshness and brightness. Not all skin tones can carry this color, but for those whose complexions can pull it off in their clothing, it helps put them in a sunny disposition.
According to CNN’s Colorscope report, a series exploring color perception across cultures, many Eastern religions consider orange a sacred color. In Hinduism, orange represents fire and virtuosity. That’s why their monks wear orange robes. Buddhist ones too.
</div>
</div>
</div>
</div>
</div>
<div class="hidden buttonLeft"></div>
<div class="hidden buttonRight"></div>
</section>
<!-- wrapper slider end -->
<!-- footer -->
<footer
style="position: fixed;bottom: 0;width: 100%;background-color: white;border-top:1px solid black;"
>
<div class="row">
<div class="column">©Copyright Angelo Barbattini</div>
<div class="column">ECAL 2022</div>
</div>
</footer>
<!-- footer end -->
<script type="text/javascript">
window.onload = function() {
}
var offsetProducts = 0;
var numberProducts = 2; //nombre de project -1, car on commence à compter à partir de 0
$(document).ready(function() {
console.log("ready!");
// $(".buttonLeft").on("click", function() {
// console.log(offsetProducts);
// if (offsetProducts > numberProducts * -100) offsetProducts = offsetProducts - 100;
// $(".products").css("left", offsetProducts + "%");
// });
// $(".buttonRight").on("click", function() {
// console.log("right Click");
// if (offsetProducts < 0) offsetProducts = offsetProducts + 100;
// $(".products").css("left", offsetProducts + "%");
// });
$(".buttonLeft").on("click", function() {
console.log(offsetProducts);
if (offsetProducts < 0) offsetProducts = offsetProducts + 100;
$(".products").css("left", offsetProducts + "%");
});
$(".buttonRight").on("click", function() {
console.log("right Click");
if (offsetProducts > numberProducts * -100) offsetProducts = offsetProducts - 100;
$(".products").css("left", offsetProducts + "%");
});
});
</script>
<script type="text/javascript">
const mycanvas = document.querySelector('canvas');
const mycontext = mycanvas.getContext('2d');
// settings
var physics_accuracy = 20,
mouse_influence = 10,
mouse_cut = 6,
gravity = 1200,
cloth_height = 40,
cloth_width = 120,
start_y = 10,
spacing = 7,
tear_distance = 60;
window.requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
var canvas,
ctx,
cloth,
boundsx,
boundsy,
mouse = {
down: false,
button: 1,
x: 0,
y: 0,
px: 0,
py: 0
};
window.onload = function() {
// ADDED TO BRING IN THE IMAGE
mycontext.clearRect(0, 0, mycanvas.width, mycanvas.height);
mycontext.drawImage(document.querySelector('img'), 0, 0, 1180, 376);
canvas = document.getElementById('c');
ctx = canvas.getContext('2d');
canvas.width = canvas.clientWidth;
canvas.height = 376;
canvas.onmousedown = function(e) {
mouse.button = e.which;
mouse.px = mouse.x;
mouse.py = mouse.y;
var rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left,
mouse.y = e.clientY - rect.top,
mouse.down = true;
e.preventDefault();
};
canvas.onmouseup = function(e) {
mouse.down = false;
e.preventDefault();
};
canvas.onmousemove = function(e) {
mouse.px = mouse.x;
mouse.py = mouse.y;
var rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left,
mouse.y = e.clientY - rect.top,
e.preventDefault();
};
canvas.oncontextmenu = function(e) {
e.preventDefault();
};
boundsx = canvas.width - 1;
boundsy = canvas.height - 1;
ctx.strokeStyle = 'rgba(222,222,222,0.6)';
ctx.strokeStyle = 'magenta';
cloth = new Cloth();
update();
};
var Point = function(x, y) {
this.x = x;
this.y = y;
this.px = x;
this.py = y;
this.vx = 0;
this.vy = 0;
this.pin_x = null;
this.pin_y = null;
this.constraints = [];
//added - remember where this point was originally so we can get the right bit of the img
this.origx = x;
this.origy = y;
};
Point.prototype.update = function(delta) {
if (mouse.down) {
var diff_x = this.x - mouse.x,
diff_y = this.y - mouse.y,
dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);
if (mouse.button == 1) {
if (dist < mouse_influence) {
this.px = this.x - (mouse.x - mouse.px) * 1.8;
this.py = this.y - (mouse.y - mouse.py) * 1.8;
}
} else if (dist < mouse_cut) this.constraints = [];
}
this.add_force(0, gravity);
delta *= delta;
nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);
this.px = this.x;
this.py = this.y;
this.x = nx;
this.y = ny;
this.vy = this.vx = 0
};
Point.prototype.draw = function() {
if (this.constraints.length <= 0) return;
var i = this.constraints.length;
while (i--) this.constraints[i].draw();
};
Point.prototype.resolve_constraints = function() {
if (this.pin_x != null && this.pin_y != null) {
this.x = this.pin_x;
this.y = this.pin_y;
return;
}
var i = this.constraints.length;
while (i--) this.constraints[i].resolve();
this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
};
Point.prototype.attach = function(point) {
this.constraints.push(
new Constraint(this, point)
);
};
Point.prototype.remove_constraint = function(lnk) {
var i = this.constraints.length;
while (i--)
if (this.constraints[i] == lnk) this.constraints.splice(i, 1);
};
Point.prototype.add_force = function(x, y) {
this.vx += x;
this.vy += y;
};
Point.prototype.pin = function(pinx, piny) {
this.pin_x = pinx;
this.pin_y = piny;
};
var Constraint = function(p1, p2) {
this.p1 = p1;
this.p2 = p2;
this.length = spacing;
};
Constraint.prototype.resolve = function() {
var diff_x = this.p1.x - this.p2.x,
diff_y = this.p1.y - this.p2.y,
dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
diff = (this.length - dist) / dist;
if (dist > tear_distance) this.p1.remove_constraint(this);
var px = diff_x * diff * 0.7;
var py = diff_y * diff * 0.5;
this.p1.x += px;
this.p1.y += py;
this.p2.x -= px;
this.p2.y -= py;
};
let num = 0;
Constraint.prototype.draw = function() {
ctx.drawImage(mycanvas, this.p1.origx, this.p1.origy, spacing, spacing, this.p1.x, this.p1.y, spacing + 1, spacing + 1);
};
var Cloth = function() {
this.points = [];
var start_x = canvas.width / 2 - cloth_width * spacing / 2;
// alert(start_x);
for (var y = 0; y <= cloth_height; y++) {
for (var x = 0; x <= cloth_width; x++) {
var p = new Point(start_x + x * spacing, start_y + y * spacing);
x != 0 && p.attach(this.points[this.points.length - 1]);
y == 0 && p.pin(p.x, p.y);
y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])
this.points.push(p);
}
}
};
Cloth.prototype.update = function() {
var i = physics_accuracy;
while (i--) {
var p = this.points.length;
while (p--) this.points[p].resolve_constraints();
}
i = this.points.length;
while (i--) this.points[i].update(.016);
};
Cloth.prototype.draw = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
var i = cloth.points.length;
while (i--) cloth.points[i].draw();
ctx.stroke();
};
function update() {
cloth.update();
cloth.draw();
requestAnimFrame(update);
}
</script>
<script>
imageZoom("myimage", "myresult");
</script>
<!-- <script type="text/javascript"> document.body.onclick = function () {document.body.style.zoom="150%"}</script>
--> <script type="text/javascript"> $('#myButton').click(function() { document.body.style.zoom="160%" });</script>
<script type="text/javascript">$(function(){
$('h3').click(function(){
$('h3.active').removeClass('active');
$(this).addClass('active');
});
});</script>
<script type="text/javascript">const $bigBall = document.querySelector(".cursor__ball--big");
const $smallBall = document.querySelector(".cursor__ball--small");
const $hoverables = document.querySelectorAll(".hoverable");
// Listeners
document.body.addEventListener("mousemove", onMouseMove);
for (let i = 0; i < $hoverables.length; i++) {
$hoverables[i].addEventListener("mouseenter", onMouseHover);
$hoverables[i].addEventListener("mouseleave", onMouseHoverOut);
}
// Move the cursor
function onMouseMove(e) {
TweenMax.to($bigBall, 0.4, {
x: e.pageX - 15,
y: e.pageY - 15
});
TweenMax.to($smallBall, 0.1, {
x: e.pageX - 5,
y: e.pageY - 7
});
}
// Hover an element
function onMouseHover() {
TweenMax.to($bigBall, 0.3, {
scale: 4
});
}
function onMouseHoverOut() {
TweenMax.to($bigBall, 0.3, {
scale: 1
});
}</script>
<script>
// Get the img object using its Id
img = document.getElementById("img1");
// Function to increase image size
function enlargeImg() {
// Set image size to 1.5 times original
img.style.transform = "scale(1.5)";
// Animation effect
img.style.transition = "transform 0.25s ease";
}
// Function to reset image size
function resetImg() {
// Set image size to original
img.style.transform = "scale(1)";
img.style.transition = "transform 0.25s ease";
}
</script>
</script>
</body>
</html>```
Try to set the div style to display flex like this:
div {
display: flex;
flex: 1
///
}
I am showing a popup on text highlight using JavaScript. But I’m not able to position it at the center of the highlight,
Same as medium.com text highlight popup. I want the .toolbar at the center of the highlighted text like these images below.
const
getRoot = document.querySelector('.root'),
getTool = document.querySelector('.toolbar');
document.addEventListener('mouseup', e => {
window.getSelection().toString().length ?
(
getTool.style.left = e.clientX + 'px',
getTool.style.top = e.clientY + 'px',
getTool.classList.add('active')
) : null;
});
document.addEventListener('mousedown', () => {
window.getSelection().toString().length < 1 ?
getTool.classList.remove('active') : null;
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
}
.root {
max-width: 500px;
margin: 1rem auto;
font-size: 21px;
line-height: 1.8;
font-family: Times new roman;
}
.toolbar {
display: none;
position: absolute;
height: 45px;
width: 220px;
background-color: #212121;
border-radius: .25rem;
transition: .2s;
}
.toolbar.active {
display: block;
}
<div class="toolbar"></div>
<div class="root">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos dignissimos porro explicabo soluta totam illum. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Architecto, sunt.</p>
</div>
Medium.com
Like in this post you should use selection range and range boundingClientRect
document.addEventListener('mouseup', e => {
s = window.getSelection()
oRange = s.getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();
s.toString().length ?
(
getTool.style.left = ((oRect.left + oRect.width / 2) -110) + 'px', // 110 is toolbox.width/2
getTool.style.top = (oRect.top - 45 - 10) + 'px', //45 is toolbow.height
getTool.classList.add('active')
) : null;
});
I have managed to do a scrolling effect as you can see in this link here.
On another link(see here) I have another animation that happens on mouse move.
On top of my scrolling effect, I want the first image to have the mouse move effect.
How can I combine that?
I am seeing it quite challenging because the styling for both are completely different. In one template I work actual images in the froont-end but in the other one I work with image background.
JS:
var zoom_value = 1;
var boxFullHeight = $('header').height();
var boxHalfHeight = $('header').height() / 2;
var domHeight = $('html').scrollTop();
//scrollController will check the value when scrolling up or down
var scrollController = 0;
//max number that the scroll happens before images change
var max_scrollController = 4;
//this will enable/disable the scrollbar after a certain period
var controller = 0;
$(window).on('wheel', function(e) {
var delta = e.originalEvent.deltaY;
function add_styling(zoom_value){
$("#firstbox img").css({
"font-size": zoom_value +"px",
"transform": "scale(" + zoom_value + ")",
"transition": "all .9s"
});
}
if (delta > 0 && controller < 10){
controller++;
zoom_value = zoom_value + 0.1;
scrollController++;
add_styling(zoom_value);
if(scrollController >= max_scrollController){
$('.img2').addClass('hide_image');
}
return false;
}
else if(delta < 0) {
if (zoom_value > 1) {
controller--;
zoom_value = zoom_value - 0.1;
scrollController--;
add_styling(zoom_value);
if(scrollController < max_scrollController){
$('.img2').removeClass('hide_image');
}
}
else{
zoom_value = 1;
add_styling(zoom_value);
}
}
});
CSS:
html,body,header, #header_box, .image_box, img {
height: 100%;
}
#firstbox{
background: red;
width: 100%;
}
#second_box{
background: blue;
}
#third_box{
background: black;
}
.general{
width: 100%;
height: 100%;
}
header {
position: relative;
overflow: hidden;
}
.image_box{
position: absolute;
width: 100%;
}
img{
width: 100%;
}
.hide_image {
visibility: hidden;
}
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="firstbox" class="general">
<header>
<div id="header_box">
<div class="image_box">
<img class="img1" src="https://cdn.pixabay.com/photo/2017/03/07/13/38/landscape-2124022_960_720.jpg" alt="image here">
</div>
<div class="image_box box2">
<img class="img2" src="https://cdn.pixabay.com/photo/2017/06/05/20/10/blue-2375119_960_720.jpg" alt="image here">
</div>
</div>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ut accusamus non error laboriosam in commodi ad, sint, neque voluptates deserunt magnam minima nulla officia nobis fugit enim optio assumenda.</p>
</div>
<div id="second_box" class="general">
</div>
<div id="third_box" class="general">
</div>
</body>
Just add this to your javascript:
$('.box2').on('mousemove', function(e){
var x = e.originalEvent.x,
y = e.originalEvent.y,
w = this.offsetWidth,
h = this.offsetHeight,
targetX = w / 2 - x,
targetY = h / 2 - y;
$(this).css({
'transform': 'scale(1.2) translate(' + targetX/10 +'px, ' + targetY/10 +'px)'
});
});
I have this div with scrolling contents, I want to stop the scroll on hover but can't find a way to do it. Tried using mouseover function, don't know if it was the right way or not but that didn't work.
Here's what I have this far:
window.verticalScroller = function($elem) {
var top = parseInt($elem.css("top"));
var temp = -1 * $('#verticalScroller > div').height();
if (top < temp) {
top = $('#verticalScroller').height()
$elem.css("top", top);
}
$elem.animate({
top: (parseInt(top) - 60)
}, 1500, function() {
window.verticalScroller($(this))
});
}
$(document).ready(function() {
var i = 0;
$("#verticalScroller > div").each(function() {
$(this).css("top", i);
i += 60;
window.verticalScroller($(this));
});
});
#verticalScroller {
position: absolute;
width: 52 px;
height: 180 px;
border: 1 px solid red;
overflow: hidden;
}
#verticalScroller > div {
position: absolute;
width: 50 px;
height: 50 px;
border: 1 px solid blue;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="verticalScroller">
<div>1 Lorem ipsum dolor sit</div>
<div>2 Lorem ipsum dolor sit</div>
<div>3 Lorem ipsum dolor sit</div>
<div>4 Lorem ipsum dolor sit</div>
</div>
I accomplished this with javascript:
<script>
function launchScroll() {
if (window.verticalScroller != window.verticalScrollerProto)
window.verticalScroller = window.verticalScrollerProto;
var i = 0;
$("#verticalScroller > div").each(function() {
$(this).css("top", i);
i += 60;
window.verticalScroller($(this));
});
}
window.verticalScrollerProto = function($elem) {
var top = parseInt($elem.css("top"));
var temp = -1 * $('#verticalScroller > div').height();
if (top < temp) {
top = $('#verticalScroller').height()
$elem.css("top", top);
}
$elem.animate({
top: (parseInt(top) - 60)
}, 1500, function() {
window.verticalScroller($(this))
});
}
$(document).ready(function() {
launchScroll();
});
$('#verticalScroller').hover(
function(){
window.verticalScroller = function(){};
},
function(){
launchScroll();
}
);
</script>
The idea is that the loop function is recursive and attached to a window variable, so we can just empty that entity to stop the loop. I'm populating it in the first place from a prototype so that its value is easy to restore.
Onmouseover, replace the function with an empty one.
Onmouseout, replace empty function with recursive one and restart the loop.
Try using the position: fixed CSS attribute. Unless you have some scroll circumstances, this could be accomplished with pure CSS.
.hover-no-scroll:hover {
position: fixed;
}
I want to change the active starting item to 3 instead of 1s. In short instead of number 1s is active. I want to change it to number 3 staring item or anything if I add active on a class. How Can I achieve that stuff. I'm all over the internet but nothing happens.
Please see below sample of my code html and javascript.
//Small carosel code set here
$(document).ready(function() { ResCarouselOnInit(); });
$(window).resize(function() {
var r = new Date();
setTimeout(function() {
ResCarouselResize(r);
}, 200);
});
function ResCarouselOnInit() {
ResCarouselSize();
$(document).on('click', '.leftRs, .rightRs', function() {
ResCarousel(this);
});
$(document).on("mouseenter", ".ResHover", function() {
$(this).addClass("ResHovered");
});
$(document).on("mouseleave", ".ResHover", function() {
$(this).removeClass("ResHovered");
});
}
// Rescarousel Auto Slide
function ResCarouselSlide(e) {
var thiss = $(e).find(".rightRs");
var dataInterval = $(e).attr('data-interval');
!isNaN(dataInterval) && $(e).addClass("ResHover") && setInterval(function() {
!(thiss.parent().hasClass("ResHovered")) && ResCarousel(thiss);
}, +(dataInterval));
}
function ResCarouselResize() {
function myfunction() {
console.log("resize Works");
//var r = $('body').width();
$('.resCarousel').each(function() {
var divValue = $(this).attr('data-value');
var itemWidth = $(this).find('.item').width();
$(this).find(".resCarousel-inner").scrollLeft(divValue * itemWidth);
//var itemsSplit = $(this).attr("data-items").split(',');
//var it = r >= 1200 ? itemsSplit[3] : r >= 992 ? itemsSplit[2] : r >= 768 ? itemsSplit[1] : itemsSplit[0];
//$(this).attr("data-itm", it);
});
}
//var ResTimeout = setTimeout(function() { myfunction() }, 3000);
//clearTimeout(ResTimeout);
//ResTimeout = setTimeout(function() { myfunction() }, 3000);
//console.log(ResTimeout);
myfunction();
}
//this function define the size of the items
function ResCarouselSize() {
var t0 = performance.now();
// styleCollector0 = styleCollector1 = styleCollector2 = styleCollector3 = "";
$('.resCarousel').each(function(index) {
var itemsSplit = $(this).attr("data-items").split('-');
$(this).addClass("ResSlid" + index);
for (var i = 0; i < 4; i++) {
if (i == 0) {
var styleCollector0 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
} else if (i == 1) {
var styleCollector1 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
} else if (i == 2) {
var styleCollector2 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
} else if (i == 3) {
var styleCollector3 = ".ResSlid" + index + " .item {width: " + 100 / itemsSplit[i] + "%}";
}
}
$(this).attr("data-value", "0");
//var r = $('body').width();
//var it = r >= 1200 ? itemsSplit[3] : r >= 992 ? itemsSplit[2] : r >= 768 ? itemsSplit[1] : itemsSplit[0];
//$(this).attr("data-itm", it);
var styleCollector = "#media (max-width:767px){" + styleCollector0 + "}" +
"#media (min-width:768px){" + styleCollector1 + "}" +
"#media (min-width:992px){" + styleCollector2 + "}" +
"#media (min-width:1200px){" + styleCollector3 + "}";
//$(this).append("<div class=\"ResStyleManager\"></div>")
$(this).find("style").remove();
$(this).append("<style>" + styleCollector + "</style>");
ResCarouselSlide(this);
});
//console.log(styleCollector);
//$("body").append("<div class=\"ResStyleManager\"></div>")
//$('.ResStyleManager').html(null).append("<style>" + styleCollector + "</style>");
var t1 = performance.now();
console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to Size');
}
//this function used to move the items
function ResCarousel(Btn) {
//var t0 = performance.now();
var parent = $(Btn).parent(),
slide = +parent.attr("data-slide"),
itemsDiv = parent.find('.resCarousel-inner'),
//divValueq = +parent.attr('data-value'),
itemSpeed = +parent.attr("data-speed"),
itemLoad = +parent.attr("data-load"),
//animi = parent.attr("data-animator"),
translateXval = '',
currentSlide = "",
itemLenght = itemsDiv.find(".item").length,
itemWidth = itemsDiv.find('.item').outerWidth(),
dataItm = +Math.round(itemsDiv.outerWidth() / itemWidth),
cond = $(Btn).hasClass("leftRs"),
divValue = Math.round(itemsDiv.scrollLeft() / itemWidth);
//console.log(dataItm + "," + Math.abs(dataItmq));
//console.log(divValue + "," + divValueq);
//console.log(cond);
//console.log(typeof + parent.attr("data-slide"))
itemSpeed = !isNaN(itemSpeed) ? itemSpeed : 400;
slide = slide < dataItm ? slide : dataItm;
if (cond) {
currentSlide = divValue - slide;
translateXval = currentSlide * itemWidth;
var MoveSlide = currentSlide + slide;
//console.log(itemloop);
if (divValue == 0) {
currentSlide = itemLenght - slide;
translateXval = currentSlide * itemWidth;
currentSlide = itemLenght - dataItm;
itemSpeed = 400;
//console.log(currentSlide + "," + translateXval);
} else if (slide >= MoveSlide) {
currentSlide = translateXval = 0;
}
} else {
currentSlide = divValue + slide;
translateXval = currentSlide * itemWidth;
var MoveSlide = currentSlide + slide;
//console.log(itemLenght + "," + (MoveSlide + "," + slide + "," + dataItm));
//console.log(itemLenght + "," + (MoveSlide - slide + dataItm));
//console.log((divValue + dataItm) + "," + itemLenght);
if (divValue + dataItm == itemLenght) {
currentSlide = translateXval = 0;
itemSpeed = 400;
} else if (itemLenght <= (MoveSlide - slide + dataItm)) {
currentSlide = itemLenght - slide;
translateXval = currentSlide * itemWidth;
currentSlide = itemLenght - dataItm;
}
// resCarouselAnimator(itemsDiv, currentSlide + 1, currentSlide + slide);
}
//console.log(slide + "," + itemWidth);
parent.attr("data-animator") == "lazy" && resCarouselAnimator(itemsDiv, cond ? 0 : 1, currentSlide + 1, currentSlide + dataItm, itemSpeed, (slide * itemWidth));
//console.log(itemsDiv.scrollLeft() + "," + translateXval)
//console.log(itemSpeed);
if (!isNaN(itemLoad)) {
itemLoad = itemLoad >= slide ? itemLoad : slide;
//console.log((itemLenght - itemLoad) <= currentSlide + dataItm);
//console.log((itemLenght - itemLoad) + " ," + (currentSlide + dataItm) + " ," + (itemLenght - dataItm));
(itemLenght - itemLoad) <= (currentSlide + dataItm) && ResCarouselLoad1(itemsDiv);
}
itemsDiv.animate({ scrollLeft: translateXval }, itemSpeed);
parent.attr("data-value", currentSlide);
//var t1 = performance.now();
//console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate');
}
function ResCarouselLoad1(e) {
//console.log(e.attr("id"));
$("#" + e.attr("id")).trigger("ResCarouselLoad");
}
function resCarouselAnimator(parent, direction, start, end, speed, length) {
//console.log(parent + "," + start + "," + end);
var val = 5;
if (direction == 0) {
for (var i = start - 1; i < end + 1; i++) {
val = val * 2;
}
val = -val;
}
//console.log(length);
//if (direction == 1) {
// for (var i = start - 1; i < end + 1; i++) {
// length = length / 2
// console.log(length);
// }
// //val = val;
//}
//val = direction == 1 ? length : -length;
for (var i = start - 1; i < end; i++) {
val = direction == 0 ? val / 2 : val * 2;
//console.log(val);
//console.log(parent.find(".item").eq(i).find("h1").text());
parent.find(".item").eq(i).css("transform", "translateX(" + val + "px)");
}
setTimeout(function() {
parent.find(".item").attr("style", "");
}, speed - 70);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ResCarousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
body {
font-family: 'Trirong', serif;
background: #eee;
}
.p0 {
padding: 0;
}
.resCarousel-inner .item {
/*border: 4px solid #eee;*/
/*vertical-align: top;*/
text-align: center;
}
.resCarousel-inner .item .tile div,
.banner .item div {
display: table;
width: 100%;
min-height: 250px;
text-align: center;
/*box-shadow: 0 1px 1px rgba(0, 0, 0, .1);*/
}
.resCarousel-inner .item h1 {
display: table-cell;
vertical-align: middle;
color: white;
}
.banner .item div {
background: url('demoImg.jpg') center top no-repeat;
background-size: cover;
min-height: 550px;
}
.item .tile div {
background: url('demoImg.jpg') center center no-repeat;
background-size: cover;
height: 200px;
color: white;
}
.item div h1 {
background: rgba(0, 0, 0, .4);
}
/*resCarousel Css*/
.outt {
display: none;
}
.leftRs {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
z-index: 100;
left: 0;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
}
.rightRs {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
width: 50px;
height: 50px;
box-shadow: 1px 2px 10px -1px rgba(0, 0, 0, .3);
border-radius: 999px;
}
.resCarousel {
/*float: left;
overflow: hidden;*/
width: 100%;
position: relative;
}
.resCarousel-inner {
overflow-x: hidden;
white-space: nowrap;
font-size: 0;
vertical-align: top;
}
.resCarousel-inner .item {
display: inline-block;
font-size: 14px;
white-space: initial;
}
/*banner*/
.banner {
overflow: hidden !important;
}
/*tile css*/
.resCarousel-inner .item .tile {
background: white;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
margin: 5px;
}
/*animation*/
.resCarousel[data-animator="lazy"] .item {
transition: .6s ease all;
}
#media (max-width: 767px) {
.leftRs,
.rightRs {
/*display: none;*/
}
.resCarousel-inner {
overflow-x: auto;
}
}
/*resCarousel Css End*/
</style>
</head>
<body>
<!-- test -->
<!--home-->
<div class="container p8">
<div class="resCarousel carousel" id="puta" data-type="multi" data-items="2-4-4-4" data-slide="4" data-interval="false" data-value="8">
<div class="resCarousel-inner">
<div class="item">
<div class="tile">
<div>
<h1>1s</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>2</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item active">
<div class="tile">
<div>
<h1>3</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>4</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>5</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>6</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>7</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>8</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>9</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>10</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>11</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>12</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>13</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
<div class="item">
<div class="tile">
<div>
<h1>14</h1>
</div>
<h3>Title</h3>
<p>content</p>
</div>
</div>
</div>
<button class='btn btn-default leftRs'><</button>
<button class='btn btn-default rightRs'>></button>
</div>
</div>
<hr>
<script src="js/resCarousel.js"></script>
</body>
</html>