Develop Reference

Hiding sticky button during the height of the form

I have a web page where I am using a sticky button to use only on mobile
<div id="toBooking" class="bg-light d-lg-none d-xl-none">
<a class="btn_full" style="margin-bottom:0; background: #0072bc !important;" href="#"> <sup>$</sup> Book Now</a>
</div>
Here is the javascript that I have
var pxBtShow = 500; // height on which the button will show
var scrollSpeed = 500; // how slow / fast you want the button to scroll to top.
$(window).scroll(function(){
if($(window).scrollTop() >= pxBtShow){
$("#toBooking").addClass('visible');
} else {
$("#toBooking").removeClass('visible');
}
});
$("#toBooking").click(function() {
$('html, body').animate({
scrollTop: $("#booking").offset().top
}, 1000);
});
and CSS
#toBooking {
position: fixed;
right: 0;
opacity: 0;
visibility: hidden;
bottom: 0px;
z-index: 999;
transition: 0.35s;
transform: scale(0.7);
width: 100%;
height: 46px;
background-color: rgba(0,0,0,.6);
opacity: 1;
transition: all 0.3s;
border-radius: 50%;
text-align: center;
font-size: 21px;
color: #fff;
cursor: pointer;
}
#toBooking.visible {
opacity: 1;
visibility: visible;
transform: scale(1);
}
#toBooking:after {
content: "\e899";
font-family: "fontello";
position: relative;
display: block;
top: 50%;
-webkit-transform: translateY(-55%);
transform: translateY(-55%);
}
When I click the button it takes me to a booking form. But when I am on the form I want to hide that button during the height of that form.
How we can do that?

You just need to add more logic ex:
$(window).scroll(function () {
var windowScrollTop = $(window).scrollTop()
var $form = $('#form');
var formOffset = $form.offset();
if (
windowScrollTop >= pxBtShow &&
windowScrollTop < formOffset.top &&
windowScrollTop > formOffset.top + $form.height()
) {
$("#toBooking").addClass('visible');
} else {
$("#toBooking").removeClass('visible');
}
});

How to bind css animation duration to scroll

I want to make something like those website where you scroll down and some animation follows by your scrolling and if you scroll up it goes reverse.
I saw some libraries like this but I want to see can it be done some more simple way?
Thanks
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('div').removeClass('scrollUp').addClass('scrollDown');
} else {
$('div').removeClass('scrollDown').addClass('scrollUp');
}
lastScrollTop = st;
});
});
body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
}
#keyframes myfirst {
0% {background: rgba(0,0,0,0); top: 0px;}
100% {background: rgba(0,0,0,1); top: 400px;}
}
.scrollDown{
animation-name: myfirst;
animation-duration: 5s;
animation-direction: alternate;
}
.scrollUp{
animation-name: myfirst;
animation-duration: 5s;
animation-direction: alternate-reverse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
Besides this I just tried changing keyframes on scroll so 100% or the end of animations changes by scrolling down and 0% by scrolling up but it doesnt work:
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
$('head>style').last().remove();
if (st > lastScrollTop){
$('head').append('<style>#keyframes myfirst{0%{background: rgba(0,0,0,0); top: 0px;}100%{background: rgba(0,0,0,1); top: '+st+'px;}}</style>');
$('div').removeClass('scrollUp').addClass('scrollDown');
} else {
$('head').append('<style>#keyframes myfirst{0%{background: rgba(0,0,0,0); top: '+st+'px;}100%{background: rgba(0,0,0,1); top: '+lastScrollTop+'px;}}</style>');
$('div').removeClass('scrollDown').addClass('scrollUp');
}
lastScrollTop = st;
});
});
body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
border: 1px solid black;
}
.scrollDown{
animation-name: myfirst;
animation-duration: 0s;
animation-direction: alternate;
}
.scrollUp{
animation-name: myfirst;
animation-duration: 0s;
animation-direction: alternate-reverse;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div></div>
SOLUTION WITH TRANSITION (WITHOUT KEYFRAMES)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<style>
body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
border: 1px solid black;
opacity: 0;
transition: opacity 0s ease;
background: rgb(0,0,0);
}
</style>
</head>
<body>
<div></div>
<script>
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
$('head>style').last().remove();
if (st > lastScrollTop){
$('div').css({
opacity: function() {
var opacity = ((1 - (400 - st) / 400) * 0.8);
return opacity;
}, left: st
});
} else {
$('div').css({
opacity: function() {
var opacity = ((1 - (400 - st) / 400) * 0.8);
return opacity;
}, left: st
});
}
lastScrollTop = st;
});
});
</script>
</body>
</html>

