My Custom made Seek Bar is not working Properly HTML5? - javascript

I am making a video player in React.js I am trying to make custom seekbar with sync to video but my seek is not working properly as expected while user dragging see this GIF.Seek bar is not responding to the user movement it is going back to the origin position.Hope this Gif will help you to identify the problem
My React Code.
import React, {Component} from 'react'
import './index.css'
class SampleVideo extends Component{
state = {
play:false,
pause:false,
onHover:false,
isMouseDown:false,
seekedPercentage:"0%"
};
componentDidMount(){
this.video.addEventListener('timeupdate', this.updateProgressBar, false);
}
updateProgressBar = () => {
let percentage = Math.floor((100 / this.video.duration) * this.video.currentTime);
this.setState({
seekedPercentage:`${percentage}%`
});
};
handleVideoPausePlay = () => {
return this.state.play ? this.pause() : this.play();
};
play = () => {
this.video.play();
this.setState({
play:true,
pause:false
})
};
pause = () => {
this.video.pause()
this.setState({
play:false,
pause:true
})
};
handleSeek = e => {
if(this.state.isMouseDown){
console.log("Dragginf")
let vid_duration = e.nativeEvent.offsetX / this.seek.offsetWidth;
let percentage = vid_duration * 100;
this.video.currentTime = vid_duration * this.video.duration;
this.setState({
seekedPercentage:`${percentage}%`
})
}else {
console.log('i don;t Move ')
}
};
handleMouseDown = e => {
this.setState({ isMouseDown:true })
};
handleMouseUp = e => {
this.setState({ isMouseDown:false });
};
render(){
// console.log(this.state);
return(
<div className="container">
<div onMouseEnter={e => this.setState({onHover:true})} onMouseLeave={e => this.setState({ onHover:false })} className="video-wrapper">
<video ref={(c) => this.video = c} width="100%" height="100%" controls muted={true}>
<source src="vid/test.MKV" type="video/mp4" />
<source src="vid/test.MKV" type="video/ogg" />
Your browser does not support the video tag.
</video>
{ this.state.onHover ? <div className="video-controls-container">
<div className="vid-title">
</div>
<div className="vid-control">
<div className="vid-seekbar">
<div ref={s => this.seek = s} onMouseUp={this.handleMouseUp} onMouseDown={this.handleMouseDown} onMouseMove={this.handleSeek} className="video-seek-bar">
<div style={{width:this.state.seekedPercentage}} className="videobarlevelbar">
</div>
<div className="seekControl">
<div className="seekImage"><img src="/css/0d20f779-fd6f-49e2-903a-aed7380a00a2.webp" alt="dsvds" /></div>
<div className="seekRound" />
</div>
</div>
</div>
<div className="vid-mini-controller">
{ !this.state.play ? <div onClick={this.handleVideoPausePlay} className="play-btn">
<svg height="32px" style={{enableBackground: 'new 0 0 24 32'}} version="1.1" viewBox="0 0 24 32" width="24px" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"><g id="Layer_1" /><g id="play"><polygon points="0,0 24,16 0,32 " style={{fill: '#fff'}} /></g></svg>
</div> : <div onClick={this.handleVideoPausePlay} className="pause-btn">
<svg height="32px" id="svg2" width="32px" version="1.1" viewBox="0 0 32 32" xmlSpace="preserve">
<g id="background">
<rect height="32" width="32" fill="none"/>
</g>
<g id="pause">
<g>
<rect fill="#fff" height="24" width="8" x="20" y="4"/>
<rect fill="#fff" height="24" width="8" x="4" y="4"/>
</g>
</g>
</svg>
</div> }
</div>
</div>
</div> : "" }
</div>
</div>
)
}
}
export default SampleVideo


I just tried your code without the css part, and it works fine on a video with the default html5 player. Does it work with a video or do you have the same issue ?
Could you post your css so I can give it a try ?

Related

