how do I can implement that gif animation - javascript

This is the animation that I want to implement this animation from youtube here.
I maked first part and just Im stuck on begining of the animation. Just dont know is here usefull use JS or another library, or just CSS.
Better you just download whole archive with my project cuz it has many png files for animation.
Here the archive of project
$(document).ready(function() {
let sack = $(".sack"),
leaf = $(".leaf"),
bonus = $(".bonus"),
water = $(".water"),
wheat = $(".wheat"),
timer = $('.timer'),
beer = $('.beer'),
content = $('.content'),
container = $('.container'),
text = $('.header p:first-child'),
header = $('.header'),
logo = $('.logo'),
width = $(window).width(),
height = $(window).height();
setTimeout(()=>{
sack.animate({'top': '-100px','left': '-80px'}, 500);
wheat.animate({'top': '-80px','right': '-80px'}, 500);
water.animate({'top': '0px', 'margin-left': '-27px'}, 500);
bonus.animate({'top': '-190px', 'right': '-10px'}, 500);
leaf.animate({'top': '-230px'}, 500);
timer.animate({'opacity': 0}, 400);
beer.animate({'bottom': '65px'}, 500);
setTimeout(()=> {
if (height >= 670) {
content.css({'transform': 'translate(59px, 155px)'})
} else if (height >= 633) {
content.css({'transform': 'translate(59px, 135px)'})
} else if (height >= 620) {
content.css({'transform': 'translate(59px, 125px)'})
} else if (height >= 550) {
content.css({'transform': 'translate(59px, 85px)'})
}
// console.log(height)
// content.css({'transform': 'translate(59px, 155px)'})
// container.css({'background-position': '0 100px'});
setTimeout(()=> {
// leaf.attr("src","../images/itemleafm.png");
// leaf.css({'top': '-230px','margin': '-47px auto','right': '123px', 'position': 'absolute'})
beer.attr("src","https://i.ibb.co/2WJpCpQ/bankaf.png");
setTimeout(()=> {
container.css({'background': 'url(https://i.ibb.co/47Lny0p/supermarket.png', 'background-repeat': 'no-repeat', 'background-size':'cover'});
sack.animate({'margin-left': '-180px'}, 500);
wheat.animate({'margin-right': '-180px'}, 500);
water.animate({'margin-left': '-127px'}, 500);
bonus.animate({'margin-right': '-110px'}, 500);
header.css({'padding-bottom':'150px'});
text.css({'transition':'1s'});
text.css({'margin-top':'-150px'});
logo.css({'top': '0'});
leaf.css({'opacity': 0});
}, 1000)
}, 1000)
}, 1000);
}, 1000);
})
* {
box-sizing: border-box;
}
body {
margin: 0;
}
p {
margin: 0;
}
.container {
min-width: 100%;
height: 100vh;
background: linear-gradient(0deg, rgba(24, 60, 112, 0.9), rgba(24, 60, 112, 0.9)), linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://i.ibb.co/47Lny0p/supermarket.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -18px -122px;
background-size: 300px;
background-position: 0 300px;
overflow-x: hidden;
overflow-y: hidden;
transition: background-image 1s;
}
.header {
width: 100%;
}
.logo {
background: linear-gradient(0deg, #183C70 23.14%, rgba(24, 60, 112, 0) 100%);
transform: matrix(1, 0, 0, -1, 0, 0);
position: absolute;
width: 100%;
top: -200px;
text-align: center;
transition: 1s;
}
.logo img {
transform: matrix(1, 0, 0, -1, 0, 0);
}
.header,
.content {
display: flex;
justify-content: center;
flex-direction: column;
}
.header p:first-child {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 23px;
text-align: center;
color: #FFFFFF;
margin-top: 30px;
}
.header p:last-child {
font-family: 'Roboto';
font-style: normal;
font-family: Roboto;
font-style: normal;
font-weight: 900;
font-size: 64px;
line-height: 75px;
text-align: center;
color: #ffffff;
margin-top: 40px;
}
.content {
flex-direction: column;
align-items: center;
flex-wrap: wrap;
height: 300px;
transition: 1s;
}
.footer {
text-align: right;
bottom: 0;
width: 100%;
position: absolute;
padding: 10px 10px 10px 0;
}
.line-one,
.line-two {
width: 100%;
height: 150px;
position: relative;
}
img[alt='wheat'] {
position: absolute;
}
img[alt='sack'] {
top: 30px;
right: 30px;
position: absolute;
}
img[alt='water'] {
margin: 31px auto;
display: flex;
justify-self: center;
position: absolute;
right: 0px;
left: 0;
}
img[alt='bonus'] {
position: absolute;
right: 10px;
}
img[alt='leaf'] {
position: absolute;
top: 30px;
left: 60px;
}
.footer img:first-child {
opacity: .6;
}
img.beer {
position: absolute;
margin: 0 auto;
right: 0;
left: 0;
bottom: -170px;
}
#media (max-height: 600px) {
.header p:last-child {
margin-top: 10px;
}
.header p:first-child {
margin-top: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beer</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container" style="background-size: cover;background-position: center;">
<div class="logo">
<img src="https://i.ibb.co/6X3QHs3/Logo.png" width="90" height="63" alt="logo">
</div>
<div class="header after">
<p>Вращай смартфон, собери как </br> можно больше ингредиентов за </br> 60 секунд и узнай секретный </br> ингредиент!</p>
<p class="timer">60</p>
</div>
<div class="content">
<div class="line-one">
<img class="wheat" src="https://i.ibb.co/6ZYTvvb/itemw.png" alt="wheat">
<img class="water" width="50" height="90" src="https://i.ibb.co/Sxnz4j8/itemwat.png" alt="water">
<img class="sack" src="https://i.ibb.co/N1ch8ZC/items.png" alt="sack">
</div>
<div class="line-two">
<img class="leaf" src="https://i.ibb.co/2PmkYFc/iteml.png" alt="leaf">
<img class="bonus" src="https://i.ibb.co/JpKZjGK/itemb.png" alt="bonus">
</div>
</div>
<div class="footer">
<img class="seal" src="https://i.ibb.co/C8WQngb/seal.png" alt="seal">
<img class="beer" src="https://i.ibb.co/hCghLdh/banka.png" width="74" height="180" alt="beer">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The animation only for mobile devices so you should look by inspector with width less than 400px and height less than 650
Here I have the problems with adaptive animation and z-index on leaf. It should be over beer, does not work.
Then you should noticed that there are several interaption in animation.
Please just need advice and little help to continue the work

Related

How do I get the canvas to show behind my HTML so my animated cursor will move over the screen?

I want the canvas to show behind the website not over it. I have tried using z index and that does not work. I want to be able to see my actual website while moving the cursor over things. So I need the cursor to show on the website. It just blocks out my whole section. How can I get this to work correctly?
const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelectorAll('.nav__link')
navToggle.addEventListener('click', () => {
document.body.classList.toggle('nav-open');
});
navLinks.forEach(link => {
link.addEventListener('click', () => {
document.body.classList.remove('nav-open');
})
})
// Canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let spots = [];
let hue = 0;
const mouse = {
x: undefined,
y: undefined
}
canvas.addEventListener('mousemove', function (event) {
mouse.x = event.x;
mouse.y = event.y;
for (let i = 0; i < 3; i++) {
spots.push(new Particle());
}
});
class Particle {
constructor() {
this.x = mouse.x;
this.y = mouse.y;
this.size = Math.random() * 2 + 0.1;
this.speedX = Math.random() * 2 - 1;
this.speedY = Math.random() * 2 - 1;
this.color = 'hsl(' + hue + ', 100%, 50%)';
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.size > 0.1) this.size -= 0.03;
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
function handleParticle() {
for (let i = 0; i < spots.length; i++) {
spots[i].update();
spots[i].draw();
for (let j = i; j < spots.length; j++) {
const dx = spots[i].x - spots[j].x;
const dy = spots[i].y - spots[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 90) {
ctx.beginPath();
ctx.strokeStyle = spots[i].color;
ctx.lineWidth = spots[i].size / 10;
ctx.moveTo(spots[i].x, spots[i].y);
ctx.lineTo(spots[j].x, spots[j].y);
ctx.stroke();
}
}
if (spots[i].size <= 0.3) {
spots.splice(i, 1); i--;
}
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
handleParticle();
hue++;
requestAnimationFrame(animate);
}
window.addEventListener('resize', function () {
canvas.width = innerWidth;
canvas.height = innerHeight;
init();
})
window.addEventListener('mouseout', function () {
mouse.x = undefined;
mouse.y = undefined;
})
animate()
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
overflow-x: hidden;
}
body {
position: relative
}
/* Custom Properties */
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-light: #fff;
--clr-dark: #303030;
--clr-accent: #16e0bd;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25),
0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}
#media (min-width: 800px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
/* General styles */
html {
scroll-behavior: smooth;
}
body {
background: var(--clr-light);
color: var(--clr-dark);
margin: 0;
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
}
#canvas {
width: 100%;
height: 100%;
border: 2px solid red;
z-index: -1;
}
/* #canvas {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
} */
section {
padding: 5em 2em;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
/* Buttons */
.btn {
display: inline-block;
padding: .5em 2em;
background: var(--clr-accent);
color: var(--clr-dark);
text-decoration: none;
cursor: pointer;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 5px;
font-weight: var(--fw-bold);
transition: transform 200ms ease-in-out;
margin: 15px;
border-radius: 8px;
border-style: groove;
border-width: 3px;
border-color: var(--clr-accent);
}
.btn2 {
display: inline-block;
padding: .4em 1em;
background: var(--clr-accent);
color: var(--clr-dark);
text-decoration: none;
cursor: pointer;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: var(--fw-bold);
transition: transform 200ms ease-in-out;
margin: 15px;
border-radius: 8px;
border-style: groove;
border-width: 3px;
border-color: var(--clr-accent);
}
.btn2:hover {
transform: scale(1.2);
}
.btn:hover {
transform: scale(1.2);
}
/* Typography */
h1,
h2,
h3 {
line-height: 1;
margin: 0;
}
h1 {
font-size: var(--fs-h1)
}
h2 {
font-size: var(--fs-h2)
}
h3 {
font-size: var(--fs-h3)
}
.section__title {
margin-bottom: .25em;
}
.section__title--intro {
font-weight: var(--fw-reg);
}
.section__title--intro strong {
display: block;
}
.section__subtitle {
margin: 0;
font-size: var(--fs-h3);
}
.section__subtitle--intro,
.section__subtitle--about {
background: var(--clr-accent);
padding: .25em 1em;
font-family: var(--ff-secondary);
margin-bottom: 1em;
}
.section__subtitle--work {
color: var(--clr-accent);
font-weight: var(--fw-bold);
margin-bottom: 2em;
}
/* header */
header {
display: flex;
justify-content: space-between;
padding: 1em;
}
.logo {
max-width: 150px;
z-index: 100;
}
.nav {
position: fixed;
background: var(--clr-dark);
color: var(--clr-light);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
transform: translateX(100%);
transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
}
.nav__list {
list-style: none;
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin: 0;
padding: 0;
}
.nav__link {
color: inherit;
font-weight: var(--fw-bold);
font-size: var(--fs-h2);
text-decoration: none;
}
.nav__link:hover {
color: var(--clr-accent);
}
.nav-toggle {
padding: .5em;
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
right: 1em;
top: 1em;
z-index: 1000;
}
.nav-open .nav {
transform: translateX(0);
}
.nav-open .nav-toggle {
position: fixed;
}
.nav-open .hamburger {
transform: rotate(.625turn);
}
.nav-open .hamburger::before {
transform: rotate(90deg) translateX(-6px);
}
.nav-open .hamburger::after {
opacity: 0;
}
.hamburger {
display: block;
position: relative;
}
.hamburger,
.hamburger::before,
.hamburger::after {
background: var(--clr-accent);
width: 2em;
height: 3px;
border-radius: 1em;
transition: transform 250ms ease-in-out;
}
.hamburger::before,
.hamburger::after {
content: '';
position: absolute;
left: 0;
right: 0;
}
.hamburger::before {
top: 6px;
}
.hamburger::after {
bottom: 6px;
}
/* Intro section */
.intro {
position: relative;
}
.intro__img {
box-shadow: var(--bs);
border-radius: 8px;
}
.section__subtitle--intro {
display: inline-block;
}
#media (min-width: 600px) {
.intro {
display: grid;
width: min-content;
margin: 0 auto;
grid-column-gap: 1em;
grid-template-areas:
"img title"
"img subtitle";
grid-template-columns: min-content max-content;
}
.intro__img {
grid-area: img;
min-width: 300px;
position: relative;
z-index: 2;
}
.section__subtitle--intro {
align-self: start;
grid-column: -1 / 1;
grid-row: 2;
text-align: right;
position: relative;
left: -1.5em;
width: calc(100% + 1.5em);
}
}
/* My services section */
.my-services {
background-color: var(--clr-dark);
color: var(--clr-light);
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
}
.section__title--services {
position: relative;
}
.section__title--services::after {
content: '';
display: block;
width: 2em;
height: 1px;
margin: 0.5em auto 1em;
background: var(--clr-light);
opacity: 0.25;
}
.service {
max-width: 500px;
margin: 0 auto;
}
.service p:hover {
color: var(--clr-accent);
}
.service p {
font-family: var(--ff-secondary);
font-size: 15px;
}
#media (min-width: 800px) {
.services {
display: flex;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.service+.service {
margin-left: 2em;
}
}
.about-me {
max-width: 1000px;
margin: 0 auto;
margin-top: -3%;
margin-bottom: -3%;
}
.about-me__body {
font-family: var(--ff-secondary);
text-align: center;
}
.about-me__img {
box-shadow: var(--bs);
border-radius: 8px;
}
#media(min-width: 600px) {
.about-me {
display: grid;
grid-template-columns: 1fr 200px;
grid-template-areas:
"title img"
"subtitle img"
"text img";
grid-column-gap: 2em;
}
.section__title--about {
grid-area: title;
}
.section__subtitle--about {
grid-column: 1 / -1;
grid-row: 2;
position: relative;
left: -1em;
width: calc(100% + 2em);
padding-left: 1em;
padding-right: calc(200px + 4em);
}
.about-me__img {
grid-area: img;
position: relative;
z-index: 2;
}
}
/* My Work */
.my-work {
background-color: var(--clr-dark);
color: var(--clr-light);
text-align: center;
padding-top: 30px;
padding-bottom: 40px;
}
.portfolio {
display: grid;
margin-left: 50px;
column-gap: 20px;
row-gap: 30px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
#media(min-width: 200px) {
.portfolio__item {
text-align: center;
padding-right: 50%;
}
}
#media(min-width: 250px) {
.portfolio__item {
text-align: center;
}
}
#media(min-width: 350px) {
.portfolio__item {
text-align: center;
padding-right: 60px
}
}
.item-header1,
.item-header2,
.item-header3,
.item-header4,
.item-header5,
.item-header6 {
text-align: center;
color: white;
display: flex;
justify-content: center;
}
.item-header1:hover,
.item-header2:hover,
.item-header3:hover,
.item-header4:hover,
.item-header5:hover,
.item-header6:hover {
color: var(--clr-accent);
}
.text1,
.text2,
.text3 {
opacity: 0;
position: absolute;
text-align: center;
font-weight: var(--fw-bold);
margin-top: 10%;
border: solid 2px;
border-radius: 50%;
padding: 20px;
border-color: aqua;
background-color: var(--clr-dark);
width: 130px;
height: 130px;
font-size: 20px;
color: var(--clr-accent);
}
.text4,
.text5,
.text6 {
opacity: 0;
position: absolute;
text-align: center;
font-weight: var(--fw-bold);
margin-top: 40%;
border: solid 2px;
border-radius: 50%;
padding: 20px;
border-color: aqua;
background-color: var(--clr-dark);
width: 130px;
height: 130px;
font-size: 20px;
color: var(--clr-accent);
}
.text1:hover,
.text2:hover,
.text3:hover,
.text4:hover,
.text5:hover,
.text6:hover {
transition:
transform 750ms cubic-bezier(.5, 0, .5, 1),
opacity 250ms linear;
opacity: 20;
}
.link {
text-decoration: none;
color: var(--clr-accent);
text-align: center;
}
.text1,
.text4 {
margin-left: 7%;
}
.text2,
.text5 {
margin-left: 38%;
}
.text3,
.text6 {
margin-left: 69%;
}
.portfolio__item {
overflow: hidden;
text-decoration: none;
}
.portfolio__img {
transition:
transform 750ms cubic-bezier(.5, 0, .5, 1),
opacity 250ms linear;
border-radius: 8px;
border-style: double;
border-color: var(--clr-accent);
border-width: 10px;
}
.portfolio__item:focus {
position: relative;
z-index: 2;
}
.portfolio__img:hover,
.portfolio__item:focus .portfolio__img {
opacity: .5;
}
/* footer */
.footer {
background: #111;
color: var(--clr-accent);
text-align: center;
padding: 2.5em 0;
font-size: var(--fs-h3);
}
.footer a {
color: inherit;
text-decoration: none;
}
.footer__link {
font-weight: var(--fw-bold);
}
.footer__link:hover,
.social-list__link:hover {
opacity: .7;
}
.footer__link:hover {
text-decoration: underline;
}
.social-list {
list-style: none;
display: flex;
justify-content: center;
margin: 2em 0 0;
padding: 0;
}
.social-list__item {
margin: 0 .5em;
}
.social-list__link {
padding: .5em;
}
/* Individual portfolio item styles */
.portfolio-item-individual {
padding: 0 2em 2em;
max-width: 1000px;
margin: 0 auto;
}
.portfolio-item-individual p {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Megan Portfolio Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Canvas -->
<section height=90vh>
<canvas id="canvas" width="100%" height="100vh" z-index="-1">
<header height=10vh z-index="6">
</header>
<!-- (anything in here like social icons etc give them higher z-index then 5) -->
<header>
<div class="logo">
<img src="img/DevMegan2.png" alt="">
</div>
<!-- NAVBAR -->
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">My Skills</li>
<li class="nav__item">About me</li>
<li class="nav__item">My Work</li>
</ul>
</nav>
</header>
<!-- Introduction -->
<section class="intro" z-index="1000" id="home">
<h1 class="section__title section__title--intro">
Hi, I am <strong>Megan Lynn</strong>
</h1>
<p class="section__subtitle section__subtitle--intro">Full-Stack Developer</p>
<img src="img/me.jpg" width="770" alt="a picture of Megan smiling" class="intro__img">
</section>
</canvas>
</section>
<!-- My services -->
<section class="my-services" id="services">
<h2 class="section__title section__title--services">My Skills</h2>
<div class="services">
<div class="service">
<h3>Programming Languages</h3>
<p>Skilled in programming with back-end languages such as Python, C#, and C++. Can manage data
held
in
relational
databases using SQL. Have experience in front-end programming with JavaScript, HTML, and
CSS.
</p>
</div> <!-- / service -->
<div class="service">
<h3>Tools & Technologies</h3>
<p>Experienced in the operating systems, Windows, Linux, and macOS. Know how to use
shell scripting. Have experience with using frameworks in Visual Studio Code such as, .NET
and
ASP.NET
MVC. Have some experience using React. </p>
</div> <!-- / service -->
<div class="service">
<h3>Full-Stack Development</h3>
<p>Have a variety of different skills and enjoy utilizing the back and front end to create Full
Stack applications and programs. Have made projects that connect to a back-end API and
database
</p>
</div> <!-- / service -->
</div> <!-- / services -->
My Work
</section>
<!-- About me -->
<section class="about-me" id="about">
<h2 class="section__title section__title--about">Who I am</h2>
<p class="section__subtitle section__subtitle--about">Developer based out of the East Coast, US</p>
<div class="about-me__body">
<p>Hello! Thank you for visiting my page! My name is Megan and I am currently a student in college.
I
will
be graduating with my Bachelor's degree in both Computer Science and CIT & Cybersecurity as a
double
major
in December, 2022. I maintain a 4.0 GPA. I am pursuing a career as a Software
Developer/Engineer.
</p>
<p>I genuinely enjoy programming and solving problems. I am passionate about Software Development. I
spend
all of my free time learning as much as I can about it. I am getting better by the day. Practice
makes
perfect! I am extremely motivated and I believe anybody can do or solve anything if you really
put
your
mind
to it!</p>
</div>
<img src="img/me2.jpg" class="about-me__img">
</section>
<!-- My Work -->
<section class="my-work" id="work">
<h2 class="section__title section__title--work">My Projects</h2>
<p class="section__subtitle section__subtitle--work">A selection of my range of work</p>
<div class="portfolio">
<!-- Portfolio item 01 -->
<a href="https://loancalculate.azurewebsites.net/Home/App" target="blank" class="portfolio__item">
<header class="item-header1">
<h3>Loan Calculator</h3>
</header>
<img src="img/LoanCalc.PNG" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text1"><a href="https://loancalculate.azurewebsites.net/Home/App" class="link"
target="_blank">Open
Project</a>
</div>
<!-- Portfolio item 02 -->
<a href="https://github.com/meganlynn21/Palindrome_Checker" target="blank" class="portfolio__item">
<header class="item-header2">
<h3>Palindrome Checker</h3>
</header>
<img src="img/palindrome.png" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text2"><a href="https://github.com/meganlynn21/Palindrome_Checker" class="link"
target="_blank">Open
Project</a>
</div>
<!-- Portfolio item 03 -->
<a href="https://github.com/meganlynn21/Password-Validator" target="blank" class="portfolio__item">
<header class="item-header3">
<h3>Password Validator</h3>
</header>
<img src="img/psswrd-validator.PNG" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text3"><a href="https://github.com/meganlynn21/Password-Validator" class="link"
target="_blank">Open
Project</a>
</div>
<!-- Portfolio item 04 -->
<a href="https://github.com/meganlynn21/Real-Estate-Calculator" target="blank" class="portfolio__item">
<header class="item-header4">
<h3>Real Estate Calculator</h3>
</header>
<img src="img/Real-Estate-Img.PNG" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text4"><a href="https://github.com/meganlynn21/Real-Estate-Calculator" class="link"
target="_blank">Open
Project</a>
</div>
<!-- Portfolio item 05 -->
<a href="https://github.com/meganlynn21/ATM" target="blank" class="portfolio__item">
<header class="item-header5">
<h3>ATM</h3>
</header>
<img src="img/atm.png" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text5"><a href="https://github.com/meganlynn21/ATM" class="link" target="_blank">Open
Project</a>
</div>
<!-- Portfolio item 06 -->
<a href="https://github.com/meganlynn21/shopping_list" target="blank" class="portfolio__item">
<header class="item-header6">
<h3>Shopping List</h3>
</header>
<img src="img/shopping-list.png" height="300" width="400" alt="" class="portfolio__img">
</a>
<div class="text6"><a href="https://github.com/meganlynn21/shopping_list" class="link" target="_blank">Open
Project</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<!-- My email -->
#rosettastone0203
<ul class="social-list">
<li class="social-list__item"><a class="social-list__link"
href="https://www.linkedin.com/in/megan-keyes-a81146224" target="blank"><i
class="fab fa-linkedin fa-2x"></i></a>
</li>
<li class="social-list__item"><a class="social-list__link" href="https://twitter.com/meganlynn22"
target="blank"> <i class="fab fa-twitter-square fa-2x"></i></a></li>
<li class="social-list__item"><a class="social-list__link" href="https://github.com/meganlynn21"
target="blank"><i class="fab fa-github fa-2x"></i></a></li>
</ul>
</footer>
<script src="js/index.js"></script>
</body>
</html>
I used position: fixed on the section that the canvas element was in and then I used position: relative on the elements that were not clickable and it works now

How can I make a video player like mx player in html?

I have been working on a Netflix themed HTML video player and I was wondering if there was a way to be able to make it into a video player like max player where you can play any video instead of the one you code into the HTML. ..........................................................................................................................................................................................................
Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Netflix video player</title>
<link rel="stylesheet" href="https://cdnjs.cloudlflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="c-video">
<video class="video" src="video.mp4"></video>
<div class="controls">
<div class="red-bar">
<!--
inputs are self-closing tags. You don't need a closing tag for it!
Self-closing tags are single tagged elements - you only need to
add a slash before '>', like so: <input />
-->
<input class="red-juice" type="range" min="1" max="100" step="1" value="1" />
</div>
</div>
<div class="buttons">
<button id="play-pause"></button>
</div>
<div class="title"></div>
<div class="goback">
<button class="back" onclick="goBack()"></button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
html,body {
margin:0;
padding:0;
}
.container {
display: flex;
background-color: #000000;
justify-content: center;
align-items: center;
height: 100vh;
}
.video {
width: 100%;
}
.c-video {
position: fixed;
width: 100%;
height: 100;
position: relative;
overflow: hidden;
}
.c-video:hover .title {
transform: translateY(0);
}
.c-video:hover .controls {
transform: translateY(0);
}
.c-video:hover .buttons {
top: 50%;
left: 50%;
transform: translate(240%, -50%);
}
.title {
display: flex;
position: absolute;
top: 0;
height: 120px;
width: 100%;
flex-wrap: wrap;
background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.01));
transform: translateY(-100%);
transition: all .2s;
}
.controls {
display: flex;
position: absolute;
bottom: 0;
height: 70px;
width: 100%;
flex-wrap: wrap;
background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.9));
transform: translateY(100%);
transition: all .2s;
}
.c-video:hover .back {
transform: translate(20%, 0);
}
.back {
position: absolute;
background: none;
outline: 0;
border: 0;
top: 5%;
cursor: pointer;
transform: translate(-200000%, 0);
}
.back::before {
content: "\f060";
font-weight: 900;
font-family: "Font Awesome 5 Free";
display: inline-block;
font-size: 200%;
color: #ffff;
}
.buttons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-99999%, -50%);
}
.buttons button {
background: none;
height: 45px;
border: none;
outline: 0;
cursor: pointer;
transform: translate(-320%, 50%);
}
.buttons button:before {
content: "\f04b";
font-weight: 900;
font-family: "Font Awesome 5 Free";
display: inline-block;
font-size: 300%;
color: #ffff;
-webkit-font-smoothing: antialiased;
}
.buttons button.play:before {
content: "\f04b";
font-weight: 900;
font-family: 'Font Awesome 5 Free';
}
.buttons button.pause:before {
content: "\f04c";
font-weight: 900;
font-family: 'Font Awesome 5 Free';
}
/* Progress bar container */
.red-bar {
height: 2px;
margin-top: 15px;
margin-bottom: -15px;
background-color: rgba(0, 0, 0, 0.4);
margin-left: 10px;
margin-right: 10px;
width: 100%;
}
/* This represents the progress bar */
.red-juice {
position: relative;
width: 100%;
height: 2px;
/* thumbHeight + (2 x thumbBorderWidth)*/
background-image: linear-gradient(to right, red 1%, rgba(0, 0, 0, 0.4) 1%);
-webkit-appearance: none;
/*remove the line*/
outline: none;
top: -12px;
margin-left: 1px;
margin-right: 100px;
}
.red-juice::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 20px;
}
.red-juice::-webkit-slider-thumb {
-webkit-appearance: none;
background: red;
/*thumbColor*/
width: 15px;
/* thumbHeight + (2 x thumbBorderWidth)*/
height: 15px;
/* thumbHeight + (2 x thumbBorderWidth)*/
border-radius: 100%;
margin-top: 1px;
/* -[thumbHeight + (2 x thumbBorderWidth) - trackHeight]/2*/
cursor: pointer;
border: 0px solid #fff;
/*border-width should be equal to thumbBorderWidth if you want same border width across all browsers and border-color should match the background*/
transition: 0.3s;
}
Javascript:
var video = document.querySelector(".video");
var juice = document.querySelector(".red-juice");
var btn = document.getElementById("play-pause");
function togglePlayPause() {
if (video.paused) {
btn.className = 'pause';
video.play();
} else {
btn.className = 'play';
video.pause();
}
}
btn.onclick = function(params) {
//video.fastSeek(570); // 9:30
// video.currentTime = 570; //test
togglePlayPause();
}
video.addEventListener('timeupdate', function() {
if (video.ended) {
btn.className = "play";
// At the end of the movie, reset the position to the start and pause the playback.
video.currentTime = 0;
togglePlayPause();
}
});
function slidingProgress() {
// this.value will not work here, since it points to the global window obj
// so I'm using juice.value instead
// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#Function_context
juice.style.background = 'linear-gradient(to right, red ' + juice.value * 100 / juice.max + '%, rgba(0, 0, 0, 0.4) ' + juice.value + '%, rgba(0, 0, 0, 0.4) 100%)'
}
video.addEventListener('timeupdate', () => {
juice.value = video.currentTime / video.duration * juice.max
slidingProgress() // Call your function here to update .red-juice
})
juice.addEventListener('change', () => {
video.currentTime = video.duration * juice.value / juice.max
})
// And finally assign it to juice.oninput
juice.oninput = slidingProgress;
// you're not specifying any events to listen to here, so it wouldn't work
// juice.addEventListener(slidingProgress);
function goBack() {
window.history.back();
}