It can be done more simply and without jQuery. This is a rough take, but I made it a bit more generic by adding a container and passing ratios around to get mostly full, bounded left-to-right position and zero-to-one opacity transitions:
var locked = false;
var container = document.getElementById('container');
var animated = document.getElementById('animated');
window.addEventListener('scroll', function() {
if (!locked) {
window.requestAnimationFrame(function() {
animated.style.opacity = Math.min(window.scrollY / window.innerHeight, 1);
animated.style.left = Math.min(animated.style.opacity * container.clientWidth, container.clientWidth - animated.clientWidth).toString() + 'px';
locked = false;
});
}
locked = true;
});
#container {
border: 1px solid red;
height: 200vh;
width: 80%;
}
#animated {
width: 100px;
height: 100px;
position: fixed;
opacity: 0;
background: rgb(0, 0, 0);
}
<div id="container">
<div id="animated"></div>
</div>

animate to right on scroll down and animate back to the left on scroll up

I'm trying to do an animation on page scroll where selected element will animate from left to right on scroll down and if back to top then animate the selected element from right to left (default position), here's what I tried
$(document).ready(function() {
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
}
if (wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
As you can see, on scroll down, the test box moves as I instruct but when scroll up, it does not go to the left as default, any ideas, help please?

You can add a global variable to control the animation. See the working snippet below please, where I've commented parts of the code that I added:
$(document).ready(function() {
var animated = false; //added variable to control the animation
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (animated && wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
animated = false; //animation ended
}
if (!animated && wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
animated = true; //it was animated
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>

This should work, it also uses css for the animation.
$(document).ready(function() {
var box = document.querySelector('#test-box');
var stateClass = '-right';
window.addEventListener('scroll', function(event) {
box.classList.toggle(stateClass, document.body.scrollTop > 10);
});
});
#main-container {
width: 100%;
overflow: auto;
height: 2000px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
transition: .5s linear;
}
#test-box.-right {
left: 100%;
transform: translateX(-100%) translateX(-100px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>

CSS3 Div Animation Relative Spacing

Recently I have asked a similar question about transition animation in divs. (See this post)
The Code Snippet below shows my solution.
However, the animation only works if the width is given in pixels, not as a percentage.
Does anybody know a way around this?
EDIT (More info to clarify my problem):
In this section of a website, I have a heading that should always stay the same and 3 pages of content which can be "swiped" on user input.
Thus, the span of the left margin of the page would range from -100% to +100%.
I want a swiping animation so that the user can switch from page 2 (i.e. displaying an image) to page 3 (i.e. the text correlating to the image).
Because of different browser window sizes, I need the width to be in percentages. Sadly...
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "-400px";
} else if (current == "0px") {
current = "-200px";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "0px";
} else if (current == "-400px") {
current = "-200px";
}
$(".container").css("left", current);
});
});
.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 200px;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
margin: 0;
width: 600px;
padding: 0;
display: block;
position: absolute;
left: -200px;
top: 0;
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
.ins {
width: 200px;
float: left;
height: 200px;
margin: 0;
padding: 0;
background-color: red;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>

I have changed the left positioning for a transform on the individual elements:
Now, also, the class row is set to occupy full browser width. The container class is se to 300% (because it will make room for 3 elements). And the children are set to 33% of this, that at the end is 100% of the row.
var pos = 2; /* values 1 - 2 or 3 */
$(document).ready(function() {
$(".next").click(function() {
if (pos == 1) {
$(".container").removeClass("pos1");
$(".container").addClass("pos2");
pos++;
} else if (pos == 2) {
$(".container").removeClass("pos2");
$(".container").addClass("pos3");
pos++;
}
});
$(".prev").click(function() {
if (pos == 3) {
$(".container").removeClass("pos3");
$(".container").addClass("pos2");
pos--;
} else if (pos == 2) {
$(".container").removeClass("pos2");
$(".container").addClass("pos1");
pos--;
}
});
});
.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 100%;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
width: 300%;
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
}
.ins {
width: 33.33%;
height: 200px;
margin: 0;
padding: 0;
float: left;
transition: transform 0.5s ease-in-out;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}
.pos2 .ins {
transform: translateX(-100%);
}
.pos3 .ins {
transform: translateX(-200%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container pos2">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>

Narusan,
If I'm understanding your goal correctly, part of the problem is that no matter what, jQuery wants to return px units to you. You can set a percentage value, but it seems it will not then return those percentages to you.
I changed your code some to demonstrate this:
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
console.log(current);
if (current == "-200px" || current == "-100%") {
current = "-200%";
} else if (current == "0%") {
current = "-100%";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
console.log(current);
if (current == "-200px" || current == "-100%") {
current = "0%";
} else if (current == "-200%") {
current = "-100%";
}
$(".container").css("left", current);
});
});
You'll see that the values printed to the console are always in px, but if you inspect the DOM you'll see that the % value is being set on the element.
Approaching the problem very differently, like vals did, seems like a good approach.

Parallax Curtain Reveal Effect with jQuery and CSS3