get access to html tags inside innerHTML | javascript

I'm trying to create variable from a class inside the innerHTML down here:
ruleData.forEach((rule) => {
rulesWrapper.innerHTML += `
<div class='rule'>
<div id='rule-title' class='rule-title' onclick='showRuleDetail(${counter})'>
<div>
<p>${counter}.</p>
<p>${rule.title}</p>
</div>
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class='rule-body'>
<p>${rule.body}</p>
</div>
</div>
`;
counter++;
});
For example I want to target rule-body class inside this innerHTML and change it's background
like this:
let ruleBody = document.querySelectorAll('.rule-body');
ruleBody[0].style.background = 'red';
But this doesn't work
,I get this error:
TypeError: Cannot read properties of undefined (reading 'style')

You can use DOMParser for this
ruleData.forEach((rule) => {
let rule_html = `
<div class='rule'>
<div id='rule-title' class='rule-title' onclick='showRuleDetail(${counter})'>
<div>
<p>${counter}.</p>
<p>${rule.title}</p>
</div>
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class='rule-body'>
<p>${rule.body}</p>
</div>
</div>
`;
let rule = new DOMParser().parseFromString(rule_html,"text/xml").firstChild;
rule.querySelector('.rule-body').style.background = 'red';
rulesWrapper.appendChild(rule);
counter++;
});
Also if the counter is the index of the ruleData you can use forEach's index as well. (rule,i)=>{

You must access the .rule-body after the innerHTML and make sure it is indeed in the DOM. Then, this should work perfectly fine:
const container = document.querySelector("#container");
const button = document.querySelector("#button");
function exec() {
container.innerHTML = `<div class='rule-body'>yo</div>`;
const ruleBody = document.querySelectorAll('.rule-body');
ruleBody[0].style.backgroundColor = 'red';
}
button.onclick = exec;
<div id="container">
</div>
<button id="button">
CLICK TO INSERT
</button>

I suggest to map and delegate
const ruleData = [{"title":"Title 1","body":"This is the body"},{"title":"Title 2","body":"This is the body"}]
const rulesWrapper = document.getElementById("rulesWrapper");
rulesWrapper.innerHTML = ruleData.map((rule,i) => `
<div class='rule'>
<div class='rule-title' data-idx='${i}'>
<div>
<p>${i}.</p>
<p>${rule.title}</p>
</div>
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 5.5L7.5 10.5L12.5 15.5" stroke="#1E1E20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class='rule-body'>
<p>${rule.body}</p>
</div>
</div>
`).join("");
rulesWrapper.addEventListener("click", function(e) {
const tgt=e.target.closest(".rule-title");
if (tgt) console.log(tgt.dataset.idx)
})
<div id="rulesWrapper"></div>

Both click() and dispatchEvent does not trigger automatic click in reactjs

I have a react component that has an SVG image. I have divided the SVG into multiple react box. I have query selector which selects all the react box and JS click event to auto click that react.
I tried working with both click and dispatch event. But none of them works in my scenario.
Below is the section of the code I am working on.
componentDidMount() {
var element = document.querySelectorAll("square");
for(var i = 0; i<element.length; i++) {
element[i].dispatchEvent(new Event('click'));
}
}
render(){
return (
<React.Fragment>
<div className="col-12">
<svg viewBox="0 0 100 100">
<image xlinkHref={imageFile} height="100%" width="100%" />
<g><rect className="square" x="10" y="10" width="20" height="10" fillOpacity=".2" onClick={() =>console.log("clicked")}></rect> </g>
<g><rect className="square" x="30" y="10" width="20" height="10" fillOpacity=".4" onClick={() =>console.log("clicked")}></rect> </g>
</svg>
</div>
</React.Fragment>
)
}
I also tried using the click() function and did not work for SVG images and also is there a way we could automate a click in each square every 10 seconds?

