Develop Reference

how to animate canvas using this plug in

Im still new to this type of programming, im trying to create kaledoscope kind of effect to be projected on screen. I want to make the image move isnide each section of the effect. is there a way to move it? i cant seem to target the canvas created by the plug in.
https://codepen.io/muspelheim/pen/gpymF
var images = [
"http://media-cache-ak0.pinimg.com/736x/5d/d8/41/5dd8416cbae27edeac61aa525a5df99d.jpg",
"https://1.bp.blogspot.com/-FpxaoVBBxXs/T5aWaP2dMDI/AAAAAAAAAw8/qdaPYyuqSt8/s1600/spugnaepicinfame.jpg",
"https://25.media.tumblr.com/tumblr_m9ls7nRTuR1rvqbato1_1280.jpg",
"https://3.bp.blogspot.com/-SJAKrZTcqwI/T5kwYk71YCI/AAAAAAAAAxE/HNlX3i2-xwk/s1600/spugnabimbofango.jpg"
];
// Let's create graphemescope object inside the container
var container = $("#container");
var scope = new Graphemescope( container[0] );
var index = 0;
function changePicture() {
scope.setImage(images[index]);
index = (index + 1) % images.length;
};
setInterval(changePicture, 2000);
changePicture();
$(window).mousemove(function(event) {
var factorx = event.pageX / $(window).width();
var factory = event.pageY / $(window).height()
// This will move kaleidoscope
scope.angleTarget = factorx;
scope.zoomTarget = 1.0 + 0.5 * factory;
});
var resizeHandler = function() {
container.height( $(window).height() );
container.width( $(window).width() );
};
$(window).resize(resizeHandler);
$(window).resize();
container.click(changePicture);

Change sprites scroll speed

I'm creating a parallax website but I'm using the code of some nice tutorial that I found.
This tutorial came with some JS to change the scroll speed of some sprites using the tag "data-" but even though I already have the sprites with a different scrolling speed compared to the background, I can't modify this speed to my own preference.
This is the JavaScript code:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('section[data-type="background"]').each(function(){
// Store some variables based on where we are
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
// When the window is scrolled...
$(window).scroll(function() {
// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
( (topOffset + $self.height()) > $window.scrollTop() ) ) {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $self.data('speed'));
// If this element has a Y offset then add it on
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$self.css({ backgroundPosition: coords });
// Check for other sprites in this section
$('[data-type="sprite"]', $self).each(function() {
// Cache the sprite
var $sprite = $(this);
// Use the same calculation to work out how far to scroll the sprite
var yPos = -($window.scrollTop() / $sprite.data('speed'));
var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
$sprite.css({ backgroundPosition: coords });
}); // sprites
// Check for any Videos that need scrolling
$('[data-type="video"]', $self).each(function() {
// Cache the video
var $video = $(this);
// There's some repetition going on here, so
// feel free to tidy this section up.
var yPos = -($window.scrollTop() / $video.data('speed'));
var coords = (yPos + $video.data('offsetY')) + 'px';
$video.css({ top: coords });
}); // video
}; // in view
}); // window scroll
}); // each data-type
}); // document ready
and this is the HTML markup of a single sprite:
<div class="stars" data-type="sprite" data-speed="10">
<img class="star1" src="img/cenas/1.PNG">
</div>
I tried changing the data-speed value but there aren't any changes. What can I do to have different sprites with different scroll speed?

Basic Parallax - Background jerking up

I have a simple code for moving the background images, but the image is jerking up once the section is in view. the idea is for the background-pos to move only when the section is in view.
Any ideas?
$window = $(window);
$('.portfolioSection').each(function(){
var $bgobj = $(this); // assigning the object
var speed = 8;
$(window).scroll(function() {
if($(window).scrollTop() + 150 >= $bgobj.offset().top){
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / speed);
// Put together our final background position
var coords = '0 '+ yPos + 'px'
// Move the background
$bgobj.css({ backgroundPosition: coords });
}
}); // window scroll Ends
});

Solved it- I didn't account for the section position - Line 9
var yPos = -(($window.scrollTop()-$bgobj.offset().top) / speed);

The Javascript Image Slider is not working well inside Chrome. Images stack up. How to fix it?