Could use some pointers on this wonky animation

I've essentially made 3 sections that animate on hover. It all works wonderfully when I'm hovering over at a rather leasurely pace, but if I move the mouse quickly, the section in the middle seems to have a gap on the right side as it quickly tries to match the width that's been set for it.
I'm guessing only the right side is affected because it is positioned absolute and the left value has already been set, whereas the right side can essentially do what it needs to to match it's final state.
I've tried a bunch of different things to get it to work(changing values, parent container flex, positioning, etc), but with no luck. I'm not really sure how I can remedy this situation and I wanted to see what clever solutions I've missed.
Here's all the code, although I would focus more on the section commented out as "mid". If the snippet won't run, I've included it here on codepen
const left = document.querySelector(".left");
const mid = document.querySelector(".mid");
const right = document.querySelector(".right");
const container = document.querySelector(".container");
// ===== Hover States ======
/*
* Left Section
*/
//On Hover
left.addEventListener("mouseenter", () => {
container.classList.add("hover-left");
mid.classList.add("push-right");
});
//On Leave
left.addEventListener("mouseleave", () => {
container.classList.remove("hover-left");
mid.classList.remove("push-right");
});
/*
* Mid Section
*/
//On Hover
mid.addEventListener("mouseenter", () => {
container.classList.add("hover-mid");
});
//On Leave
mid.addEventListener("mouseleave", () => {
container.classList.remove("hover-mid");
});
/*
* Right Section
*/
//On Hover
right.addEventListener("mouseenter", () => {
container.classList.add("hover-right");
mid.classList.add("push-left");
});
//On Leave
right.addEventListener("mouseleave", () => {
container.classList.remove("hover-right");
mid.classList.remove("push-left");
});
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-btn-hover-color: rgba(161, 11, 11, 0.3);
--mid-bg-color: rgba(70, 223, 39, 0.7);
--mid-btn-hover-color: rgba(24, 92, 10, 0.3);
--right-bg-color: rgba(39, 186, 223, 0.7);
--right-btn-hover-color: rgba(10, 18, 92, 0.3);
--hover-width: 50%;
--other-width: 25%;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h2 {
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
white-space: nowrap;
}
.btn {
display: block;
position: absolute;
left: 50%;
top: 50%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .btn:hover {
background-color: var(--left-btn-hover-color);
border-color: var(--left-btn-hover-color);
}
.split.mid .btn:hover {
background-color: var(--mid-btn-hover-color);
border-color: var(--mid-btn-hover-color);
}
.split.right .btn:hover {
background-color: var(--right-btn-hover-color);
border-color: var(--right-btn-hover-color);
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: var(--container-bg-color);
}
.split {
position: relative;
width: 33.3333333333333333333%;
height: 100%;
overflow: hidden;
}
.split.left {
position: absolute;
left: 0;
}
.split.left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--left-bg-color);
}
.split.mid {
position: absolute;
left: 33.3333333333333333333%;
}
.split.mid:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--mid-bg-color);
}
.split.right {
position: absolute;
right: 0;
}
.split.right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--right-bg-color);
}
.split.left,
.split.mid,
.split.right,
.split.left:before,
.split.mid:before,
.split.right:before {
transition: var(--speed) all ease-in-out;
}
/*
left
*/
.hover-left .left {
width: var(--hover-width);
}
.hover-left .mid {
width: var(--other-width);
}
.hover-left .mid:before {
z-index: 2;
}
.hover-left .right {
width: var(--other-width);
}
.hover-left .right:before {
z-index: 2;
}
/*
mid
*/
.hover-mid .mid {
left: 25%;
width: var(--hover-width);
}
.hover-mid .left {
width: var(--other-width);
}
.hover-mid .left:before {
z-index: 2;
}
.hover-mid .right {
width: var(--other-width);
}
.hover-mid .right:before {
z-index: 2;
}
/*
Right
*/
.hover-right .right {
width: var(--hover-width);
}
.hover-right .left {
width: var(--other-width);
}
.hover-right .left:before {
z-index: 2;
}
.hover-right .mid {
width: var(--other-width);
}
.hover-right .mid:before {
z-index: 2;
}
/* Push Mid */
.split.push-right {
left: 50%;
}
.split.push-left {
left: 25%;
}
#media screen and (max-height: 700px){
h2{
top: 10%;
}
.btn{
top: 60%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Test</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="split left">
<h2>Option1</h2>
Learn More
</div>
<div class="split mid">
<h2>Option 2</h2>
Learn More
</div>
<div class="split right">
<h2>Option 3</h2>
Learn More
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
I would ditch the javascript and do this with css - flexbox. You may have ran into trouble trying it the first time because of absolutely positioned elements.
To set this up I removed all your absolutely positioned classes, set the parent container to display flex.
flex shorthand (flex-grow | flex-shrink | flex-basic)\
More Information: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Then you can tell your slides flex: 1 0 var(--other-width); Even though your other width is only 25% they will fill empty space automatically because the 1 tells them they can grow.
Then you can create a .slides:hover class with flex:0 0 var(--hover-width); This will expand the hovered slide to 50%. A 1 to grow in this class isn't necessary if you never want it to be over the width of your --hover-width.
Hope this helps!
:root {
--container-bg-color: #333;
--left-bg-color: rgba(223, 39, 39, 0.7);
--left-btn-hover-color: rgba(161, 11, 11, 0.3);
--mid-bg-color: rgba(70, 223, 39, 0.7);
--mid-btn-hover-color: rgba(24, 92, 10, 0.3);
--right-bg-color: rgba(39, 186, 223, 0.7);
--right-btn-hover-color: rgba(10, 18, 92, 0.3);
--hover-width: 50%;
--other-width: 25%;
--speed: 1000ms;
}
html,
body {
padding: 0;
margin: 0;
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h2 {
font-size: 4rem;
color: #fff;
position: absolute;
left: 50%;
top: 30%;
transform: translateX(-50%);
white-space: nowrap;
}
.btn {
display: block;
position: absolute;
left: 50%;
top: 50%;
height: 2.5rem;
padding-top: 1.3rem;
width: 15rem;
text-align: center;
color: #fff;
border: #fff solid 0.2rem;
font-size: 1rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transform: translateX(-50%);
}
.split.left .btn:hover {
background-color: var(--left-btn-hover-color);
border-color: var(--left-btn-hover-color);
}
.split.mid .btn:hover {
background-color: var(--mid-btn-hover-color);
border-color: var(--mid-btn-hover-color);
}
.split.right .btn:hover {
background-color: var(--right-btn-hover-color);
border-color: var(--right-btn-hover-color);
}
.container {
display: flex;
width: 100%;
height: 100%;
background: var(--container-bg-color);
}
.split {
position: relative;
flex:1 0 var(--other-width);
height: 100%;
overflow: hidden;
}
.split:hover {
flex: 1 0 var(--hover-width);
}
.split.left:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--left-bg-color);
}
.split.mid:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--mid-bg-color);
}
.split.right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: var(--right-bg-color);
}
.split.left,
.split.mid,
.split.right,
.split.left:before,
.split.mid:before,
.split.right:before {
transition: var(--speed) all ease-in-out;
}
<div class="container">
<div class="split left">
<h2>Option1</h2>
Learn More
</div>
<div class="split mid">
<h2>Option 2</h2>
Learn More
</div>
<div class="split right">
<h2>Option 3</h2>
Learn More
</div>
</div>