You forgot a . in the query selector so the node list was actually empty.
If you want to automate a click in each square every 10 seconds, this code does the trick:
const elements = document.querySelectorAll(".square");
const intervalsIdentifiers = Array.from(elements).map(x => setInterval(() => x.dispatchEvent(new Event('click')), 10000));
The dispatchEvent method is indeed the only way, because the rect element doesn't have a click method (only HTML elements do, not SVG elements) as demonstrated below:
console.log('click' in SVGRectElement.prototype); // false
console.log(HTMLElement.prototype.hasOwnProperty('click')); // true
console.log(HTMLButtonElement.prototype instanceof HTMLElement); // true (a button has the click method)
console.log(SVGRectElement.prototype instanceof HTMLElement); // false
The full working code (native JavaScript but should work as well with React in the componentDidMount hook):
const elements = document.querySelectorAll(".square");
const intervalsIdentifiers = Array.from(elements).map(x => setInterval(() => x.dispatchEvent(new Event('click')), 10000));
<div className="col-12">
<svg viewBox="0 0 100 100">
<image xlink:Href="https://img-19.ccm2.net/8vUCl8TXZfwTt7zAOkBkuDRHiT8=/1240x/smart/b829396acc244fd484c5ddcdcb2b08f3/ccmcms-commentcamarche/20494859.jpg" height="100%" width="100%" />
<g><rect class="square" x="10" y="10" width="20" height="10" fillOpacity=".2" onclick="console.log('clicked')"></rect> </g>
<g><rect class="square" x="30" y="10" width="20" height="10" fillOpacity=".4" onclick="console.log('clicked')"></rect> </g>
</svg>
</div>

Integrate VAST in plyr Video Player