It is really difficult to explain what kind of effect I mean. But let me try. :)
When you scroll down one DIV with text Block moves over a fixed background DIV with a background image. Now when the DIV on top leave the bottom area and moves to the top of the viewport you can seen the half (and later the full) new background image. But the Background Images are not moving, they are fixed. Only the Page Content with Text Blocks moves when you scroll down.
If you still see a question mark then take a look at this website, there you can see the concept in use.
So my question is how can I recreate this effect only with CSS3 and jQuery (Without YUI etc.)?
I don't really understand the logic that is needed for this to work. How do I need to animate the DIVs and where should I place them in the HTML Document.
Below you find some tests I did (But they don't work)
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
<title>Agency</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("div.blankItem").css("min-height", $(window).innerHeight()-44);
$("div.red").css("min-height", $(window).innerHeight()-44);
var windowHeight = $(window).innerHeight()+ 44;
var total = - windowHeight - 400;
$('div.red').css('-webkit-transform', 'translate3d(0,' + total + 'px,0)');
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()+44 + "px");
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()-44);
$(window).resize(function() {
$("div.blankItem").css("min-height", $(window).innerHeight()-44);
$("div.red").css("min-height", $(window).innerHeight()-44);
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()+44 + "px");
//$("div.pageContentBackground").css("bottom", -$(window).innerHeight()-44);
});
$(function(){
$(window).bind({scroll: Scroll, touchmove: Scroll});
});
function Scroll(){
// var op = (window.pageYOffset-$(window).innerHeight()-44-356);
// $("div.pageContentBackground").css("bottom", + op);
var scrollTop = $(window).scrollTop();
var pageYDoc = 1300;
var factor = 0.8;
var pageYViewport = pageYDoc - scrollTop;
var imageY = -1 * parseInt(pageYViewport * factor);
//var tr = -200; // You'd need to calculate this value
/**$('div.red').css("-webkit-transform", "translate3d(0, " + tr + "px, 0)");
*/
//var offset = total + $(window).scrollTop()+400;
$('div.red').css({'-webkit-transform': 'translate3d(0, '+ imageY + '%, 0)'});
// $('div.blue').stop().css('bottom', $(window).scrollTop() - $(window).innerHeight()-44-400 + "px");
console.log(offset);
}
});
</script>
<style>
* {
padding: 0;
margin: 0;
}
ul, li {
margin: 0;
padding: 0;
}
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-moz-tap-highlight-color: rgba(0,0,0,0);
tap-highlight-color: rgba(0,0,0,0);
text-decoration: none;
}
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
}
body {
transition:all .2s linear;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
font-family: 'Open Sans', Helvetica;
color: #F0F2ED;
-webkit-font-smoothing: subpixel-antialiased !important;
}
div.pageMenu {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 44px;
background-color: #333;
z-index: 10;
opacity: 0.99;
}
a.pageMenuButton {
position: fixed;
top: 8px;
right: 44px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
div.pageHeader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #daddda;
z-index: 1;
padding-bottom: 10px;
}
div.pageContent {
position: absolute;
top: 100%;
width: 100%;
z-index: 5;
max-width: 100%;
overflow: hidden;
}
div.pageContentBackground {
position: fixed;
left: 0px;
width: 100%;
}
div.red {
background-color: red;
z-index: 2;
}
div.blue {
background-color: blue;
z-index: 3;
}
div.pageContentBody {
width: 100%;
z-index: 2;
}
div.pageContentBodyItem {
width: 100%;
height: 400px;
background-color: #fff;
display: block;
}
div.blankItem {
background: transparent;
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="pageMenu">
<div class="pageMenuLogo">
</div>
☰
</div>
<div class="pageHeader">
</div>
<div class="pageContentBackground red">
</div>
<!--<div class="pageContentBackground blue">
</div>-->
<div class="pageContent">
<div class="pageContentBody">
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
<div class="blankItem">
</div>
<div class="pageContentBodyItem">
</div>
</div>
</div>
<div class="pageContentFooter">
</div>
</div>
</body>

This is my try: http://codepen.io/rafaelcastrocouto/pen/bCxAd
Although there are lots of differences in the sites, they are still kinda alike.
Notice that my parallax only woks on big screens.
The JS is pretty small:
var lastScrollTop = 0;
var backgroundImages = $('.backgroundImage');
$(window).scroll(function(e){
var st = $(this).scrollTop();
var ah = $(this).height();
backgroundImages.each(function(i){
var img = $(this);
var pos = img.position().top;
var hei = img.height();
if ((st + ah) > pos && st < (pos + hei)){
var p = ((pos - st)/ah) + 0.25;
if(i == 1) console.log(p);
img.css('background-position', '50%'+(p*100)+'%');
}
});
lastScrollTop = st;
});
$(window).scroll();