I am facing a challenge where before scroll, you will notice when scrolling down or up, there is a slight pixel shift in the same direction before a smooth scroll animation occurs and snaps to the next or previous section depending on the scroll direction.
Code can be found here: https://stackblitz.com/edit/html-sample-rpcn3b?file=index.html
Preview can be found here: https://html-sample-rpcn3b.stackblitz.io
How can I remove this slight shift before the animated scroll happens, so that I can get a smooth scroll snapping from one section to the next. In the end (for the targeted sections) I want to achieve a smooth scroll closely similar to this example here with swiperjs: https://swiper-master.webflow.io/full-page-vertical
Your code seems to work as expected if you tweak a bit wtd and st in getClosestElement (see my HERE comments in the snippet below).
(function ($) {
$.fn.sectionsnap = function (options) {
var settings = {
delay: 50, // time dilay (ms)
selector: '[fs-animated-section]', // selector
reference: 1, // % of window height from which we start
animationTime: 300, // animation time (snap scrolling)
offsetTop: 0, // offset top (no snap before scroll reaches this position)
offsetBottom: 0, // offset bottom (no snap after bottom - offsetBottom)
}
var $wrapper = this,
direction = 'down',
currentScrollTop = $(window).scrollTop(),
scrollTimer,
animating = false;
// check the direction
var updateDirection = function () {
if ($(window).scrollTop() >= currentScrollTop) direction = 'down';
else direction = 'up';
currentScrollTop = $(window).scrollTop();
};
// return the closest element (depending on direction)
var getClosestElement = function () {
var $list = $wrapper.find(settings.selector),
wt = $(window).scrollTop(),
wh = $(window).height(),
refY = wh * settings.reference,
wtd = wt + refY - 3, // <--- HERE
$target;
if (direction == 'down') {
$list.each(function () {
var st = $(this).position().top - 1; // <--- HERE
if (st > wt && st <= wtd) {
$target = $(this);
return false; // just to break the each loop
}
});
} else {
wtd = wt - refY + 3; // <--- HERE
$list.each(function () {
var st = $(this).position().top - 1; // <--- HERE
if (st < wt && st >= wtd) {
$target = $(this);
return false; // just to break the each loop
}
});
}
return $target;
};
// snap
var snap = function () {
var $target = getClosestElement();
if ($target) {
animating = true;
$('html, body').animate(
{
scrollTop: $target.offset().top,
},
settings.animationTime,
function () {
window.clearTimeout(scrollTimer);
animating = false;
}
);
}
};
// on window scroll
var windowScroll = function () {
if (animating) return;
var st = $(window).scrollTop();
if (st < settings.offsetTop) return;
if (st > $('html').height() - $(window).height() - settings.offsetBottom)
return;
updateDirection();
window.clearTimeout(scrollTimer);
scrollTimer = window.setTimeout(snap, settings.delay);
};
$(window).scroll(windowScroll);
return this;
};
})(jQuery);
$(document).ready(function () {
$('[fs-animated-container="container"]').sectionsnap();
});
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 10px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
</head>
<body>
<div id="app">
<div class="main-div">
<div fs-animated-container="container">
<section fs-animated-section="first" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section ONE ANIMATED SCROLL
</h1>
</div>
</div>
</section>
<section fs-animated-section="second" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section TWO ANIMATED SCROLL
</h1>
</div>
</div>
</section>
<section fs-animated-section="third" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section THREE ANIMATED SCROLL
</h1>
</div>
</div>
</section>
</div>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section FOUR NORMAL SCROLL
</h1>
</div>
</div>
</section>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section FIVE NORMAL SCROLL
</h1>
</div>
</div>
</section>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section SIX NORMAL SCROLL
</h1>
</div>
</div>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
Moreover, some of your HTML tags are not closed. See <div class="container-large">.
EDIT 1
After reading your comment, it seems that I misunderstood the meaning of your question...
In fact, except if your challenge is to reinvent the wheel, you may want to use a small library like jQuery Easing Plugin. You will find below the same example with a custom easing function and no delay:
(function ($) {
$.fn.sectionsnap = function (options) {
var settings = {
delay: 0, // <--- HERE
selector: '[fs-animated-section]', // selector
reference: 1, // % of window height from which we start
animationTime: 300, // animation time (snap scrolling)
offsetTop: 0, // offset top (no snap before scroll reaches this position)
offsetBottom: 0, // offset bottom (no snap after bottom - offsetBottom)
}
var $wrapper = this,
direction = 'down',
currentScrollTop = $(window).scrollTop(),
scrollTimer,
animating = false;
// check the direction
var updateDirection = function () {
if ($(window).scrollTop() >= currentScrollTop) direction = 'down';
else direction = 'up';
currentScrollTop = $(window).scrollTop();
};
// return the closest element (depending on direction)
var getClosestElement = function () {
var $list = $wrapper.find(settings.selector),
wt = $(window).scrollTop(),
wh = $(window).height(),
refY = wh * settings.reference,
wtd = wt + refY - 3,
$target;
if (direction == 'down') {
$list.each(function () {
var st = $(this).position().top - 1;
if (st > wt && st <= wtd) {
$target = $(this);
return false; // just to break the each loop
}
});
} else {
wtd = wt - refY + 3;
$list.each(function () {
var st = $(this).position().top - 1;
if (st < wt && st >= wtd) {
$target = $(this);
return false; // just to break the each loop
}
});
}
return $target;
};
// snap
var snap = function () {
var $target = getClosestElement();
if ($target) {
animating = true;
$('html, body').animate(
{
scrollTop: $target.offset().top,
},
settings.animationTime,
'easeOutElastic', // <--- HERE
function () {
window.clearTimeout(scrollTimer);
animating = false;
}
);
}
};
// on window scroll
var windowScroll = function () {
if (animating) return;
var st = $(window).scrollTop();
if (st < settings.offsetTop) return;
if (st > $('html').height() - $(window).height() - settings.offsetBottom)
return;
updateDirection();
window.clearTimeout(scrollTimer);
scrollTimer = window.setTimeout(snap, settings.delay);
};
$(window).scroll(windowScroll);
return this;
};
})(jQuery);
$(document).ready(function () {
$('[fs-animated-container="container"]').sectionsnap();
});
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 10px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
</head>
<body>
<div id="app">
<div class="main-div">
<div fs-animated-container="container">
<section fs-animated-section="first" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section ONE ANIMATED SCROLL
</h1>
</div>
</div>
</section>
<section fs-animated-section="second" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section TWO ANIMATED SCROLL
</h1>
</div>
</div>
</section>
<section fs-animated-section="third" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section THREE ANIMATED SCROLL
</h1>
</div>
</div>
</section>
</div>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section FOUR NORMAL SCROLL
</h1>
</div>
</div>
</section>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section FIVE NORMAL SCROLL
</h1>
</div>
</div>
</section>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section SIX NORMAL SCROLL
</h1>
</div>
</div>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
It looks much smoother now!
For the record, you might also want to use CSS instead of JS:
div[fs-animated-container] {
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
}
section[fs-animated-section] {
scroll-snap-align: center;
}
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 10px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
</head>
<body>
<div id="app">
<div class="main-div">
<div fs-animated-container="container">
<section fs-animated-section="first" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section ONE ANIMATED SCROLL
</h1>
</div>
</div>
</section>
<section fs-animated-section="second" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section TWO ANIMATED SCROLL
</h1>
</div>
</div>
</section>
<section fs-animated-section="third" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section THREE ANIMATED SCROLL
</h1>
</div>
</div>
</section>
</div>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section FOUR NORMAL SCROLL
</h1>
</div>
</div>
</section>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section FIVE NORMAL SCROLL
</h1>
</div>
</div>
</section>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section SIX NORMAL SCROLL
</h1>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
It does not work very well on IE, though. This browser is just too old.
EDIT 2
If you want something even smoother, I am not sure you need .animate(). I removed it from the code. Of course, the jQuery Easing Plugin is not necessary anymore.
Besides, even though it is not compulsory, I recommend you to implement throttling to increase performance (the scroll event fires way too often for what we need to do). The easiest strategy here is to use _.throttle() from Lodash.
(function ($) {
$.fn.sectionsnap = function (options) {
var settings = {
selector: '[fs-animated-section]', // selector
reference: 1, // % of window height from which we start
offsetTop: 0, // offset top (no snap before scroll reaches this position)
offsetBottom: 0 // offset bottom (no snap after bottom - offsetBottom)
}
var $wrapper = this,
direction = 'down',
currentScrollTop = $(window).scrollTop();
// check the direction
var updateDirection = function () {
if ($(window).scrollTop() >= currentScrollTop) direction = 'down';
else direction = 'up';
currentScrollTop = $(window).scrollTop();
};
// return the closest element (depending on direction)
var getClosestElement = function () {
var $list = $wrapper.find(settings.selector),
wt = $(window).scrollTop(),
wh = $(window).height(),
refY = wh * settings.reference,
wtd = wt + refY - 3,
$target;
if (direction == 'down') {
$list.each(function () {
var st = $(this).position().top - 1;
if (st > wt && st <= wtd) {
$target = $(this);
return false; // just to break the each loop
}
});
} else {
wtd = wt - refY + 3;
$list.each(function () {
var st = $(this).position().top - 1;
if (st < wt && st >= wtd) {
$target = $(this);
return false; // just to break the each loop
}
});
}
return $target;
};
// snap
var snap = function () {
var $target = getClosestElement();
if ($target) {
$('html, body').scrollTop($target.offset().top); // <--- HERE
}
};
// on window scroll
var windowScroll = function () {
var st = $(window).scrollTop();
if (st < settings.offsetTop) return;
if (st > $('html').height() - $(window).height() - settings.offsetBottom)
return;
updateDirection();
snap();
};
$(window).on('scroll', _.throttle(windowScroll, 50, { trailing: false })); // <--- HERE
return this;
};
})(jQuery);
$(document).ready(function () {
$('[fs-animated-container="container"]').sectionsnap();
});
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 10px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous" />
</head>
<body>
<div id="app">
<div class="main-div">
<div fs-animated-container="container">
<section fs-animated-section="first" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section ONE ANIMATED SCROLL
</h1>
</div>
</div>
</section>
<section fs-animated-section="second" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section TWO ANIMATED SCROLL
</h1>
</div>
</div>
</section>
<section fs-animated-section="third" class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section THREE ANIMATED SCROLL
</h1>
</div>
</div>
</section>
</div>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section FOUR NORMAL SCROLL
</h1>
</div>
</div>
</section>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section FIVE NORMAL SCROLL
</h1>
</div>
</div>
</section>
<section class="whatif_section">
<div class="container-large">
<div class="whatif_wrapper">
<h1> Section SIX NORMAL SCROLL
</h1>
</div>
</div>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
You can achieve a smooth scroll snap experience with just pure CSS by using scroll-snap-type property, without jQuery or js.
refer:
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
note: check web browser compatibility
for your case, if you need to enable smooth scroll snap only at the bottom part, the section tags, you may just do as below: (add this style and remove other js animation)
<style>
:root {
scroll-snap-type: y mandatory;
overscroll-behavior-y: contain;
overflow: auto;
}
.main-div>div:first-child {
scroll-snap-align: end;
}
.main-div>section {
scroll-snap-align: center;
}
</style>
*do scroll-snap-type: y mandatory for parent element and scroll-snap-align: center for child element that need scroll snap , no complicated js animation needed.
I have an image with tags underneath that correspond to different parts of the image. For instance, the image might be a dog, and one of the tags is 'nose', which corresponds to the portion of the image around the dogs nose. When the user hovers over a tag, I want the brightness around this corresponding part of the image to increase. How can I do this?
function fixLabel(c) {
var x_coor = document.getElementById('x').textContent;
var y_coor = document.getElementById('y').textContent;
var x2_coor = document.getElementById('x2').textContent;
var y2_coor = document.getElementById('y2').textContent;
var width = document.getElementById('w').textContent;
var height = document.getElementById('h').textContent;
var tag = document.createElement('input'); // Create a `input` element,
tag.setAttribute('type', 'text'); // Set it's `type` attribute,
tag.setAttribute('name', 'loc:' + round_2_decimals(x_coor) + "-" + round_2_decimals(y_coor) + "-" +
round_2_decimals(x2_coor) + "-" + round_2_decimals(y2_coor) + "-" + round_2_decimals(width) +
"-" + round_2_decimals(height));
/**
*Here's the area: How do I attach a mouseover function so the image's
*brightness increases whenever I hover over the tag?
*/
tag.onmouseover = function() {};
var br = document.createElement('br'); // Create a `br` element,
var button_div = document.getElementById('fix_label_area');
button_div.appendChild(br);
button_div.appendChild(tag);
button_div.appendChild(br);
};
<div>
<p id='x'></p>
<p id='y'></p>
<p id='x2'></p>
<p id='y2'></p>
<p id='w'></p>
<p id='h'></p>
<br/>
<button id='fix_label' onclick="fixLabel()">Fix Label Here</button>
</div>
<form action="" method="POST" id="canvas">
<div id='img_area'>
<img src="someImageFile.jpg" id="imageId" width="350" height="350" />
</div>
<div id='label_area'>
<input type="submit" name="submit" value="Label" id='input'>
</div>
<div id='fix_label_area'></div>
</form>
Personally Canvas and SVG are more powerful, but you can use CSS to clip a circle and opacity to dim the original. But you need to check the browser support to make sure it covers the browsers you need.
div.holder {
position: relative;
}
img.main {
opacity: .4;
}
img.circle {
position: absolute;
clip-path: circle(50px at 405px 135px);
}
<div class="holder">
<img class="circle" src="https://placedog.net/500" />
<img class="main" src="https://placedog.net/500" />
</div>
I am having tremendous difficulty trying to figure out why my Raphael images are not showing on my HTML. I have tried many different outlets and changes to my html/js documents but still I am unable to figure out the problem. Any help is greatly appreciated!
Below is my HTML:
<body>
<h1>title of my page</h1>
<div id="int">
<svg height="400" width="550">
</svg>
</div>
<section id="p1">
<p>Paragraph 1 with some content</p>
</section>
<section id="p2">
<p>Another paragraph that pops up and has different content</p>
</section>
<div id="controls"><button id="continue">Continue the Story</button></div>
... and here is a copy of my .js document
to_p2 = function() {
/* flip from p1 to p2 */
$('#p1').hide()
$('#p2').show()
$('#continue').off()
$('#continue').click(to_p3)
}
to_p3 = function() {
/* flip from p2 to p3 */
$('#p2').hide()
$('#p3').show()
$('#continue').off()
$('#continue').click(to_p4)
}
setup = function() {
$('#continue').click(to_p2)
$('section').hide()
$('#p1').show()
paper = Raphael('int', 400, 550)
c = paper.circle(160, 120, 45)
c = paper.circle(60, 100, 30)
c = paper.circle(12, 60, 20)
c.attr ({
'fill': '#00f'
})
}
jQuery(document).ready(setup)
I'm doing a parallax website wherein when the user scrolls the sliders will slide from the left and align within the viewport. The issue is that I have scroll the mousewheel many times in order for the slide to align. Is there a way to make the slide align within the viewport with just one scroll.
Here is my work in progress. I'm using skrollr(http://prinzhorn.github.io/skrollr/) for my parallax designs
http://creativekidsstudio.com/ck/
HTML
<section class="slide slide_1">
<div class="slide_content" >
<h2>You see a blank canvas,<br/> we see potential</h2>
<img src="<?php bloginfo('template_url'); ?>/images/canvas.png" alt="Canvas" />
</div>
</section>
<section data-0="transform:translateX(100%); " data-1500="transform:translateX(0%) " class="slide slide_2">
<div class="slide_content" >
<h2>You see a brush,<br/> we see a dream</h2>
<img src="<?php bloginfo('template_url'); ?>/images/brush.png" alt="brush" />
</div>
</section>
<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)" class="slide slide_3">
<div class="slide_content" >
<h2>You see a ball of clay,<br/> we see a world of creativity</h2>
<img src="<?php bloginfo('template_url'); ?>/images/clay.png" alt="clay" />
</div>
</section>
<section data-2500="transform:translateX(100%); " data-3500="transform:translateX(0%)" class="slide slide_4">
<div class="slide_content">
<h1>Every child is a creative kid.</h1>
<img src="<?php bloginfo('template_url'); ?>/images/kid.png" alt="kid" />
</div>
</section>
CSS
.slide{width:100%; height:100%; position:fixed}
.slide_1{background-image:url('images/patternfinal1.jpg'); z-index:1}
.slide_2{background-image:url('images/patternfinal2.jpg'); z-index:2}
.slide_3{background-image:url('images/patternfinal3.jpg'); z-index:3}
.slide_4{background-image:url('images/patternfinal4.jpg'); z-index:4}
.creative_content{ z-index: 10; position: relative; background-color: white; padding:20px 0; top:5%}
.slide_content{
text-align:center;
height:100%;
position:absolute;
top:15%;
margin:0 auto;
left:0;
right:0;
z-index:1;
font-family: 'anarchisticno_leaders..', sans-serif;
font-size:70px;
color:#333
}
.slide_1 img,
.slide_2 ing,
.slide_3 img,
.slide_4 img{display:block; margin:0 auto}
Here is the javascript that i have implemented but the problem is it seems to stop midway when i scroll.
JAVASCRIPT
<script>
var tempScrollTop = 0;
var currentScrollTop = 0;
var scrollHeight = $(window).height();
var newHeight = 0;
function scrollIt() {
$(window).off('scroll', scrollIt);
currentScrollTop = $(window).scrollTop();
if (tempScrollTop < currentScrollTop) {
newHeight = newHeight + scrollHeight;
$('html').animate({scrollTop: newHeight}, 500, function(){
var setScroll = setTimeout(function(){
console.log('Animation Complete');
tempScrollTop = $(window).scrollTop();
$(window).on('scroll', scrollIt);
}, 10);
});
} else if (tempScrollTop > currentScrollTop){
newHeight = newHeight - scrollHeight;
$('html').animate({scrollTop: newHeight}, 500, function(){
var setScroll = setTimeout(function(){
console.log('Animation Complete');
tempScrollTop = $(window).scrollTop();
$(window).on('scroll', scrollIt);
}, 10);
});
}
}
$(window).on('scroll', scrollIt);
</script>
Im not sure if you mean you want them to transform faster, or if you want them to stay on screen while you scroll longer.
Option 1: transform faster:
Currently you have your data- attributes for skrollr set to scroll your slide from 100->0% over 1000px. Currently you have:
<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
If you'd like it to tansform faster, you just need to changes these numbers to accommodate the speed at which you'd like it to transform. Example:
<section data-1500="transform:translateX(100%); " data-1600="transform:translateX(0%)">
Option 2: stay on screen longer:
If you want them to stay on screen longer you just need to increase the distance between the finish of one slide's transform and the beginning of the next. Currently you have:
<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
</section>
<section data-2500="transform:translateX(100%); " data-3500="transform:translateX(0%)">
</section>
If you'd like them to stay on screen longer try something like this:
<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
</section>
<section data-3500="transform:translateX(100%); " data-4500="transform:translateX(0%)">
</section>
Hope this helps
I have this simple JavaScript code that is supposed to side a div in and a div out. it is working perfectly when it comes to sliding in. By working perfectly is sliding the div easily. However when you click slideout the div just disappears from the browser. I don't know why and I cant find a fault. My code is here
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
function slideIt()
{
var stopPosition = 50;
var slidingDiv = "";
slidingDiv = document.getElementById("d3");
if (parseInt(slidingDiv.style.left) < stopPosition )
{
slidingDiv.style.left = parseInt(slidingDiv.style.left) + 2 + "px";
setTimeout(slideIt, 1);
}
}
function slideOut()
{
var startPosition =-150;
var slidingDiv = "";
slidingDiv = document.getElementById("d4");
if (parseInt(slidingDiv.style.left) > startPosition )
{
slidingDiv.style.left = parseInt(slidingDiv.style.left) - 2 + "px";
setTimeout(slideOut(), 1);
}
}
</script>
<div id="d1" onclick="slideIt();">Slide in</div>
<div id="d2" onclick="slideOut();">Slide out</div>
<div id="d3" style="position: absolute; left:-150px; top:300px" >horizontally sliding div</div>
<div id="d4" style="position: absolute; left:150px; top:300px">horizontally sliding div</div>
</body>
</html>
You don't need to invoke slideOut in the second timeout. Remove the parentheses.
setTimeout(slideOut, 1);
Here is a demonstration: http://jsfiddle.net/cctqf/