In my client's website, (http://slnyaadev45.herokuapp.com/),I have used a JS slider on the top. It will contiguously move the images across the site. In Firefox, it works perfectly. But in Google Chrome, it doesn't. Sometimes it work but if I reload the page it stops working. Sometimes, it start to work. Then if I just click a link to another page, it will still work. But if I reload, it breaks again. The problem is also there in the Android's default browser. What is going wrong? How to fix it?
PS : The site is built with Rails 3.2.
The javascript :
$(function(){
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
var $this = $(this);
$this.css('left', curX);
curX += $this.width();
});
var fullW = curX / 2;
var viewportW = scroller.width();
// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:1};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed, duration)
{
if (duration === undefined)
duration = 600;
$controller.stop(true).animate({curSpeed:newSpeed}, duration);
};
// Pause on hover
scroller.hover(function(){
tweenToNewSpeed(0);
}, function(){
tweenToNewSpeed(controller.fullSpeed);
});
// Scrolling management; start the automatical scrolling
var doScroll = function()
{
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW*2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 20);
tweenToNewSpeed(controller.fullSpeed);
});

because the distance between the elements is 4px, set the ''left'' of each element is equal to previous elements widths sum
OR
you can remove position:absolute for style of li, and add float:left

Because all my images have the same size, I added the width in this line of the script :
curX += $this.width();
as :
curX += 224;

Determine distance from the top of a div to top of window with javascript

How do I determine the distance between the very top of a div to the top of the current screen? I just want the pixel distance to the top of the current screen, not the top of the document. I've tried a few things like .offset() and .offsetHeight, but I just can't wrap my brain around it. Thanks!

You can use .offset() to get the offset compared to the document element and then use the scrollTop property of the window element to find how far down the page the user has scrolled:
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-element').offset().top,
distance = (elementOffset - scrollTop);
The distance variable now holds the distance from the top of the #my-element element and the top-fold.
Here is a demo: http://jsfiddle.net/Rxs2m/
Note that negative values mean that the element is above the top-fold.

Vanilla:
window.addEventListener('scroll', function(ev) {
var someDiv = document.getElementById('someDiv');
var distanceToTop = someDiv.getBoundingClientRect().top;
console.log(distanceToTop);
});
Open your browser console and scroll your page to see the distance.

This can be achieved purely with JavaScript.
I see the answer I wanted to write has been answered by lynx in comments to the question.
But I'm going to write answer anyway because just like me, people sometimes forget to read the comments.
So, if you just want to get an element's distance (in Pixels) from the top of your screen window, here is what you need to do:
// Fetch the element
var el = document.getElementById("someElement");
use getBoundingClientRect()
// Use the 'top' property of 'getBoundingClientRect()' to get the distance from top
var distanceFromTop = el.getBoundingClientRect().top;
Thats it!
Hope this helps someone :)

I used this:
myElement = document.getElemenById("xyz");
Get_Offset_From_Start ( myElement ); // returns positions from website's start position
Get_Offset_From_CurrentView ( myElement ); // returns positions from current scrolled view's TOP and LEFT
code:
function Get_Offset_From_Start (object, offset) {
offset = offset || {x : 0, y : 0};
offset.x += object.offsetLeft; offset.y += object.offsetTop;
if(object.offsetParent) {
offset = Get_Offset_From_Start (object.offsetParent, offset);
}
return offset;
}
function Get_Offset_From_CurrentView (myElement) {
if (!myElement) return;
var offset = Get_Offset_From_Start (myElement);
var scrolled = GetScrolled (myElement.parentNode);
var posX = offset.x - scrolled.x; var posY = offset.y - scrolled.y;
return {lefttt: posX , toppp: posY };
}
//helper
function GetScrolled (object, scrolled) {
scrolled = scrolled || {x : 0, y : 0};
scrolled.x += object.scrollLeft; scrolled.y += object.scrollTop;
if (object.tagName.toLowerCase () != "html" && object.parentNode) { scrolled=GetScrolled (object.parentNode, scrolled); }
return scrolled;
}
/*
// live monitoring
window.addEventListener('scroll', function (evt) {
var Positionsss = Get_Offset_From_CurrentView(myElement);
console.log(Positionsss);
});
*/

I used this function to detect if the element is visible in view port
Code:
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(),
elementOffset = $('.for-scroll').offset().top,
distance = (elementOffset - scrollTop);
if(distance < vh){
console.log('in view');
}
else{
console.log('not in view');
}
});