I have an issue with Rendro Easy Pie Chart version 2.1.6.
I've used the easy-pie-chart exact as the documents and it shows
the animation of the bars itself until getting to the right percentage.
Let's say its 45%.
The issue is that the easy pie chart is only running an animation on the bar itself and unfortunately the number is not running from 0 to 45%.
Here's my code snippet:
HTML:
<div class='circular-bar circular-bar-xs m-none mt-xs mr-md pull-right'>
<div class='chart circular-bar-chart circular-bar-container' data-percent='45'>
<label class='circular-bar-percentage-text'><span class='percent'>45</span>%</label>
</div>
</div>
CSS:
.circular-bar {
margin-bottom: 25px;
}
.circular-bar .circular-bar-chart {
position: relative;
}
.circular-bar strong {
display: block;
font-weight: 600;
font-size: 18px;
line-height: 30px;
position: absolute;
top: 35%;
width: 80%;
left: 10%;
text-align: center;
}
.circular-bar label {
display: block;
font-weight: 100;
font-size: 17px;
line-height: 20px;
position: absolute;
top: 50%;
width: 80%;
left: 10%;
text-align: center;
}
JS:
$('.circular-bar-chart').easyPieChart({
barColor: "#2baab1",
delay: 300,
size: 45,
lineWidth: 4,
trackColor: '#f2f2f2',
scaleColor: false,
scaleLength: 5,
rotate: 0,
animate: 1600,
onStart: $.noop,
onStop: $.noop
});
Here's the link of how it looks:
https://jsfiddle.net/6455nw8t/
How to solve the issue of the running number from 0 to 45% ?
Thanks in Advance!
You will have to add onStep parameter.
$('.circular-bar-chart').easyPieChart({
barColor: "#2baab1",
delay: 300,
size: 45,
lineWidth: 4,
trackColor: '#f2f2f2',
scaleColor: false,
scaleLength: 5,
rotate: 0,
animate: 1600,
onStart: $.noop,
onStop: $.noop,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
Related
Using gridstack, I can resize my widgets. However, when dragging on the widgets' handles, the widget's size will snap to specific sizes. This seems like a fixed amount. If I wanted to set the widget's size to one in between the specific sizes I am unable to do that since it snaps to that specific size.
Is there any way to change the scaling on this so the snapping can happen at smaller intervals?
Sorry, I'm quite new and I've been playing around using a demo I found on codepen, https://codepen.io/AKay/pen/GZXEJx, but am unable to figure out how to do so.
HTML:
<body>
<section class="darklue" id="demo">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Tile drop</h2>
</div>
</div>
<div class="row">
<div class="col-lg-2 grid-container sidebar-scroll">
<div class="sidebar grid-stack-1"></div>
</div>
<div class="col-lg-10 grid-container">
<div class="grid-stack grid-stack-4"></div>
</div>
</div>
</div>
</section>
</body>
CSS:
body {
background: #2c3e50;
color: #fff;
}
.sidebar {
/* background: lightblue; */
height: 100%;
}
.grid-stack {
/* background: #66a3ff; */
}
.sidebar-scroll {
overflow-y: scroll;
}
.grid-container {
padding-top: 15px;
padding-bottom: 15px;
height: 542px;
background: grey;
}
.sidebar .grid-stack-item {
text-align: center;
line-height: 100px;
z-index: 10;
cursor: grab;
display: inline-block;
}
.grid-stack-item-content {
background: white;
color: #2c3e50;
font-family: 'Indie Flower';
text-align: center;
font-size: 20px;
}
.grid-stack .grid-stack-item[data-gs-width="4"] {
width: 100%
}
.grid-stack .grid-stack-item[data-gs-width="3"] {
width: 75%
}
.grid-stack .grid-stack-item[data-gs-width="2"] {
width: 50%
}
.grid-stack .grid-stack-item[data-gs-width="1"] {
width: 25%
}
.grid-stack .grid-stack-item[data-gs-x="3"] {
left: 75%
}
.grid-stack .grid-stack-item[data-gs-x="2"] {
left: 50%
}
.grid-stack .grid-stack-item[data-gs-x="1"] {
left: 25%
}
.sidebar .grid-stack-item[data-gs-width="1"] {
width: 100%
}
JS:
$(function() {
var options = {
float: true,
width: 4,
height: 4,
animate: true,
always_show_resize_handle: true,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
acceptWidgets: '.grid-stack-item'
};
$('.grid-stack').gridstack(_.defaults(options));
var items = [{
x: 0,
y: 0,
width: 1,
height: 1
}, {
x: 1,
y: 0,
width: 1,
height: 1
}, {
x: 2,
y: 0,
width: 1,
height: 1
}, {
x: 0,
y: 1,
width: 1,
height: 1
}, {
x: 3,
y: 1,
width: 1,
height: 1
}, {
x: 1,
y: 2,
width: 1,
height: 1
}];
$('.grid-stack').each(function() {
var grid = $(this).data('gridstack');
_.each(items, function(node) {
grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
}, this);
});
var sidebar_options = {
float: true,
width: 1,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
};
$('.sidebar').gridstack(_.defaults(sidebar_options));
var droppables = [{
x: 0,
y: 0,
width: 1,
height: 1
}];
$('.sidebar').each(function() {
var sidebar = $(this).data('gridstack');
_.each(droppables, function(node) {
sidebar.addWidget($('<div><div class="grid-stack-item-content">I\'m new</div></div>'),
node.x, node.y, node.width, node.height);
}, this);
});
});
I have a line chartJS chart with the datalabel plugin but the datalabel is cropped by the border of the canvas, is there a way to increase its z-index or something like that?
For example in this code (a cleaned-up version of the real code), I'm supposed to have 1234 as the last value but it only shows 12, and even 3 is cropped. I would like to display it on top of the white border or maybe translate it a few pixels to the left automatically if it can't fit here (I don't care if a bit of the number border is cropped while the number isn't)
Chart.register(ChartDataLabels); // Import the data-labels plugin
graphItop4 = new Chart(document.getElementById("mois"), {
type: "line",
data: {
labels: [1, 2],
datasets: [{
label: "1",
fill: true,
data: [0, 1234],
backgroundColor: "rgba(0, 0, 255, 0.2)",
borderColor: "blue",
borderWidth: 1,
datalabels: {
align: 'start',
}
},
]
},
options: {
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor.replace("0.2", "0.5");
},
borderRadius: 100,
color: 'white',
font: {
weight: 'bold',
size: '15'
},
formatter: Math.round,
padding: 5,
}
},
},
})
body {
font-family: "Arial", Helvetica, sans-serif;
display: flex;
margin: 18px;
padding: 0;
background-color: #ccc;
}
.case {
position: relative;
padding: 10px;
text-align: center;
border-radius: 10px;
min-height: 240px;
background-color: #fff;
}
h2 {
font-size: 1.4em;
margin: 0;
padding: 10px 20px;
border-radius: 10px;
background-color: lightgrey;
}
<div class="case">
<h2>Mois</h2>
<div>
<canvas height="270" id="mois" width="600"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
i have problem with wavesurferjs
It is overflowing the parent div
It is happening for the first time and on resize of the parent div
On resize it should fit the parent div
Question: when parent div is resized waveform should adjust itself to accomodate
it is shown in the below image:
here is my code:
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop : false,
});
wavesurfer.on('region-created', function (region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function (readyObj) {
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave){
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$('.toggle-width').on('click',function(){
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
});
handle.wavesurfer-handle{
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
#wavesurferContainer{
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before{
bottom: -17px !important;
top: unset !important;
}
#waveform{
margin-top: 10%
}
#waveform wave{
overflow: unset !important;
}
span.toggle-width{
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wavesurferContainer">
<span class="toggle-width"></span>
<div id="waveform"></div>
</div>
Please help me thanks in advance!!!
The documentation of wavesurfer mentions the responsive and fillParent options, which should solve the problem.
reponsive is available as of waveSurfer v2.0.0 (source), so an upgrade is needed, in case you are using the version 1.2.3 as in the example snippet.
Latest stable version is 3.3.1.
Edit, as a comment mentions that npm is not in use:
The recent builds of the library can be found in a cdns:
wavesurfer.js/3.3.1/wavesurfer.min.js
wavesurfer.js/3.3.1/plugin/wavesurfer.regions.min.js
Edit2: As documented:
You need to include the plugin's configuration when creating an instance of WaveSurfer:
var wavesurfer = WaveSurfer.create({
container: '#waveform',
plugins: [
WaveSurfer.regions.create({})
]
});
Registering the plugin during the instantiation of wavesurfer solves the problem, as demonstrated in the snippet below.
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false,
plugins: [
WaveSurfer.regions.create({})
]
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
window.setTimeout(() => {
wavesurfer.regions.clear();
var clear = ({start,end,resize,drag,loop,color}) =>({start,end,resize,drag,loop,color})
regs.forEach(e => wavesurfer.addRegion(clear(e)));
}, 100);
}
});
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop : false,
});
wavesurfer.on('region-updated', function (region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function (readyObj) {
resizeObserver.observe($('#wavesurferContainer')[0])
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave){
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$(document).on('click','.toggle-width',function(){
console.log('clicked');
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
// you can put here implementation of our redraw.
});
handle.wavesurfer-handle{
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
#wavesurferContainer{
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before{
bottom: -17px !important;
top: unset !important;
}
#waveform{
margin-top: 10%
}
#waveform wave{
overflow: unset !important;
}
span.toggle-width{
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.1/wavesurfer.min.js"></script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.1/plugin/wavesurfer.regions.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wavesurferContainer">
<span class="toggle-width"></span>
<div id="waveform"></div>
</div>
I found a fix for your current version of wavesurfer.js.
All I did is update drawer size and call redraw method when you change the container width. But then the regions doesn't get updated. So I took the current regions values to a temp variable and removed regions and redraw. Now the region will be in proper position and proper size.
Next issue was that the handle bar keeps moving out of the container and the region starts acting crazy. You can fix it with simple css trick by applying the following css code.
Hope it helps.
handle.wavesurfer-handle-end{
transform: translateX(-100%);
}
Here's a snippet of a working solution.
$('document').ready(function() {
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop: false,
});
wavesurfer.on('region-created', function(region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function(readyObj) {
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave) {
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$('.toggle-width').on('click', function() {
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
wavesurfer.drawer.updateSize();
wavesurfer.drawBuffer();
var region_list = wavesurfer.regions.list;
var region_keys = Object.keys(region_list);
region_keys.map(function(key){
var temp_region = {
start: region_list[key].start, // time in seconds
end: region_list[key].end, // time in seconds
color: region_list[key].color,
loop: region_list[key].loop,
multiple: region_list[key].multiple,
drag: region_list[key].drag
};
region_list[key].remove();
wavesurfer.addRegion(temp_region);
});
});
});
handle.wavesurfer-handle {
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
handle.wavesurfer-handle-end{
transform: translateX(-100%);
}
#wavesurferContainer {
position: relative;
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before {
bottom: -17px !important;
top: unset !important;
}
#waveform {
position: relative;
margin-top: 10%
}
#waveform wave {
overflow: unset !important;
}
span.toggle-width {
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js">
</script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js">
</script>
<div id="wavesurferContainer">
<span class="toggle-width">
</span>
<div id="waveform">
</div>
</div>
There is no such functionality in your version of this library, but you still can implement such. Below is working example. Key here is to force to rerender buffers (here drawBuffer()). Regions are separate thing and we just remove and add them manually after redraw (not sure if best idea... but works).
//this needs to be called after resize!
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
wavesurfer.regions.clear();
regs.forEach(e => wavesurfer.addRegion(e));
this snipped needs to be called whenever container size has been changed. Here we are calling it just after such change from code, but in most cases it will be impossible, then you should use ResizeObserver to handle this.
To keep regions in container add such css:
.wavesurfer-region {
max-width: 100%;
}
var wavesurfer = WaveSurfer.create({
container: '#waveform',
// waveColor: 'violet',
waveColor: '#5B88C8',
progressColor: '#264E73',
hideScrollbar: true,
cursor: false,
drag: false
});
wavesurfer.load('https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
wavesurfer.empty();
wavesurfer.drawBuffer();
var regs = Object.values(wavesurfer.regions.list);
window.setTimeout(() => {
wavesurfer.regions.clear();
var clear = ({start,end,resize,drag,loop,color}) =>({start,end,resize,drag,loop,color})
regs.forEach(e => wavesurfer.addRegion(clear(e)));
}, 100);
}
});
wavesurfer.enableDragSelection({
drag: false,
slop: 1,
loop : false,
});
wavesurfer.on('region-updated', function (region) {
console.log(region.start, region.end);
});
wavesurfer.on('ready', function (readyObj) {
resizeObserver.observe($('#wavesurferContainer')[0])
wavesurfer.addRegion({
start: 0, // time in seconds
end: wavesurfer.getDuration(), // time in seconds
color: 'hsla(100, 100%, 30%, 0.1)',
loop: false,
multiple: false,
drag: false
});
})
document.querySelectorAll('wave').forEach(function(wave){
wave.addEventListener('mousedown', function(e) {
e.preventDefault();
wavesurfer.clearRegions();
});
});
$('.toggle-width').on('click',function(){
var width = $('#wavesurferContainer').width();
width = width - 120;
$('#wavesurferContainer').width(width + 'px');
// you can put here implementation of our redraw.
});
handle.wavesurfer-handle{
width: 9% !important;
max-width: 7px !important;
/* background: #03A9F4; */
background: orange;
cursor: default !important;
}
#wavesurferContainer{
width: calc(100% - 50px);
border: 1px solid red;
position: relative;
margin-top: 56px;
}
handle.wavesurfer-handle.wavesurfer-handle-end:before{
bottom: -17px !important;
top: unset !important;
}
#waveform{
margin-top: 10%
}
#waveform wave{
overflow: unset !important;
}
.wavesurfer-region {
max-width: 100%;
}
span.toggle-width{
position: relative;
float: right;
}
span.toggle-width:before {
content: "<";
position: absolute;
left: 0;
top: 0;
background: red;
width: 30px;
height: 30px;
text-align: center;
line-height: 29px;
color: #fff;
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.js"></script>
<!-- wavesurfer.js timeline -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.5/plugin/wavesurfer.regions.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wavesurferContainer">
<span class="toggle-width"></span>
<div id="waveform"></div>
</div>
I've created some Donut charts with a simple fill animation but I'm having trouble triggering the animation on scroll. Would it be a good idea to add in animate.css and wow.js or is there an easier way to trigger the animation inside of the function? Thanks in advance for the help if you are able to help with this issue.
<div class="donut-chart orange" data-percent="72">
<p><span class="counter" data-count="72">0</span>%</p>
<div class="doughnut"></div>
</div>
$(function() {
$('.donut-chart').each(function(index) {
$(this).append('<svg preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink" id="donutChartSVG' + index + '"><path d="M100,100"/></svg>');
var p = new Donut_chart({
element: $('#donutChartSVG' + index),
percent: $(this).attr('data-percent')
});
p.animate();
});
});
$('.counter').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
}, {
duration: 2000,
easing: 'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
.donut-chart svg {
pointer-events: none;
height: 100%;
stroke: #19a8ff;
}
.donut-chart svg path {
fill: none;
stroke-width: 35px;
stroke: #19a8ff;
}
.donut-chart {
width: 200px;
height: 200px;
display: inline-block;
left: 20%;
margin-bottom: 30px;
}
.donut-chart p {
margin: 0;
position: absolute;
left: 1%;
top: 25%;
font-family: 'Open Sans', sans-serif;
font-weight: bolder;
color: #222;
width: 100%;
text-align: center;
font-size: 2em;
}
.doughnut {
border: 35px solid #EAECEF;
border-radius: 100px;
height: 200px;
width: 200px;
position: absolute;
top: 0px;
z-index: -1;
}
try this, just check if the user scrolls then include inside if() your event function.
$(window).scroll(function() {
if ($('.donut-chart').is(':visible')) {
// do your stuff here, include function with p.animate();
}
});
but remember that this may slow down the performance of your site. You may refer to this site for improvement, https://johnresig.com/blog/learning-from-twitter/.
Below, I gave an example of a function that starts the animation when we scroll down to 300 pixels.
At the end of the round elements are transformed into ovals and red block coming to the right side.
Question: how do I make this function reset if the scroll up to the position less than 300 pixels, and start again if you omit to position more than 300 pixels?
i = 0;
function ring() {
if (i < 1) {
$('.ring').delay(500).animate({ //1
left: 287,
},
500, 'linear');
$('.ring').delay(500).animate({ //2
left: 500,
},
500, 'linear');
$('.ring').delay(500).animate({ //2.1
left: 594,
},
200, 'linear')
};
if (i < 1) {
$('.views-row-1').animate({ //9
width: 140,
top: -14,
boxShadow: "0 0 8px",
},
500);
$('.views-row-1').delay(500).animate({ //9
width: 115,
top: 0,
boxShadow: "0 0 0",
},
500);
$('.views-row-2').delay(1000).animate({ //9
width: 140,
top: -14,
boxShadow: "0 0 8px",
},
500);
$('.views-row-2').delay(500).animate({ //9
width: 115,
top: 0,
boxShadow: "0 0 0",
},
500);
$('.views-row-3').delay(2000).animate({ //9
width: 140,
top: -14,
boxShadow: "0 0 8px",
},
500)
};
return i++;
}
function scr() {
var top = $(window).scrollTop();
if (top > 300) {
ring();
};
}
$(window).scroll(scr);
.views-row-1,
.views-row-2,
.views-row-3 {
display: block;
position: absolute;
top: 15px;
left: 15px;
background: #ccc;
width: 60px;
height: 60px;
border-radius: 50%;
}
.views-row-2 {
left: 100px;
}
.views-row-3 {
left: 185px;
}
.ring {
display: block;
position: absolute;
top: 20px;
background: red;
width: 20px;
height: 20px;
z-index: 4;
}
.parent {
display: block;
position: fixed;
width: 100%;
top: 60px;
}
body {
height: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Start to scroll down
<div class="parent">
<div class="ring"></div>
<div class="views-row-1"></div>
<div class="views-row-2"></div>
<div class="views-row-3"></div>
</div>
You will need to create a function to reset that.
You can't have it automatically done.
to do that, just set the values for views-row-1, views-row-2, views-row-3 and ring to the initial state.
for example, ring would have the left property set to zero again, the views-row-* would have their width set to 60px, etc.