DEVELOPER LEVEL - Beginner
Have recently started programming. Only Familiar with HTM/CSS/JS & NodeJS.
THE PROJECT -
I'm using this ↓ code to play files using plyr Video player in my website.
LINK TO CODEPEN (The below snippet is very lengthy, please refer to the code on codepen, this will help you guys to work this out more easily)
THE PROBLEM -
How do I integrate VAST/VPAID with the Video Players in the above case, to how it is done on this codepen page → VAST Integrated DEMO
Any kind of Input is appreciated.
Here is the link to the player docs, if it helps - https://github.com/sampotts/plyr
$(document).ready(function() {
VideoAudioHandler();
});
var StopAllVideoNotv = function(v) {
$(plyr.get()).each(function() {
if (this.getContainer() != v.detail.plyr.getContainer()) {
this.pause();
}
});
};
var GetPlayingVideo = function() {
$("video").filter(function() {
var video = $(this).get(0);
return !video.paused;
});
};
var VideoAudioHandler = function() {
$("video").each(function() {
$('<div class="videoContainer"></div>').insertBefore(this).append(this);
$(this).attr("video-id", "video-" + Date.now());
});
plyr.setup(document.querySelectorAll("video"), {
enabled: true
});
$(plyr.get()).each(function() {
this.on('playing', function(event) {
StopAllVideoNotv(event);
CloseSmallVideo();
});
});
$(window).scroll(function() {
var PlayingVideo = $(plyr.get()).filter(function() {
return !this.isPaused();
})[0];
// none of videos is playing
if (PlayingVideo == undefined) return 0;
//if video is playing and not visible to screen and no small video
if (!$(PlayingVideo.getContainer()).visible(true) && $(".SmallVideo").length == 0) {
PlayingVideo.pause();
var n = $("<div class='SmallVideo'></div>");
n.attr("related-video", $(PlayingVideo.getMedia()).attr("video-id"));
var sv = $(PlayingVideo.getMedia()).clone();
sv.get(0).currentTime = PlayingVideo.getCurrentTime();
n.append(sv);
n.appendTo("body");
plyr.setup('.SmallVideo', {
enabled: true,
autoplay: true
});
$('<button type="button" onclick="CloseSmallVideo(this)" class="closeSmallVideoBtn" aria-label="Play"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve"> <g> <path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg></button>').appendTo('.SmallVideo .plyr');
}
//if video is playing and visible to screen
else {
}
});
};
var CloseSmallVideo = function(e) {
if ($(".SmallVideo").length == 0) return 0;
var v = plyr.get($(".SmallVideo .plyr").get(0));
v[0].pause();
$(".SmallVideo").remove();
};
$(document).ready(function() {
VideoAudioHandler();
}
);
var StopAllVideoNotv=function(v) {
$(plyr.get()).each(function() {
if (this.getContainer() !=v.detail.plyr.getContainer()) {
this.pause();
}
}
);
}
;
var GetPlayingVideo=function() {
$("video").filter(function() {
var video=$(this).get(0);
return !video.paused;
}
);
}
;
var VideoAudioHandler=function() {
$("video").each(function() {
$('<div class="videoContainer"></div>').insertBefore(this).append(this);
$(this).attr("video-id", "video-"+ Date.now());
}
);
plyr.setup(document.querySelectorAll("video"), {
enabled: true
}
);
$(plyr.get()).each(function() {
this.on('playing', function(event) {
StopAllVideoNotv(event);
CloseSmallVideo();
}
);
}
);
$(window).scroll(function() {
var PlayingVideo=$(plyr.get()).filter(function() {
return !this.isPaused();
}
)[0];
// none of videos is playing
if(PlayingVideo==undefined) return 0;
//if video is playing and not visible to screen and no small video
if(!$(PlayingVideo.getContainer()).visible(true) && $(".SmallVideo").length==0) {
PlayingVideo.pause();
var n=$("<div class='SmallVideo'></div>");
n.attr("related-video", $(PlayingVideo.getMedia()).attr("video-id"));
var sv=$(PlayingVideo.getMedia()).clone();
sv.get(0).currentTime=PlayingVideo.getCurrentTime();
n.append(sv);
n.appendTo( "body");
plyr.setup('.SmallVideo', {
enabled: true, autoplay: true
}
);
$('<button type="button" onclick="CloseSmallVideo(this)" class="closeSmallVideoBtn" aria-label="Play"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve"> <g> <path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg></button>').appendTo('.SmallVideo .plyr');
}
//if video is playing and visible to screen
else {}
}
);
}
;
var CloseSmallVideo=function(e) {
if($(".SmallVideo").length==0) return 0;
var v=plyr.get($(".SmallVideo .plyr").get(0));
v[0].pause();
$(".SmallVideo").remove();
}
;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-visible/1.2.0/jquery.visible.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/2.0.18/plyr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/2.0.18/plyr.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title">
<div class="caption">
<h3 class="heading">المقدمة</h3>
</div>
</div>
<div class="portlet-body" style="height: auto;">
<p>بل أما فسقط تمهيد, من على ونتج الشمل الإمتعاض. و سابق الأثنان وقد. انه حاول والفلبين عن, ثم جمعت وبولندا بين, دون ٣٠ تونس قدما عشوائية. دنو عن فرنسية التكاليف. كما إختار استراليا، التغييرات هو, شيء بـ طوكيو وقوعها، للسيطرة. كل تكبّد والإتحاد
الخارجية ذات, مئات الأوضاع ما وتم.
</p>
</div>
</div>
</div>
<div class="col-md-12">
<video width="640" height="360" poster="resources/poster.PNG" preload="none" controls playsinline webkit-playsinline>
<source src="https://tmdcdn.s3.amazonaws.com/Big_Buck_Bunny_1080_10s_2MB.mp4">
</video>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>إذ مما الأحمر بتخصيص. من الضغوط المعاهدات وبالتحديد، تعد, شدّت مقاطعة الجديدة، دار تم, عرض أن الجوي غينيا والتي. الأمم علاقة ان ولم, عل مدينة الطريق يكن. يكن و نقطة وتنصيب, ودول فهرست إذ يبق, أخر مع النفط انتصارهم التغييرات. الإمداد بريطانيا وصل
عن.
</p>
</div>
<div class="col-md-12">
<video width="640" height="360" poster="resources/poster.PNG" preload="none" controls playsinline webkit-playsinline>
<source src="https://tmdcdn.s3.amazonaws.com/Big_Buck_Bunny_1080_10s_2MB.mp4">
</video>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title">
<div class="caption">
<h3 class="heading">أعمدة نصوص</h3>
</div>
</div>
<div class="portlet-body" style="height: auto;">
<main class="entry-content">
<p><em>كُلفة</em> والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار عقبت قد كان, وبعض الإنزال للإتحاد وصل مع. ما
وزارة عملية الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.
<br>كُلفة والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار
عملية الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.</p>
</main>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-title">
<div class="caption">
<h3 class="heading">أعمدة نصوص</h3>
</div>
</div>
<div class="portlet-body" style="height: auto;">
<main class="entry-content">
<p><em>كُلفة</em> والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار عقبت قد كان, وبعض الإنزال للإتحاد وصل مع. ما
وزارة عملية الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.
<br>كُلفة والمعدات مكن في, عل دنو تطوير لأداء وانهاء. لإعادة ابتدعها ما أخر, فقد أن فسقط لكون! كل جديداً البولندي ضرب, الستار بتخصيص عن بلا! بأيدي لإنعدام ثم الى, أملاً ويتّفق يبق إذ! خيار عقبت قد كان, وبعض الإنزال للإتحاد وصل مع. ما وزة الستار يكن, هو دار تصفح مسارح للمجهود, أن الخطّة وحرمان بالإنزال تحت.</p>
</main>
</div>
</div>
</div>
<div class="col-md-12">
<video width="640" height="360" poster="resources/poster.PNG" preload="none" controls playsinline webkit-playsinline>
<source src="https://tmdcdn.s3.amazonaws.com/Big_Buck_Bunny_1080_10s_2MB.mp4">
</video>
</div>
</div>
</div>