smooth scrolling to a paragraph when press button

I need a code to make a smooth scroll to a div. I have tried a lot of codes, but no one works. I don't think that you understand. I will put a download link. http://www58.zippyshare.com/v/XB5RjjId/file.html
#headercb {
overflow: hidden;
margin: 0 auto;
display: block;
}
#navbar {
width: 100%;
margin: 0 auto;
position: fixed;
}
h2.about {
text-align: center;
font-family: 'Righteous', cursive;
}
button.about {
background-color: rgba(0, 0, 0, 0.7);
top: 0;
color: white;
font-family: Sans-serif;
font-size: 20px;
width: 100%;
line-height: 60px;
margin: 0 auto;
text-align: center;
border: 0;
transition: all 0.8s ease 0s;
font-family: 'Righteous', cursive;
height: 100px;
text-shadow: 0 0 15px #7c9630;
}
button:hover {
background: #7c9630;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 37px 50px 0 rgba(0, 0, 0, 0.7);
}
button.about:after {
content: "";
position: absolute;
top: 0px;
left: 15px;
width: 0%;
height: 100%;
background-color: rgba(255, 255, 255, 0.4);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
p.despre {
margin: 0 auto;
}
.pg2.col-sm-3 {
padding-right: 70px;
}
.pg3.col-sm-3 {
padding-left: 70px;
}
#content1pg1 {
margin: 0 auto;
width: 100%;
height: 500px;
background-image: url('poza11.png');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin-top: 30px;
}
h2.content1pg1 {
color: white;
text-align: center;
margin: 0 auto;
overflow: hidden;
padding-top: 120px;
display: block;
font-family: 'Lobster Two', cursive;
font-size: 40px;
}
p.content1pg1 {
color: white;
text-align: center;
margin: 0 auto;
overflow: hidden;
font-size: 20px;
padding-top: 120px;
width: 70%;
}
<html>
<head>
<link rel="shortcut icon" href="clg.png" />
<title>Restaurant cu specific romanesc si italian in Bucuresti</title>
<link rel="stylesheet" href="cb.css">
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
</head>
<body>
<div id="navbar">
<div class="row">
<div class="col-sm-3 pg1">
<a href="#content1pg1">
<button type="button" class="about">DESPRE RESTAURANT</button>
</a>
</div>
<div class="col-sm-3 pg2">
<button type="button" class="about">EVENIMENTE</button>
</div>
<div class="col-sm-3 pg3">
<button type="button" class="about">CONTACT SI REZERVARI</button>
</div>
<div class="col-sm-3 pg4">
<button type="button" class="about">GALERIE FOTO</button>
</div>
</div>
</div>
<div id="headercb">
<img class="headerlogo" src="cg.png">
</div>
<div id="content1pg1">
<h2 class="content1pg1">Restaurant cu specific romanesc si italian
</h2>
<p class="content1pg1">Bine ati venit la Celebration Garden! Veti gasi aici un festival de arome care sa va poarte departe de viata agitata a orasului. Va propunem o experienta speciala
</div>
</body>
</html>
Here is a working example
Use this script and be careful renaming the id in the script. in this example click-event is attched as this $("#navbarlist a").click(function(evn)
$.scrollTo = $.fn.scrollTo = function(x, y, options){
if (!(this instanceof $)) return $.fn.scrollTo.apply($('html, body'), arguments);
options = $.extend({}, {
gap: {
x: 0,
y: 0
},
animation: {
easing: 'swing',
duration: 600,
complete: $.noop,
step: $.noop
}
}, options);
return this.each(function(){
var elem = $(this);
elem.stop().animate({
scrollLeft: !isNaN(Number(x)) ? x : $(y).offset().left + options.gap.x,
scrollTop: !isNaN(Number(y)) ? y : $(y).offset().top + options.gap.y
}, options.animation);
});
};
////////////////////////////////////////////////////////////////////////////////////////////
// Smooth Scrolling //
////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
/**
* This part causes smooth scrolling using scrollto.js
* We target all a tags inside the nav, and apply the scrollto.js to it.
*/
$("#navbarlist a").click(function(evn){
evn.preventDefault();
$('html,body').scrollTo(this.hash, this.hash);
});
});
#about-section{
height:700px;
width:100%;
background-color:green;
}
#about-section{
height:700px;
width:100%;
background-color:green;
}
#portfolio-section{
height:700px;
width:100%;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="navbarlist">
<li>About</li>
<li>Projects</li>
</ul>
</div>
<div id="about-section">
</div>
<div id="portfolio-section">
</div>
Try to look at jQuery.animate(). Here is an example with which you can scroll 400 units from top.
$("body, html").animate({
scrollTop: 400
}, 800);
<script>
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".about").offset().top},
'slow');
});
</script>
look here: https://jsfiddle.net/00vmkcLu/

