I've managed to get div(s) to stick at the top offset by 64px on scroll but I also want the same div's opacity to fade to 0. I can't figure out how to add this? An example of what I have done so far.
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
$(".ComponentOne").css("top",Math.max(64,800-scrollTop));
});
Updated
Try below code:
jQuery
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var offsetTop = $('.ComponentOne').position().top;
console.log(offsetTop);
$(".ComponentOne").css("top", Math.max(64, 800 - scrollTop));
if (offsetTop === 64) {
$(".ComponentOne").css("opacity", "0");
} else {
$(".ComponentOne").css("opacity", "1");
}
});
CSS
.ComponentOne {
transition: opacity 500ms ease;
height: 100px;
background: #000;
position: fixed;
left: 0;
right: 0;
}
css
.ComponentOne{
height:100px;
width:200px;
background:pink;
position:absolute;
top:800px;
opacity:0;
}
js
$("document").ready(function(){
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var compTop = $('.ComponentOne').offset().top;
var controllOpacity = 1400;
if(scrollTop + 100 > compTop)
{
$(".ComponentOne").css("top","64px");
$(".ComponentOne").css("position","fixed");
$(".ComponentOne").css("opacity", ((scrollTop - 800)/(controllOpacity - 800)));
}
if(scrollTop < 800){
$(".ComponentOne").css("top","800px");
$(".ComponentOne").css("position","absolute");
$(".ComponentOne").css("opacity", ((scrollTop - 800)/(controllOpacity - 800)));
}
});
});
Just adjust the value of controlOpacity variable according to you. It is used to control the range within which the div should fadeout completely. So if you lower it the div will fadeout quickly as you scoll and if you keep it large then div will fadeout slowly with scroll
JSFiddle for the example
Related
I'd like to create a horizontal navigation which animates to a vertical navigation on scroll.
I've tried to do that with animate, but there I can only provide it like after 50 px scrolled animate in xxx seconds.
$(window).scroll(function() {
if (ScrolledFromTop > 50) {
$('nav').animate({CSS CHANGES});
}
});
But I would like to do it like begin at 50px scrolled and the animation should be finished when I scrolled 100px. Any ideas? thanks
Could you clarify more ?
I think you need a swipe like function but this time as a mouse event handler ?
Whats the use case behind this ? Seems inpractical that a menu is stuck inbetween some transition when the user stops scrolling between 50 and 100 px.
Anyways you would need to map your current scrolled pixel value to the animation, like so:
$(window).scroll(function() {
if (window.pageYOffset >= 50 && window.pageYOffset <= 100) {
var percent = (window.pageYOffset - 50 ) * 2;
animateMenu(percent);
}else if(window.pageYOffset < 50) {
animateMenu(0);
}else if(window.pageYOffset > 100) {
animateMenu(100);
}
});
function animateMenu(percent){
$('.menu').css({
width: 100 - percent + "%",
height: percent + "%"
});
}
.menu{
background: red;
height: 50px;
width: 100%;
min-width: 50px;
position: fixed;
top: 0;
left: 0;
transition: 0.2s all ease-in;
min-height: 50px;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
I am trying to animate images using CSS on a webpage. The animation is working fine but I want to START the animation it only when user reaches at a particular section of the page. Here is my code:
<div class="sec1-right">
<img class="sec1-dmush1" src ="sec1-dmush1.png">
</div>
CSS
.sec1-right{
position: relative;
width: 50%;
float: right;
box-sizing: border-box;
min-height: 600px;
margin-top: 86px;
}
/* first section animation */
.sec1-dmush1 {
animation: fadeAndScale .9s cubic-bezier(.45,-0.22,.34,1.69);
transform-origin:center bottom;
max-width: 150px;
width: 100%;
position: absolute;
left: 180px;
top: 300px;
z-index: 0;
}
Animation
#keyframes fadeAndScale{
from{
opacity:0;
transform: scale3d(0,0,1);
}
to{
opacity: 1;
transform: scale3d(1,1,1);
}
}
How can I achieve
You need to write scroll event in javascript. element offsetTop minus window height. So as soon as element comes in viewport event starts.
Javascript:
var scrollpos = window.scrollY; // window scroll position
var wh = window.innerHeight-50; // as soon as element touches bottom with offset event starts
var element = document.querySelector(".sec1-dmush1"); //element
window.addEventListener('scroll', function(){
if(scrollpos > (element.offsetTop - wh)){
element.classList.add("onScroll");
}
});
JsFiddle
jQuery:
$(window).scroll(function(){
var wh = $(window).height()-50;
if($(window).scrollTop() > $('.sec1-dmush1').offset().top-wh){
$('.sec1-dmush1').addClass('onScroll');
}
});
jsFiddle
If you have multiple elements to animate. You can use waypoint js to reduce some efforts.
var wh = $(window).height();
var waypoints = $('.sec1-dmush1').waypoint(function(direction) {
$(this.element).addClass('onScroll');
console.log(11);
}, {
offset: wh-50
});
jsFiddle
using javascript you can find the scroll event . After the specific px(height). You can add a class to the existing class(jquery) for which you trying to animate.
Have a script that showing some div when page scrolling to less than 1400 (<1400), if more than 1400 the div is hiding. But i need that div showing not by height (1400) rather by div id and hiding by "stop" div. Please can you help me.
<style>
#goSale {position:fixed;bottom:-300px;width:auto;height:auto;}
#goSale img {opacity:100;-moz-animation:blink normal 3s infinite ease-in-out;-webkit-animation:blink normal 3s infinite ease-in-out;
-ms-animation:blink normal 3s infinite ease-in-out;animation:blink normal 3s infinite ease-in-out;animation-iteration-count:5;-ms-animation-iteration-count:5;
-webkit-animation-iteration-count:5;-o-animation-iteration-count:5;border:0px;width:100px;height:auto;}
</style>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() < 1400){
$('#goSale').stop().animate({
top: '65px'
}, 1);
}else{
$('#goSale').stop().animate({
top: '-100px'
}, 1); } });
$('#goSale').scroll(function() {
$('html, body').stop().animate({
scrollTop: 0
}, 1, function() {
$('#goSale').stop().animate({
top: '65px'
}, 1); }); }); });
</script>
<div id="goSale"><img src="img/pages/sale.png"></div>
Example: http://www.vichy.ho.ua - top right black cube and other leftside and right side "scrolling" elements, like Youtube and other...
So you want it to be hidden when another particular div is in view. Well, you have to know the position of that div and adapt your scrolled comparison using that number.
So you have to take 3 measurements:
User's screen height
The top position of your "stop div"
The bottom position of your "stop div"
Then, some simple math... And compare with scrolled position.
$(document).ready(function(){
// Get some measurements
var stopPosition = $("#stop").offset().top;
var stopHeight = $("#stop").outerHeight();
var displayHeight = $(window).height();
// Scroll handler
$(window).scroll(function() {
// Show the fixed black image when the stop div is in view
if($(this).scrollTop() < stopPosition-displayHeight || $(this).scrollTop() > stopPosition+stopHeight){
$('#goSale').stop().animate({
top: '65px'
}, 1);
// Else, hide it.
}else{
$('#goSale').stop().animate({
top: '-1000px'
}, 1);
}
});
});
#a,#b,#c{
height:1000px;
}
#a{
background-color:blue;
}
#b{
background-color:orange;
}
#c{
background-color:green;
}
#stop{
height:300px;
border:10px solid red;
}
#goSale{
position:fixed;
top:65px;
right:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a"></div>
<div id="stop">
<h1>The phone number in the black image is not shown when I'm in view.</h1>
</div>
<div id="b"></div>
<div id="c"></div>
<img id="goSale" src="http://www.vichy.ho.ua/img/pages/sale.png">
So i hope my question is clear enought ! I have a div at the top of my page and i'd like that div to move at the bottom when i scroll and hit the end of the page, well i think you get the idea !
If anyone as an idea, i'm taking it ;)
Try to use scroll event with animate() method, and use a flag scroll to make sure the div will be moved just one time :
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
Hope that will give you an idea.
var scroll = true;
$(document).on('scroll', function(){
var my_div = $("#my-div");
if(scroll){
scroll=false;
my_div.animate({
top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
}, 1000);
}
})
html, body { height: 500px; }
#my-div {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 100px;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div>
You can detect when user scroll to the bottom of the page and then transition top property from 0 to the height of the window minus height of that element.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('div').css({
top: $(window).height() - $('div').height()
});
}
});
CODEPEN
I'm losing lot of time trying to make a scroll event to get my header/nav detached and fixed on top of the page when the scroll reaches it.
The menu with fadeOut() goes "display: none", and my page goes up the height of the nav.
How can I get a smooth movement?
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.offset().top-menu.height() && menu.hasClass('menudefault')){
menu.fadeOut('500', function(){
$(this).addClass('menufixed').removeClass('menudefault').fadeIn('500');
});
}
here is my codepen: http://codepen.io/GCW/pen/WbQxrZ
It is needed to make a clone of the menu in order to keep the layout unchanged. And then operate on the clone.
DEMO http://codepen.io/anon/pen/dPYXLO
var menuClone = $();
if($(this).scrollTop() > pos.top+menu.offset().top-menu.height() && menuClone.length==0){
// ^^^^^^^^^^^^^^^^^^^
menuClone = menu.clone().appendTo('body').removeClass('menudefault').addClass('menufixed').hide().fadeIn('400');
// ^^^^^^^^^^^^^^^^^^^^^^^^^
} else if($(this).scrollTop() <= pos.top && menuClone.length>0){
// ^^^^^^^^^^^^^^^^^^^
menuClone.fadeOut('100', function(){
menuClone.remove();
menuClone = $();
});
}
EDIT
I suggest to get rid of menuClone.fadeOut(), just remove the clone menuClone.remove(); menuClone = $();
menu.fadeOut('500', function(){ etc...
Your 500 should not have '' around it. You have this twice actually. Once in your fadeOut effect and your fadeIn effect. 500 is not a string it is a value. You need a value.
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.offset().top-menu.height() && menu.hasClass('menudefault')){
menu.fadeOut(500, function(){
$(this).addClass('menufixed').removeClass('menudefault').fadeIn(500);
});
}
Here is a totally different approach. With this approach we clone the original menu and append the clone right before it so that way there is always an element occupying the space, therefore preventing the page from jumping.
JSBin: http://jsbin.com/tuxogolefa/4/edit?js,output
JSFiddle: http://jsfiddle.net/usve8wm8/
The JavaScript:
(function($) {
$(document).ready(function() {
var
$menu = $('#menu'),
$clone = $menu.clone(true),
$window = $(window),
top = $menu.offset().top,
topDown = top + $menu.height(),
currentScroll = 0;
$clone.addClass('fixed');
$menu.before($clone);
$window.scroll(function() {
currentScroll = $window.scrollTop();
if(currentScroll > topDown) {
$menu.addClass('invisible');
$clone.addClass('visible');
}
if(currentScroll < top) {
$menu.removeClass('invisible');
$clone.removeClass('visible');
}
});
});
})(jQuery);
The CSS:
body {margin:0; padding: 1em;}
#menu {
background: #e55;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline-block;
padding: 12px;
}
.fixed {
position: fixed;
top: 0;
left: 1em;
right: 1em;
z-index: 99;
opacity: 0;
}
.visible {
opacity: 1;
-webkit-transition: opacity .5s ease-in;
-moz-transition: opacity .5s ease-in;
transition: opacity .5s ease-in;
}
.invisible {
visibility: hidden;
}
The HTML:
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Careers</li>
<li>More</li>
</ul>
</div>