Cannot pass multiple attributes of an elements to a java script function

I am trying to pass the id and name attributes from below elements to handle Click event but only the id is being passed. When debugging name shows "undefined". Did I miss anything
function App() {
const [id, setId] = React.useState('')
const [name, setName] = React.useState('')
const handleClick = event => {
debugger
setName(event.target.name)
setId(event.target.id)
}
return (
<form>
<svg width="800" height="250">
<rect onClick={handleClick} id="0" name="Rectangle" x="10" y="10" width="150" height="150" fill="green" />
<circle onClick={handleClick} id="1" name="Circle" cx="300" cy="90" r="75" fill="red" />
<polygon onClick={handleClick} id="2" name="Triangle" points="500,10 600,160 400,160" style={{ fill: "blue" }} />
</svg>
<Display id={id} name={name} />
</form>
)
}
Debugging screen shot below

const handleClick = event => {
// debugger
setName(event.target.id);
setId(event.target.getAttribute("name"));
};
demo
https://codesandbox.io/s/frosty-breeze-emiwc?file=/src/App.js

Please try this:
<rect onClick={(e) => {
this.clickMe(e, {id: "0", name: "Rectangle"})
}}>Click Me</rect>
The function body
function clickMe(event, attribute){
console.log(attribute.id);
console.log(attribute.name);
}

How to make multiple animations in one page with Lazy Line Painter