How to use jPlayer with Wavesurfer-JS as audio player?

I'm using jPlayer as audio player for my music library and Wavesurfer-JS for draw my waveforms.
Waveforms are generated by using JSON data like this (long code in the snippet):
wavesurfer.backend.peaks = [...];
wavesurfer.drawBuffer();
Eg. This is my audio player so far:
$(document).ready(function(){
var playlist = [{
title:"Hidden",
artist:"Miaow",
mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",
poster: "https://i.imgur.com/sCbrzQa.png"
},{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
poster: "https://i.imgur.com/lXvsuBu.png"
},{
title:"Bubble",
m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg",
poster: "https://i.imgur.com/klJKSVZ.jpg"
}];
var cssSelector = {
jPlayer: "#jquery_jplayer",
cssSelectorAncestor: ".music-player"
};
var options = {
swfPath: "http://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf",
supplied: "ogv, m4v, oga, mp3",
volumechange: function(event) {
$( ".volume-level" ).slider("value", event.jPlayer.options.volume);
},
timeupdate: function(event) {
$( ".progress" ).slider("value", event.jPlayer.status.currentPercentAbsolute);
}
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
var PlayerData = $(cssSelector.jPlayer).data("jPlayer");
// Create the volume slider control
$( ".volume-level" ).slider({
animate: "fast",
max: 1,
range: "min",
step: 0.01,
value : $.jPlayer.prototype.options.volume,
slide: function(event, ui) {
$(cssSelector.jPlayer).jPlayer("option", "muted", false);
$(cssSelector.jPlayer).jPlayer("option", "volume", ui.value);
}
});
// Create the progress slider control
$( ".progress" ).slider({
animate: "fast",
max: 100,
range: "min",
step: 0.1,
value : 0,
slide: function(event, ui) {
var sp = PlayerData.status.seekPercent;
if(sp > 0) {
// Move the play-head to the value and factor in the seek percent.
$(cssSelector.jPlayer).jPlayer("playHead", ui.value * (100 / sp));
} else {
// Create a timeout to reset this slider to zero.
setTimeout(function() {
$( ".progress" ).slider("value", 0);
}, 0);
}
}
});
});
*, *:before, *:after {
box-sizing: border-box;
}
html {
min-height: 100%;
}
body {
background: #eee;
font-family: "Open Sans", sans-serif;
}
.music-player {
position: relative;
width: 350px;
height: 370px;
margin: 50px auto;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
border-radius: 10px;
background: #222;
overflow: hidden;
z-index: 0;
}
.music-player img {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: -1;
display: block;
width: 100% !important;
height: 100% !important;
-webkit-filter: blur(2px);
filter: blur(2px);
}
.music-player .info {
width: 100%;
height: 120px;
background: #222;
background: rgba(0, 0, 0, 0.8);
text-align: center;
position: relative;
}
.music-player .info .jp-playlist li {
display: none;
}
.music-player .info .jp-playlist li a {
font-size: 30px;
font-weight: 300;
text-decoration: none;
color: #fff;
color: rgba(225, 225, 225, 0.4);
}
.music-player .info .jp-playlist li a span {
font-size: 14px;
display: block;
margin-top: 10px;
}
.music-player .info .jp-playlist li.jp-playlist-current {
display: block;
}
.music-player .info .jp-playlist li .jp-free-media, .music-player .info .jp-playlist li .jp-playlist-item-remove {
display: none;
}
.music-player .info .left, .music-player .info .right {
width: 25px;
position: absolute;
top: 30px;
left: 30px;
}
.music-player .info .right {
left: auto;
right: 30px;
}
.music-player .info [class^="icon-"] {
margin: 0 0 10px;
}
.music-player .info .center {
padding: 6px 0 0;
}
.music-player .progress, .music-player .volume-level {
width: 100%;
height: 5px;
display: block;
background: #ccc;
position: absolute;
bottom: 0px;
cursor: pointer;
border: none;
}
.music-player .progress .ui-slider-range, .music-player .volume-level .ui-slider-range {
display: block;
background: #ed553b;
height: 5px;
border-radius: 0;
}
.music-player .progress .ui-slider-handle, .music-player .volume-level .ui-slider-handle {
position: absolute;
top: -8px;
width: 8px;
height: 22px;
background: url("//i.imgur.com/tsqwz1N.png") no-repeat center;
border: none;
outline: none;
margin: 0 0 0 -3px;
cursor: move;
}
.music-player .controls {
text-align: center;
width: 100%;
height: 190px;
background: #982e4b;
background: rgba(152, 46, 75, 0.6);
}
.music-player .controls .current {
font-size: 48px;
color: #fff;
color: rgba(225, 225, 225, 0.4);
padding: 15px 0 20px;
}
.music-player .controls .play-controls a {
display: inline-block;
width: 35px;
height: 40px;
margin: 0 30px;
}
.music-player .controls .volume-level {
position: relative;
bottom: auto;
width: 200px;
height: 2px;
margin: 30px auto 0;
background: rgba(225, 225, 225, 0.3);
}
.music-player .controls .volume-level .ui-slider-range {
height: 2px;
}
.music-player .controls .volume-level .ui-slider-handle {
top: -8px;
margin-left: -9px;
width: 22px;
height: 22px;
background-image: url("http://image.flaticon.com/icons/svg/106/106874.svg");
}
.music-player .controls .volume-level .icon-volume-up, .music-player .controls .volume-level .icon-volume-down {
position: absolute;
right: -34px;
top: -8px;
width: 22px;
}
.music-player .controls .volume-level .icon-volume-down {
right: auto;
left: -27px;
}
[class^="icon-"] {
width: 18px;
height: 18px;
background: url("//i.imgur.com/E09T8tf.png") no-repeat center;
display: block;
}
.icon-shuffle {
background-image: url("http://image.flaticon.com/icons/svg/148/148739.svg");
}
.icon-heart {
background-image: url("http://image.flaticon.com/icons/svg/138/138533.svg");
}
.icon-repeat {
background-image: url("http://image.flaticon.com/icons/svg/137/137485.svg");
}
.icon-share {
background-image: url("http://image.flaticon.com/icons/svg/189/189676.svg");
}
.icon-previous {
background-image: url("http://image.flaticon.com/icons/svg/137/137518.svg");
}
.icon-play {
background-image: url("http://image.flaticon.com/icons/svg/148/148744.svg");
}
.icon-pause {
background-image: url("http://image.flaticon.com/icons/svg/189/189639.svg");
}
.icon-next {
background-image: url("http://image.flaticon.com/icons/svg/137/137517.svg");
}
.icon-volume-up {
background-image: url("http://image.flaticon.com/icons/svg/149/149139.svg");
}
.icon-volume-down {
background-image: url("http://image.flaticon.com/icons/svg/109/109699.svg");
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,700" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/jquery.jplayer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/add-on/jplayer.playlist.min.js"></script>
</head>
<div class="music-player">
<div style="background-image: url(https://image.freepik.com/free-vector/welcome-summer-badge-on-blurry-background_23-2147511412.jpg);" class="album"></div>
<div class="info">
<div class="left">
</div>
<div class="center">
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="right">
</div>
<div class="progress"></div>
</div>
<div class="demo">
<div id="waveform"></div>
<script>
var ctx = document.createElement('canvas').getContext('2d');
var linGrad = ctx.createLinearGradient(0, 64, 0, 200);
linGrad.addColorStop(0.5, 'rgba(255, 255, 255, 1.000)');
linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: linGrad,
progressColor: 'hsla(200, 100%, 30%, 0.5)',
cursorColor: '#fff',
normalize: true,
backend: 'MediaElement',
height:50,
barWidth: 3
});
//Set peaks
wavesurfer.backend.peaks = [0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108];
//Draw peaks
wavesurfer.drawBuffer();
</script>
</div>
<div class="controls">
<div class="current jp-current-time">00:00</div>
<div class="play-controls">
</div>
<div class="volume-level">
</div>
</div>
<div id="jquery_jplayer" class="jp-jplayer"></div>
</div>
As you can see from this snippet the progress bar works only for jPlayer.
I want to keep the jPlayer as it is and use my waveform as progress bar.
How can I use as progress bar my waveform without loading the song from Wavesurfer-JS but only using my pre-generated waveform with the jPlayer?

Categories