I'm making a card where I want to put svgs with this drawing effect. I found a very good tool that makes this for me, I download any svg from the internet and it makes the effect for me and gives me the code to use on my page.
It works great but when I put more than one svg on the page, the first one stops working. It's only working if I only use one svg.
Am I doing something wrong? Is there any tool that also does this?
Note that on the first card, svg is gone.
https://pastebin.com/DhR8kfGU
<div class="card d-xl-flex text-center d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="casa" x="0px" y="0px" viewBox="0 0 58.365 58.365" style="enable-background:new 0 0 58.365 58.365;" xml:space="preserve" width="512px" height="512px" class="lazy-line-painter" data-llp-composed="true">
<g>
<path d="M57.863,26.632L29.182,0L0.502,26.632c-0.404,0.376-0.428,1.009-0.052,1.414c0.374,0.404,1.009,0.427,1.413,0.052 l3.319-3.082v33.349h16h16h16V25.015l3.319,3.082c0.192,0.179,0.437,0.267,0.681,0.267c0.269,0,0.536-0.107,0.732-0.319 C58.291,27.641,58.267,27.008,57.863,26.632z M23.182,56.365v-16c0-3.309,2.691-6,6-6s6,2.691,6,6v16H23.182z M51.182,56.365h-14 v-16c0-4.411-3.589-8-8-8s-8,3.589-8,8v16h-14V23.158l22-20.429l22,20.429V56.365z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="casa-0" data-llp-duration="2000" data-llp-delay="0" fill-opacity="0" style="" />
</g>
</svg>
<p class="text-center d-flex flex-column m-xl-3 title">
Residencial
</p>
<p class="card-information">Gás para sua casa</p>
<p class="m-1 card-information">P 13</p>
<p class=" card-information">P 45</p>
Saiba mais
</div>
<div class="card d-xl-flex text-center d-flex justify-content-center align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="tent" x="0px" y="0px" viewBox="0 0 483.32 483.32" style="enable-background:new 0 0 483.32 483.32;" xml:space="preserve" width="512px" height="512px" class="lazy-line-painter" data-llp-composed="true">
<g>
<g>
<g>
<rect x="341.664" y="465.66" width="16" height="16" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-0" data-llp-duration="890" data-llp-delay="0" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<rect x="313.674" y="338.617" transform="matrix(0.8805 -0.4741 0.4741 0.8805 -150.0898 200.0408)" width="16" height="118.12" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-1" data-llp-duration="890" data-llp-delay="890" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M96.008,231.316l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48l-0.056,0.056 c-2.961-3.123-7.892-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352v25.376 L0.008,220.004l11.312,11.312l34.344-34.344v25.376L0.008,268.004l11.312,11.312l34.344-34.344v25.376L0.008,316.004 l11.312,11.312l34.344-34.344V481.66h16V292.972l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312 l-45.656-45.656v-25.376L96.008,231.316z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-2" data-llp-duration="890" data-llp-delay="1780" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M472.008,263.316l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48l-0.056,0.056 c-2.961-3.123-7.893-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352v25.376 l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v76.688l-16.8-35.416 c-1.316-2.788-4.117-4.571-7.2-4.584h-104v-60.688l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344 l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-45.656-45.656v-25.376l34.344,34.344l11.312-11.312l-48-48 l-0.056,0.056c-2.961-3.123-7.893-3.255-11.016-0.294c-0.085,0.08-0.167,0.162-0.248,0.246l-48,48l11.312,11.312l34.352-34.352 v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656l11.312,11.312l34.344-34.344v25.376l-45.656,45.656 l11.312,11.312l34.344-34.344v60.688h-112c-2.257,0.013-4.4,0.992-5.888,2.688c-0.473,0.473-0.874,1.012-1.192,1.6l-80,152 c-2.05,3.914-0.539,8.749,3.375,10.799c1.143,0.599,2.415,0.912,3.705,0.913h240v-16h-75.2l-71.552-136H392.6l64.424,136h-83.36 v16h96c4.418-0.017,7.986-3.612,7.97-8.03c-0.004-1.174-0.267-2.333-0.77-3.394l-39.2-82.808V276.972l34.344,34.344l11.312-11.312 l-45.656-45.656v-25.376L472.008,263.316z M157.664,465.66H98.912l58.752-111.624V465.66z M232.416,465.66h-58.752V354.036 L232.416,465.66z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-3" data-llp-duration="890" data-llp-delay="2670" fill-opacity="0" style="" />
</g>
</g>
<g>
<g>
<path d="M153.664,1.66c-4.418,0.001-7.999,3.583-7.998,8.002c0,2.121,0.843,4.154,2.342,5.654 c8.262,7.425,13.601,17.556,15.056,28.568c1.516,13.506-8.203,25.684-21.709,27.2c-1.825,0.205-3.667,0.205-5.491,0l0.024-0.024 c-11.012-1.455-21.143-6.794-28.568-15.056c-3.125-3.124-8.19-3.123-11.314,0.002c-1.499,1.5-2.342,3.534-2.342,5.654 c0,33.137,26.863,60,60,60s60-26.863,60-60S186.801,1.66,153.664,1.66z M193.287,80.838 c-10.592,21.871-36.908,31.015-58.778,20.423c-8.904-4.312-16.095-11.499-20.412-20.401c6.371,3.432,13.381,5.515,20.592,6.12 c12.063,1.097,23.998-3.169,32.632-11.664c13.512-14.532,15.773-36.253,5.544-53.256 C194.735,32.652,203.878,58.968,193.287,80.838z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#004D88" data-llp-id="tent-4" data-llp-duration="890" data-llp-delay="3560" fill-opacity="0" style="" />
</g>
</g>
</g>
</svg>
<p class="text-center m-xl-3 title">
outdoor
</p>
<p class="">Lorem Ipsum.</p>
<p class="m-1 card-information"></p>
<p class="card-information">P 2</p>
Saiba mais
</div>
<script type="text/javascript">
(function() {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
/**
* Setup your Lazy Line element.
* see README file for more settings
*/
let el = document.querySelector('#tent');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 4,
"strokeOpacity": 1,
"strokeColor": "004d88",
"strokeCap": "square"
});
myAnimation.paint();
}
}
})();
// svg prepared using Lazy Line Composer
// http://lazylinepainter.info/#composer
let wrap = document.querySelector("#tent");
let el = document.querySelector("#tent");
let myAnimation = new LazyLinePainter(el, {
ease: "easeInOutQuad"
});
// Timeline Events
myAnimation.on("start", event => {
wrap.classList.remove("tl-complete");
});
myAnimation.on("complete", event => {
wrap.classList.add("tl-complete");
});
// Path Events
myAnimation.on("start:llpface-0", event => {
event.el.classList.remove("path-complete");
});
myAnimation.on("complete:llpface-0", event => {
event.el.classList.add("path-complete");
});
el.addEventListener("click", paint, false);
function paint() {
myAnimation.paint();
}
paint();
</script>
<script type="text/javascript">
(function() {
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
/**
* Setup your Lazy Line element.
* see README file for more settings
*/
let el = document.querySelector('#casa');
let myAnimation = new LazyLinePainter(el, {
"ease": "easeLinear",
"strokeWidth": 1,
"strokeOpacity": 1,
"strokeColor": "004d88",
"strokeCap": "square"
});
myAnimation.paint();
}
}
})();
// svg prepared using Lazy Line Composer
// http://lazylinepainter.info/#composer
let wrap = document.querySelector("#casa");
let el = document.querySelector("#casa");
let myAnimation = new LazyLinePainter(el, {
ease: "easeInOutQuad"
});
// Timeline Events
myAnimation.on("start", event => {
wrap.classList.remove("tl-complete");
});
myAnimation.on("complete", event => {
wrap.classList.add("tl-complete");
});
// Path Events
myAnimation.on("start:llpface-0", event => {
event.el.classList.remove("path-complete");
});
myAnimation.on("complete:llpface-0", event => {
event.el.classList.add("path-complete");
});
el.addEventListener("click", paint, false);
function paint() {
myAnimation.paint();
}
paint();
</script>
http://lazylinepainter.info/

Categories

Resources